HTML5 所見即所得 WYSIWYG (What You See Is What You Get) 編輯器的需求量是非常大的。但是現(xiàn)在有太多這樣的編輯器了，想要從其中找到一個(gè)合適的并不容易。今天這篇文章為大家分享 10 個(gè)我認(rèn)為是十分棒的所見即所得插件，應(yīng)該有適合你的需求并能節(jié)省你時(shí)間的。

1. Froala

Froala 所見即所得 HTML 編輯器非常易于整合和使用。它幾乎不需要你掌握任何代碼知識(shí)。它需要 jQuery 1.11.0 或者更高版本、以及 Font Awesome 4.4.0 字體圖標(biāo)的支持。除了整合的 UX 以及 UI 外，還提供了很好的 XSS 攻擊保護(hù)。

特點(diǎn)：

• 文件壓縮后 34K
• 行內(nèi)編輯
• 支持鍵盤快捷鍵
• 要求基本的 HTML 和 JavaScript 知識(shí)
• 深淺兩種主題
• 對(duì)移動(dòng)端做了優(yōu)化
• 支持Word
• 34 種語(yǔ)言支持以及 RTL(Right to Left) 從右向左支持

2. ContentTools

ContentTools 是一個(gè)小而美的內(nèi)容編輯器。該庫(kù)不需要任何 JavaScript 框架或庫(kù)的支持(包括 jQuery)，但是卻表現(xiàn)很好。ContentTools 包由 5 個(gè)庫(kù)組成，每一個(gè)都可以單獨(dú)使用，并且該插件易于擴(kuò)展。

特點(diǎn)：

• 壓縮后 49 KB
• 行內(nèi)編輯
• 可以調(diào)整圖片和視頻大小
• 支持 撤銷/重做 (undo/redo)

3. Raptor Editor

Raptor Editor 是一個(gè)開源的 JavaScript 所見即所得 HTML 編輯器，對(duì)用戶友好，易于集成和定制。它為行內(nèi)編輯而設(shè)計(jì)，是復(fù)雜的多塊布局的理想選擇。它所用最新的技術(shù)如 HTML5 ContentEditable 及 jQuery ，特性有內(nèi)置單元測(cè)試、模塊化、可擴(kuò)展及插件 API。

特點(diǎn)：

• 支持行內(nèi)編輯
• 靈活的對(duì)接選項(xiàng)
• 可定制的主題
• 良好的文檔

4. Aloha

Aloha 是一個(gè)多功能的內(nèi)容編輯庫(kù)。它允許在你的 WEB 應(yīng)用中無(wú)縫的嵌入編輯。主要缺點(diǎn)是不支持圖片插入。

特點(diǎn)：

• 142 KB
• 支持WORD
• 跨瀏覽器兼容
• 易于定制

5. TinyMCE

TinyMCE是一個(gè)基于 WEB 的獨(dú)立的JavaScript的HTML所見即所得平臺(tái)。它允許你把 HTML textarea 字段或其他元素轉(zhuǎn)化為編輯器實(shí)例。它遵循 WAI-ARIA 規(guī)范，使得它適用于屏幕閱讀器如JAWS 和 NVDA。它還有一個(gè)你可以得到優(yōu)先支持的企業(yè)方案。

特點(diǎn)：

• 實(shí)時(shí)媒體嵌入
• 內(nèi)置圖像編輯
• 拼寫檢查（企業(yè)版）
• 支持WORD
• 40+ 語(yǔ)言支持
• 跨瀏覽器

6. Bootstrap3-wysiwyg

Bootstrap3-wysiwyg 是一個(gè) JavaScript 插件，由于使用 wysihtml5 及 BootStrap ，使得它是一個(gè)易用使用且漂亮的所見即所得編輯器。

特點(diǎn)：

• 壓縮后 206 KB
• 支持 RequireJS
• 可自定義工具欄模版和主題
• 提供事件如 load 和 blur 。

7. Summernote

Summernote 是一個(gè)基于 Bootstrap 的文本編輯器，提供了各種不同的主題供選擇。也有一個(gè) Material 版本的主題，叫做 MaterialNote。

特點(diǎn)：

• JS+CSS 共 80 KB
• 支持 Bootstrap 3.x.x
• 容易遷移到 Django, Rails 或 Angular
• 易于定制
• CodeMirror 一體化

8. CKEditor

CKEditor 是一個(gè)好用的 HTML 編輯器，專為簡(jiǎn)化 WEB 內(nèi)容創(chuàng)作而設(shè)計(jì)。它把普通的文字處理工作直接帶到 WEB 頁(yè)面來(lái)實(shí)現(xiàn)。

特點(diǎn)：

• 使用 CKBuilder 定制而來(lái)
• 支持 WORD
• 行內(nèi)編輯
• 撤消/重做支持
• RTL(右到左)支持
• 支持 60 多種語(yǔ)言

9. Trumbowyg

Trusmbowyg 是這里列出的編輯器中最輕便的。所有其他所見即所得編輯器都大于 45 KB，而 Trumbowyg 只有 16 KB。它要求 jQuery >= 1.7。

特點(diǎn)：

• 只有 16KB
• 30 多種語(yǔ)言支持

10. Redactor

Redactor 是一個(gè)快速、強(qiáng)大、可擴(kuò)展的編輯器，它已經(jīng)存在了差不多 7 年了，并且還在不斷開發(fā)。它會(huì)自動(dòng)把圖片上傳到 Amazon S3。

特點(diǎn)：

• 壓縮后 75KB
• 行內(nèi)編輯
• 支持 CodeMirror
• 圖片拖放功能
• 由于該編輯器是基于插件的，所以很容易定制

總結(jié)

這篇文章中為你展示了 10 個(gè)我認(rèn)為是最棒的 jQuery 和 HTML 所見即所得編輯器插件，我希望這個(gè)列表在你需要為你的項(xiàng)目選擇文本編輯器的時(shí)候有所幫助，希望有一款能夠節(jié)省你尋找的時(shí)間并且適合你的需求。

via：sitepoint.com，本文由 Specs 翻譯整理，發(fā)布在 WEB資源網(wǎng)，未經(jīng)允許，不得轉(zhuǎn)載。