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

Froala 編輯器

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

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

Textbox.io

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

移動(dòng)設(shè)備支持允許用戶使用移動(dòng)友好的用戶界面，從相機(jī)或多媒體資料上傳圖像，使用Siri或Cortana處理文本等等。你可以通過應(yīng)用標(biāo)準(zhǔn)和自定義類和樣式來更改Textbox.io的外觀。

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

DHTMLX 富文本編輯器

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

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

Imperavi Redactor

Imperavi Redactor是一款基于web的文本編輯器，它提供了流暢、清晰的設(shè)計(jì)、可擴(kuò)展性、無限的靈活性、高效的API和令人驚嘆的用戶體驗(yàn)。其模塊化架構(gòu)允許你快速擴(kuò)展應(yīng)用程序的功能。清晰的代碼和整潔的UI為開發(fā)人員和用戶創(chuàng)造了極好的體驗(yàn)。在web前端培訓(xùn)學(xué)習(xí)中，有專業(yè)講師面授指導(dǎo)教學(xué)，還有系統(tǒng)全面的課程，你可以很快掌握這些知識(shí)和技能。

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

Syncfusion富文本編輯器

Syncfusion富文本編輯器是一個(gè)輕量級(jí)JavaScript工具，支持HTML和標(biāo)記。你可以使用它創(chuàng)建web和移動(dòng)應(yīng)用程序，如博客編輯器、信使、在線論壇等。內(nèi)聯(lián)模式使內(nèi)聯(lián)編輯器在用戶單擊可編輯區(qū)域中的內(nèi)容后顯示。

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

Syncfusion富文本編輯器提供了與Angular、React和Vue.js的集成。庫的列表不是很大，但它包含了最流行的選項(xiàng)，這是一個(gè)優(yōu)點(diǎn)。如果你想從事web前端開發(fā)，你可以從web前端培訓(xùn)課程開始，這是一個(gè)很好的起點(diǎn)。

了解更多

當(dāng)我們要發(fā)送一份文稿時(shí)，Word 對(duì)于大部分用戶而言都是首選應(yīng)用。然而對(duì)于很多文字工作者而言，移動(dòng)互聯(lián)網(wǎng)讓他們更加注重多平臺(tái)云同步和協(xié)作，于是他們開始由 Wold 遷移到了類似于 Evernote 這樣的云筆記應(yīng)用。

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

那么有沒有什么方法能讓我們更好地在移動(dòng)設(shè)備上進(jìn)行編輯排版呢？其實(shí)早就有很多先行者推薦使用 Markdown 這種標(biāo)記語言進(jìn)行寫作了。

Markdown 的優(yōu)勢(shì)

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

Markdown 使用規(guī)則

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

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

以記者們常使用的 Mac 平臺(tái)為例，這些 Markdown 編輯器中，最負(fù)盛名的是 Ulysses。Ulysses 之所以會(huì)受到很多文字工作者的喜愛，是因?yàn)槠浜啙嵉綐O致的界面。打開應(yīng)用，只需要敲下文字，無需任何設(shè)置——不用擔(dān)心電腦宕機(jī)（雖然在 Mac 上極少發(fā)生），它會(huì)自動(dòng)保存。同時(shí) Ulysses 還有 iOS 應(yīng)用，支持 iCloud 云同步，以及 Hand-off 功能。Hand-off 能用用戶在離開了 Mac 之后，還能繼續(xù)在移動(dòng)設(shè)備上繼續(xù)編輯文稿。而 iCloud 云同步的功能讓用戶能夠在任何設(shè)備上繼續(xù)編寫自己的文稿。

Ulysses 界面

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

Bear 界面

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

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

微信快速排版也離不開 Markdown

推薦 Markdown 標(biāo)記語言和工具的文章不勝枚舉，鈦媒體僅推薦了幾款實(shí)用型較高的編輯器和平臺(tái)。Markdown 的意義不僅僅在于能簡化排版編輯，它還兼具另一個(gè)很多人沒有發(fā)現(xiàn)的隱藏功能。

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

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

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

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

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

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

Bracket 界面

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

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

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

1. 找設(shè)計(jì)師給你設(shè)計(jì)一套漂亮的排版樣式。
2. 讓前端程序員將這套樣式寫成 css 模板。

讓專業(yè)人士做專業(yè)的工作，這樣效率最高。（本文獨(dú)家首發(fā)鈦媒體）

更多精彩內(nèi)容，關(guān)注鈦媒體微信號(hào)（ID：taimeiti），或者下載鈦媒體App

tmlParse 是一款基于windwos平臺(tái)的HTML文檔解析工具，可快速構(gòu)建DOM樹，從而輕松實(shí)現(xiàn)網(wǎng)頁元素的爬取工作。DOM樹就是一個(gè)HTML文檔的節(jié)點(diǎn)樹，每個(gè)節(jié)點(diǎn)由：標(biāo)簽（Tag）、屬性（Attribute）、文本（Text）三個(gè)值來描述。

所謂的HTML文檔解析，指的就是如何構(gòu)建一顆DOM樹，只有成功構(gòu)建出DOM樹，才有可能進(jìn)行后續(xù)的數(shù)據(jù)爬取和分析工作。顯然，構(gòu)建DOM樹是比較復(fù)雜的過程，因?yàn)椴皇敲恳粋€(gè)HTML文檔都會(huì)嚴(yán)格按照規(guī)范來書寫，因此解析過程需要具有一定容錯(cuò)能力。此外，解析效率也是一個(gè)需要考慮的因素，也就是說最好通過一次文檔掃描即可建立起DOM樹，而不是反復(fù)掃描。

下面是HtmlParse介紹。

工具特點(diǎn)

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

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

使用方法

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

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

HtmlPathFile：必選參數(shù)，要解析的HTML文檔路徑名，如果文件路徑中有空格，可使用雙引號(hào)將文件路徑包含；

-tag：必選參數(shù)，用于指定要抓取的HTML標(biāo)簽名稱； -attr：可選參數(shù)，用于指定標(biāo)簽的屬性值，如果不指定，則返回該標(biāo)簽的所有屬性值； -o：可選參數(shù)，用于指定抓取內(nèi)容輸出的文件，可將抓取的內(nèi)容保存為json格式的文件。 如果該參數(shù)不指定，則進(jìn)行控制臺(tái)輸出。 如果抓取的是script、style則會(huì)保存為js格式文件。

如果要抓取doctype，可使用-tag doctype，將整個(gè)doctype內(nèi)容獲取。此時(shí)將會(huì)忽略-attr指定的任何屬性值。

舉例說明

1、爬取網(wǎng)頁中所有超鏈接

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

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

2、爬取網(wǎng)頁中所有圖片鏈接

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

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

3、爬取網(wǎng)頁中所有腳本

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

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

輸出內(nèi)容

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

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

下面是一個(gè)sina網(wǎng)頁的所有超鏈接json

{
 "a": [{
  "href": "javascript：;",
  "text": "設(shè)為首頁"
 }, {
  "href": "javascript：;",
  "text": "我的菜單"
 }, {
  "href": "https://sina.cn/",
  "text": "手機(jī)新浪網(wǎng)"
 }, {
  "href": "",
  "text": "移動(dòng)客戶端"
 }, {
  "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": "新浪財(cái)經(jīng)"
 }, {
  "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": "新浪眾測(cè)"
 }, {
  "href": "https://mail.sina.com.cn/client/mobile/index.php?suda-key=mail_app&suda-value=login",
  "text": "新浪郵箱客戶端"
 }, {
  "href": "javascript：;",
  "text": "關(guān)閉置頂"
 }, {

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