Web前端培訓：五種JavaScript富文本編輯器的比較

發自己的基于web的文本編輯器背后可能有不同的原因，但是，你總能找到一個工具來創建符合你的需求和資金的在線文本編輯器。在本文中，我們將簡要回顧五個JavaScript富文本編輯器，幫助你找到滿足期望的編輯器，以便更好的進行前端開發。想要掌握web前端開發最新的編程技能和知識，建議參加web前端培訓，課程實時更新，緊跟企業需求，讓你輕松找到工作。

Froala 編輯器

Froala編輯器是一個JavaScript WYSIWYG編輯器，非常關注與流行開發框架的輕松集成。目前，你可以將Froala與React.js、Aurelia、Angular、Ionic、Django和其他框架一起使用。Froala編輯器強大而豐富的API提供了廣泛的可能性，包含數十個代碼示例的優秀文檔將幫助你在幾分鐘內開始。

Froala編輯器的另一個顯著優勢是易于添加新功能。一堆易于使用的插件（有30多個）允許添加新功能，而無需任何重大努力。編寫良好、結構化和文檔化的代碼非常容易理解、維護和擴展。

Textbox.io

Textbox.io是一個極簡但功能強大的在線文本編輯器，支持桌面和移動設備。在主要功能中，內置的圖像處理和存儲、文件拖放、拼寫檢查和自動更正都是很不錯的功能，此外，該工具還實現了屏幕閱讀器等輔助技術，并符合WAI-ARIA可訪問性標準。更多關于文本編輯器的相關知識，可以考慮通過參加web前端培訓來學習，有專業老師指導，有全面系統的課程，學起來又快又輕松。

移動設備支持允許用戶使用移動友好的用戶界面，從相機或多媒體資料上傳圖像，使用Siri或Cortana處理文本等等。你可以通過應用標準和自定義類和樣式來更改Textbox.io的外觀。

Textbox.io支持與ASP.NET、Knockout、XPages和Angular的集成。

DHTMLX 富文本編輯器

dhtmlx富文本編輯器是一個完全可自定義的JavaScript文本編輯器，支持HTML和標記作為輸入和輸出格式以及純文本。其集成功能允許在Angular、React和Vue.js項目中使用此文本編輯器。

基于dhtmlxRichText的在線應用程序的用戶可以在緊湊的經典模式和文檔模式之間切換。對于那些在小屏幕設備上工作的人來說，全屏模式非常有用。此文本編輯器的完全可自定義外觀允許你創建獨特的外觀。你可以使用任何理想的圖標、字體或顏色來開發可識別的設計。此外，你還可以更改可用控件的行為，并根據需要添加自己的控件。dhtmlxRichText支持塊引號、鏈接以及所有必要的格式和編輯功能。

Imperavi Redactor

Imperavi Redactor是一款基于web的文本編輯器，它提供了流暢、清晰的設計、可擴展性、無限的靈活性、高效的API和令人驚嘆的用戶體驗。其模塊化架構允許你快速擴展應用程序的功能。清晰的代碼和整潔的UI為開發人員和用戶創造了極好的體驗。在web前端培訓學習中，有專業講師面授指導教學，還有系統全面的課程，你可以很快掌握這些知識和技能。

目前，有22個插件用于最常見的任務。此外，你可以創建自己的插件，而無需任何重大努力。安裝和配置此文本編輯器不需要技術專家。文檔編寫得很好，不會引起任何問題。

Syncfusion富文本編輯器

Syncfusion富文本編輯器是一個輕量級JavaScript工具，支持HTML和標記。你可以使用它創建web和移動應用程序，如博客編輯器、信使、在線論壇等。內聯模式使內聯編輯器在用戶單擊可編輯區域中的內容后顯示。

工具欄配置的可能性很大。例如，你可以根據項目的要求向應用程序添加多行工具欄、展開工具欄、快速工具欄或浮動工具欄。此外，你還可以根據工具欄按鈕的類別配置工具欄按鈕和組命令，用戶可以在文本中插入圖像和超鏈接。此外，你還可以插入HTML表，以簡化處理財務數據的工作。所有表都可以動態操作。

Syncfusion富文本編輯器提供了與Angular、React和Vue.js的集成。庫的列表不是很大，但它包含了最流行的選項，這是一個優點。如果你想從事web前端開發，你可以從web前端培訓課程開始，這是一個很好的起點。

了解更多

當我們要發送一份文稿時，Word 對于大部分用戶而言都是首選應用。然而對于很多文字工作者而言，移動互聯網讓他們更加注重多平臺云同步和協作，于是他們開始由 Wold 遷移到了類似于 Evernote 這樣的云筆記應用。

可是說到這兒問題就來了：在電腦上，顯示屏幕足夠大，無論是打字還是排版都十分的便利。而在移動設備上，屏幕的局限性僅僅是打字就已經非常困難了，更不用提編輯排版了。

那么有沒有什么方法能讓我們更好地在移動設備上進行編輯排版呢？其實早就有很多先行者推薦使用 Markdown 這種標記語言進行寫作了。

Markdown 的優勢

Markdown 并不是任何一種編程語言，它是一種標記語言，通過簡單的標記語法，它可以使普通文本內容具有一定的格式，其特點在于輕量和易學習。僅僅需要使用一些符號標識，即可完成過去需要通過多次點按才能完成的格式編輯。Markdown 標記包括標題分級，加粗，斜體，引用文本，引用代碼等等。詳細使用方式如下圖：

Markdown 使用規則

掌握 Markdown 的使用方法連 5 分鐘都不需要，然后配合支持 Markdown 的工具，即編寫出格式工整的文章。目前市面上支持 Markdown 的工具很多，甚至有一些云協作寫作軟件或平臺也開始支持 Markdown 了。怎樣才算是一款優秀的 Markdown 編輯器呢？鈦媒體記者認為需要滿足以下幾個方面：

界面簡潔，功能簡單
支持云同步
支持輸出 HTML 頁面

以記者們常使用的 Mac 平臺為例，這些 Markdown 編輯器中，最負盛名的是 Ulysses。Ulysses 之所以會受到很多文字工作者的喜愛，是因為其簡潔到極致的界面。打開應用，只需要敲下文字，無需任何設置——不用擔心電腦宕機（雖然在 Mac 上極少發生），它會自動保存。同時 Ulysses 還有 iOS 應用，支持 iCloud 云同步，以及 Hand-off 功能。Hand-off 能用用戶在離開了 Mac 之后，還能繼續在移動設備上繼續編輯文稿。而 iCloud 云同步的功能讓用戶能夠在任何設備上繼續編寫自己的文稿。

Ulysses 界面

記者推薦的另一個編輯器是全平臺通殺的 Bear。無論是 Mac 還是 Windows 甚至是 iOS 設備和 Android 設備，它統統支持。不過相較于 Ulysses 這種買斷的方式，Bear 采用的是“付費訂閱”的模式，付費用戶才擁有跨平臺同步以及多種格式的文稿導出等拓展功能。

Bear 界面

如果你需要一個支持 Markdown 的協作平臺，那么鈦媒體記者也推薦使用國內的協作平臺“簡書”。它不是一款單純的寫作工具，而是在線創作及發布平臺。它既支持富文本也支持 Markdown。它既沒有 Mac 端，也沒有 Win 端的客戶端，但它擁有 iOS 和 Android 手機客戶端。用戶只能在線寫作。對于那些希望擁有云同步功能，但又不想花錢訂閱 Bear 的 Win 用戶而言，簡書是個不錯的選擇。

國內的多人同步辦公平臺“石墨”以及國外的“quip” 同樣也支持 Markdown 標記語言。如果你是一名 Evernote 的重度使用者，也可以選擇“馬克飛象”這樣的付費訂閱服務，將使用 Markdown 寫出的文章同步到 Evernote 中。

微信快速排版也離不開 Markdown

推薦 Markdown 標記語言和工具的文章不勝枚舉，鈦媒體僅推薦了幾款實用型較高的編輯器和平臺。Markdown 的意義不僅僅在于能簡化排版編輯，它還兼具另一個很多人沒有發現的隱藏功能。

如果 Markdown 編輯器支持輸出 HTML 文件，那么搭配 CSS 文本配置，完全可以實現“寫稿-輸出 HTML 文本-粘貼文本到微信公眾號-發布”這樣一個過程。而不用在完成寫稿之后，再復制到各類在線微信公眾號編輯器中進行二次修改的過程。這樣一來能再一次極大地簡化編輯排版的過程。

CSS 文本就是用來介紹文本字段換行、文本文字間間隔、文本縮進、文本文字上下排間隔等 DIV CSS 文本樣式。使用 CSS 文本，用戶不僅可以實現文字的排版，還能做小動畫和繪制一些文字樣式等等。

有些人會疑惑，既然有現成的在線微信排版編輯器為什么不使用呢？其實這個問題要回答起來很簡單：微信排版編輯器所提供的樣式有限，而且無論是采用何種排列組合的方式，一定會存在與其他的公眾號相重合的可能性。同時，每一次都需要花費大量的時間去進行排版校正，調節詳細的參數，這些動作是重復而無意義的。相較于在線編輯器，這種方式體驗更好，效率更高。

如何做一套屬于自己的“排版模板”

那么問題來了，如何寫出一套自己心儀的微信排版模板呢？首先，需要了解 HTML 的基本標記；然后再花長一點的時間了解 CSS 的基本標記；最后打開一個支持 CSS 的編輯器，開始寫屬于自己的規范。

以鈦媒體記者使用的 Mac 為例，在了解了 HTML 和 CSS 標記之后，筆者選擇了“Bracket”作為 CSS 模板編輯器。因為 Bracket 能支持代碼實時預覽的功能。在編寫模板的同時，你還可以通過參考其他的文章排版代碼，對自己的排版進行修改。具體方法是在 Chrome 瀏覽器中打開其他文章，通過 Chrome 瀏覽器中的開發者工具，檢查 CSS 代碼。

Bracket 界面

在這個過程中，需要注意的一點是，排版所采用的每一個參數，比如字號，行間距等等都不是一成不變的，你可以擁有自己的特殊排版方式。在編寫 CSS 模板的過程中，少不了反復地預覽檢查代碼，編輯的過程。

以鈦媒體記者使用的 Ulysses 為例，在編寫完成后，導出 CSS 文本。點擊“快速導出”，選擇 HTML 格式，“樣式”點擊編寫好的 CSS 模板，點擊“預覽”，在 Chrome 中打開預覽文本。然后將這些文本復制到微信公眾號后臺，再插入配圖，即可推送微信公眾號文章了。

當然，以上是“自己動手豐衣足食”的方式。如果你身邊有設計師和程序員朋友，你還可以這樣做：

找設計師給你設計一套漂亮的排版樣式。
讓前端程序員將這套樣式寫成 css 模板。

讓專業人士做專業的工作，這樣效率最高。（本文獨家首發鈦媒體）

更多精彩內容，關注鈦媒體微信號（ID：taimeiti），或者下載鈦媒體App

tmlParse 是一款基于windwos平臺的HTML文檔解析工具，可快速構建DOM樹，從而輕松實現網頁元素的爬取工作。DOM樹就是一個HTML文檔的節點樹，每個節點由：標簽（Tag）、屬性（Attribute）、文本（Text）三個值來描述。

所謂的HTML文檔解析，指的就是如何構建一顆DOM樹，只有成功構建出DOM樹，才有可能進行后續的數據爬取和分析工作。顯然，構建DOM樹是比較復雜的過程，因為不是每一個HTML文檔都會嚴格按照規范來書寫，因此解析過程需要具有一定容錯能力。此外，解析效率也是一個需要考慮的因素，也就是說最好通過一次文檔掃描即可建立起DOM樹，而不是反復掃描。

下面是HtmlParse介紹。

工具特點

1、綠色純天然，無任何第三方依賴庫，文件大小不到150K； 2、解析速度快，具有一定的HTML語法容錯能力，可快速將HMTL文檔解析為DOM樹； 3、基于命令行參數，可通過不同參數獲取指定TAG的屬性值和文本內容，從而實現網頁爬取功能； 4、可將爬取數據輸出為json格式，方便第三方程序進一步分析和使用； 5、可爬取script腳本到指定的js文件中；

下載地址：http://softlee.cn/HtmlParse.zip

使用方法

HtmlParse HtmlPathFile -tag TagName [-attr] [Attribute] [-o] [JsonPathFile]

解析指定的HTML文檔，并將文檔中指定的標簽及屬性輸出到指定文件中。

HtmlPathFile：必選參數，要解析的HTML文檔路徑名，如果文件路徑中有空格，可使用雙引號將文件路徑包含；
-tag：必選參數，用于指定要抓取的HTML標簽名稱； -attr：可選參數，用于指定標簽的屬性值，如果不指定，則返回該標簽的所有屬性值； -o：可選參數，用于指定抓取內容輸出的文件，可將抓取的內容保存為json格式的文件。如果該參數不指定，則進行控制臺輸出。如果抓取的是script、style則會保存為js格式文件。

如果要抓取doctype，可使用-tag doctype，將整個doctype內容獲取。此時將會忽略-attr指定的任何屬性值。

舉例說明

1、爬取網頁中所有超鏈接

HtmlParse c:/sina.html -tag a -attr href -o c:/sina.json

解析C盤下的sina.html文檔，并提取該文檔中的所有超鏈接到sina.json文件中。其中**-tag a -attr href，用于指定獲取超鏈接標簽a的href**屬性。

2、爬取網頁中所有圖片鏈接

HtmlParse c:/sina.html -tag img -attr src -o c:/sina.json

解析C盤下的sina.html文檔，并提取該文檔中的所有圖片鏈接到sina.json文件中。

3、爬取網頁中所有腳本

HtmlParse c:/sina.html -tag script -o c:/sina.js

解析C盤下的sina.html文檔，并提取該文檔中的所有腳本函數到sina.js文件中。

輸出內容

如果通過-o參數指定輸出文件，則會生成一個json格式的文檔。 TagName為爬取的標簽名稱，比如超鏈接的a，其值是一個json數組，數組中的每個內容為Json對象，每個Json對象，有屬性和文本構成。如果-attr 指定了要爬取的屬性，則AttrName為指定的屬性名稱，比如href或src。text為該標簽的文本內容，有些標簽不存在文本內容，比如img、meta等，則該值為空。json格式如下：

{
  "TagName":
  {
     {"AttrName":"AttrValue1", "text":"text1"}
     {"AttrName":"AttrValue1", "text":"text2"}
  }
}

下面是一個sina網頁的所有超鏈接json

{
 "a": [{
  "href": "javascript：;",
  "text": "設為首頁"
 }, {
  "href": "javascript：;",
  "text": "我的菜單"
 }, {
  "href": "https://sina.cn/",
  "text": "手機新浪網"
 }, {
  "href": "",
  "text": "移動客戶端"
 }, {
  "href": "https://c.weibo.cn/client/guide/download",
  "text": "新浪微博"
 }, {
  "href": "https://so.sina.cn/palmnews/web-sinanews-app-download.d.html",
  "text": "新浪新聞"
 }, {
  "href": "https://finance.sina.com.cn/mobile/comfinanceweb.shtml",
  "text": "新浪財經"
 }, {
  "href": "https://m.sina.com.cn/m/sinasports.shtml",
  "text": "新浪體育"
 }, {
  "href": "https://tousu.sina.com.cn/about_app/index?frompage=heimaopc",
  "text": "黑貓投訴"
 }, {
  "href": "http://blog.sina.com.cn/lm/z/app/",
  "text": "新浪博客"
 }, {
  "href": "https://games.sina.com.cn/o/kb/12392.shtml",
  "text": "新浪游戲"
 }, {
  "href": "https://zhongce.sina.com.cn/about/app",
  "text": "新浪眾測"
 }, {
  "href": "https://mail.sina.com.cn/client/mobile/index.php?suda-key=mail_app&suda-value=login",
  "text": "新浪郵箱客戶端"
 }, {
  "href": "javascript：;",
  "text": "關閉置頂"
 }, {

來源：https://www.cnblogs.com/softlee/p/16374079.html

在線咨詢

上一篇：如何制作一個完美的全屏視頻H5
下一篇：html頁面中css縮放圖片的方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商