14款前端常用的富文本編輯器插件

文本編輯器是一種可內(nèi)嵌于瀏覽器，所見即所得的文本編輯器。它提供類似于Office Word 的編輯功能，方便那些不太懂html用戶使用，富文本編輯器的應(yīng)用非常廣泛，它的歷史與圖文網(wǎng)頁(yè)誕生的歷史幾乎一樣長(zhǎng)。

作為一個(gè)技術(shù)人員，手上備上兩款富文本編輯器還是很有用的，指不定那個(gè)項(xiàng)目就要集成一個(gè)進(jìn)去。

到時(shí)候現(xiàn)找現(xiàn)用那可就費(fèi)功夫了，畢竟從開發(fā)上講，每個(gè)富文本編輯器的用法都是有區(qū)別的。

下面是我收集的一些業(yè)界比較受歡迎的富文本編輯器，喜歡的朋友、用過的朋友可以一起看看，一起探討。

1、wangEditor

網(wǎng)址：http://www.wangeditor.com/

基于JavaScript和css開發(fā)的 Web富文本編輯器，輕量、簡(jiǎn)潔、界面美觀、易用、開源免費(fèi)。

兼容性

兼容主流的 PC 瀏覽器，如 Chrome Firefox Safari Edge 等
暫不支持移動(dòng)端編輯（支持移動(dòng)端查看）
不再支持 IE 瀏覽器

2、TinyMCE

網(wǎng)址：https://www.tiny.cloud/docs/demo/full-featured/

TinyMCE是一個(gè)輕量級(jí)的基于瀏覽器的所見即所得編輯器，由JavaScript寫成。它對(duì)IE6+和Firefox1.5+都有著非常良好的支持。

功能齊全，界面美觀，就是文檔是英文的，對(duì)開發(fā)人員英文水平有一定要求。

3、百度ueditor

網(wǎng)址：https://github.com/fex-team/ueditor

UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，功能齊全，可定制，注重用戶體驗(yàn)等特點(diǎn)，開源基于MIT協(xié)議，允許自由使用和修改代碼，缺點(diǎn)是已經(jīng)沒有更新了。

4、kindeditor

網(wǎng)址：http://kindeditor.net/demo.php

KindEditor 是一套開源的在線html編輯器，主要用于讓用戶在網(wǎng)站上獲得所見即所得編輯效果，開發(fā)人員可以用 KindEditor 把傳統(tǒng)的多行文本輸入框(textarea)替換為可視化的富文本輸入框。

KindEditor 使用 JavaScript 編寫，可以無縫地與 Java、.NET、php、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用。

主要特點(diǎn)

快速：體積小，加載速度快

開源：開放源代碼，高水平，高品質(zhì)

底層：內(nèi)置自定義 DOM 類庫(kù)，精確操作 DOM

擴(kuò)展：基于插件的設(shè)計(jì)，所有功能都是插件，可根據(jù)需求增減功能

風(fēng)格：修改編輯器風(fēng)格非常容易，只需修改一個(gè) CSS 文件

兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera

5、Textbox

網(wǎng)址：https://www.textbox.io/

Textbox是一款極簡(jiǎn)但功能強(qiáng)大的在線文本編輯器，支持桌面設(shè)備和移動(dòng)設(shè)備。主要功能包含內(nèi)置的圖像處理和存儲(chǔ)、文件拖放、拼寫檢查和自動(dòng)更正。

此外，該工具還實(shí)現(xiàn)了屏幕閱讀器等輔助技術(shù)，并符合WAI-ARIA可訪問性標(biāo)準(zhǔn)。

6、CKEditor

網(wǎng)址：https://ckeditor.com/ckeditor-5/demo/

CKEditor官方版是一款專業(yè)專業(yè)的在線文字編輯器，軟件支持各種不同的瀏覽器，可以讓用戶們輕松在線編輯，CKEditor5官方版軟件體積非常小巧，使用起來也十分方便快捷，還能與不同的編程語(yǔ)言相結(jié)合，是大家編輯網(wǎng)頁(yè)代碼的必備工具。

7、quill

網(wǎng)址：https://quilljs.com/

Quill是輕型的編輯器，樣式一般（黑白風(fēng)），功能中等，它的代碼高亮功能比較強(qiáng)，同樣支持行內(nèi)編輯模式，工具條可自定義。

開源免費(fèi)，項(xiàng)目活躍，一直有人維護(hù)。

8、simditor

網(wǎng)址：https://simditor.tower.im/

simditor是Tower平臺(tái)使用的富文本編輯器，是一款輕量化的編輯器，界面簡(jiǎn)約，功能實(shí)用，插件不是很多，功能要求不高的可以使用。

雖然是國(guó)內(nèi)出品，但文檔是英文的。開源免費(fèi)。

9、summernote

網(wǎng)址：https://summernote.org/

summernote是一款輕量級(jí)的富文本編輯器，比較容易上手，使用體驗(yàn)流暢，支持各種主流瀏覽器。

summernote開源免費(fèi)，該項(xiàng)目一直比較活躍，一直都有人在維護(hù)。summernote同樣依賴于jquery和bootstrap，使用前先引入這兩項(xiàng)。

10、jodit

網(wǎng)址：https://xdsoft.net/jodit/

Jodit是一款使用純TypeScript編寫的（無需使用其他庫(kù)），美觀實(shí)用的所見即所得（WYSIWYG）開源富文本編輯器，支持中文，超強(qiáng)自定義。

11、Editor.md

網(wǎng)址：https://pandao.github.io/editor.md/

功能非常豐富的編輯器，左端編輯，右端預(yù)覽，非常方便，完全免費(fèi)。

主要特性

支持“標(biāo)準(zhǔn)”Markdown / CommonMark和Github風(fēng)格的語(yǔ)法，也可變身為代碼編輯器；
支持實(shí)時(shí)預(yù)覽、圖片（跨域）上傳、預(yù)格式文本/代碼/表格插入、代碼折疊、搜索替換、只讀模式、自定義樣式主題和多語(yǔ)言語(yǔ)法高亮等功能；
支持ToC（Table of Contents）、Emoji表情、Task lists、@鏈接等Markdown擴(kuò)展語(yǔ)法；
支持TeX科學(xué)公式（基于KaTeX）、流程圖 Flowchart 和時(shí)序圖 Sequence Diagram;
支持識(shí)別和解析HTML標(biāo)簽，并且支持自定義過濾標(biāo)簽解析，具有可靠的安全性和幾乎無限的擴(kuò)展性；
支持 AMD / CMD 模塊化加載（支持 Require.js & Sea.js），并且支持自定義擴(kuò)展插件；
兼容主流的瀏覽器（IE8+）和Zepto.js，且支持iPad等平板設(shè)備；

12、froala Editor

網(wǎng)址：https://www.froala.com/wysiwyg-editor

界面非常好看，功能非常強(qiáng)大，非常好用（非免費(fèi)，可破解）

13、eWebEditor

網(wǎng)址：http://www.ewebeditor.net/

eWebEditor外觀和使用風(fēng)格都和微軟 Word很類似，功能很多。工具條可以定制，運(yùn)行速度很快。

導(dǎo)入文件接口很多，支持word、excel、pdf、ppt直接導(dǎo)入，目前版本不支持代碼高亮，不適合純技術(shù)平臺(tái)使用，適合內(nèi)容編輯人員使用。

eWebEditor有很長(zhǎng)的歷史了，是典型的傳統(tǒng)富文本編輯器，不論是界面，還是功能都比較傳統(tǒng)。eWebEditor是收費(fèi)的，但也有免費(fèi)的精簡(jiǎn)版，精簡(jiǎn)版沒有后臺(tái)功能。

14、dhtmlxEditor

網(wǎng)址：https://dhtmlx.com/docs/products/dhtmlxRichText/

DHTMLX組件是一整套基于js的UI庫(kù)，功能強(qiáng)大，其中包含編輯器dhtmlxEditor。

該編輯器可以直接集成到Angular，react和vue.js框架中，該編輯器還同時(shí)支持Markdown和富文本。

支持普通視圖和類似word一樣的頁(yè)面視圖，支持全屏幕，工具支持自定義，包括工具條顏色和樣式等。

dhtmlxEditor分為免費(fèi)版和收費(fèi)版，免費(fèi)版具有絕大多數(shù)功能，而且免費(fèi)版是開源的你可以在代碼級(jí)別隨便擴(kuò)充。

最后

富文本編輯器產(chǎn)品真的非常多，以上只是本人接觸過的一些，相信還有很多很好的富文本存在，其實(shí)也沒必要全都試一遍，只有最適合自己的，才是最好的。

天給小伙伴們分享一款超好用的Vue富文本編輯器Vue2Editor。

vue2-editor 一個(gè)底層基于 Quill.js 構(gòu)建的vue2.x版本圖文編輯器組件，star高達(dá)2K+。簡(jiǎn)單易上手的API及豐富的自定義參數(shù)配置。

特性

快速且輕量級(jí)、易于上手
基于vue.js & Quill.js
標(biāo)準(zhǔn)化HTML
支持自定義配置

安裝

$ npm i vue2-editor -S

引入插件

// 在main.js全局引入
import Vue from "vue";
import Vue2Editor from "vue2-editor";
Vue.use(Vue2Editor);

// 在.vue頁(yè)面局部引入
<script>
import { VueEditor } from "vue2-editor";
export default {
  components: {
    VueEditor
  },
};
</script>

基礎(chǔ)版

<template>
  <vue-editor v-model="content" />
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },
  data: () => ({
    content: "<h1>Some initial content</h1>"
  })
};
</script>

多個(gè)編輯器并存實(shí)例

<template>
  <div id="app">
    <vue-editor id="editor1" v-model="editor1Content"></vue-editor>
    <vue-editor id="editor2" v-model="editor2Content"></vue-editor>
  </div>
</template>
<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      editor1Content: "<h1>Editor 1 Starting Content</h1>",
      editor2Content: "<h1>Editor 2 Starting Content</h1>"
    };
  }
};
</script>

自定義工具欄

<template>
  <vue-editor v-model="content" :editor-toolbar="customToolbar" />
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },
  data: () => ({
    content: "<h1>Html For Editor</h1>",
    customToolbar: [
      ["bold", "italic", "underline"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["image", "code-block"]
    ]
  })
};
</script>

兩個(gè)常用方法

<vue-editor ref="editor" v-model="content" />

獲取光標(biāo)位置

let cursorPos = this.$refs.editor.quill.selection.savedRange.index

在光標(biāo)處插入字符串或其它數(shù)據(jù)類型

this.$refs.editor.quill.insertText(this.$refs.editor.quill.selection.savedRange.index, '插入的內(nèi)容');

更多用法大家可自行去查閱文檔。

# 文檔地址
https://www.vue2editor.com/

# 倉(cāng)庫(kù)地址
https://github.com/davidroyer/vue2-editor

ok，就介紹到這里。如果感興趣的話，可以去看下哈。歡迎交流討論~

rackets介紹

最近開始使用一個(gè)新的編輯器，是Adobe開發(fā)的開源的項(xiàng)目，與Sublime Text2相比有兩點(diǎn)優(yōu)勢(shì)：1.可以實(shí)時(shí)預(yù)覽；2.可以快速編輯，在HTML可以編輯CSS和JS代碼。

Adobe Brackets是一個(gè)開源的基于HTML/CSS/JavaScript開發(fā)，運(yùn)行在native shell上的集成開發(fā)環(huán)境。該項(xiàng)目由Adobe創(chuàng)建和維護(hù)，根據(jù)MIT許可證發(fā)布。提供Windows和OS X平臺(tái)支持。

Brackets的特點(diǎn)是簡(jiǎn)約、快捷，沒有很多的視圖或者面板，它的核心目標(biāo)是減少在開發(fā)過程中那些效率低下的重復(fù)性工作，例如瀏覽器刷新，修改元素的樣式，搜索功能等等。

Brackets使用

官方提供簡(jiǎn)體中文語(yǔ)言包，在菜單欄處選擇debug->language->simple chinese就可更換為簡(jiǎn)體中文版本

左側(cè)目錄樹頂部會(huì)顯示你最近打開的正在工作的幾個(gè)文檔，非常的方便。

Brackest會(huì)檢測(cè)文檔是否符合html規(guī)范，并且還有JS錯(cuò)誤提示，點(diǎn)擊黃色三角感嘆號(hào)就會(huì)彈出錯(cuò)誤提示，如下圖

把光標(biāo)放在一個(gè)class或id屬性的標(biāo)簽名稱上，按下Ctrl/Cmd + E（“編輯”）或退出編輯。Brackets將搜索項(xiàng)目下所有CSS文件，然后打開一個(gè)內(nèi)嵌的編輯器嵌入在HTML文件中，可以讓你迅速修改CSS代碼。唯一美中不足的是：搜索的是項(xiàng)目下所有的CSS文件，如果能修改成所搜當(dāng)前文件使用的CSS文件就更好了。

Brackest同樣也支持JS的快速預(yù)覽和編輯。

Brackets內(nèi)建取色器，提供RGBa、HEX、HSLa的顏色編碼形式。把光標(biāo)放在一個(gè)顏色編碼上，按下Ctrl/Cmd + E（“編輯”），退出取色器窗口需要使用Esc鍵。

Brackets提供網(wǎng)頁(yè)即時(shí)預(yù)覽功能。使用該功能時(shí)，Brackets調(diào)用Chrome瀏覽器打開當(dāng)前頁(yè)面，此后修改html、css、javascript并保存后，所修改的內(nèi)容會(huì)即時(shí)響應(yīng)到瀏覽器中的頁(yè)面，無須手動(dòng)刷新頁(yè)面。這是Brackets最大的一個(gè)亮點(diǎn)，有兩個(gè)顯示器的coder有福了，可以分屏顯示Brackets和chrome，即時(shí)修改即時(shí)預(yù)覽，無需切換編輯器/瀏覽器和刷新頁(yè)面。

目前即時(shí)預(yù)覽功能的一些限制：

它僅適用于Chrome瀏覽器為目標(biāo)瀏覽器，你必須安裝Chrome。

它依賴于在Chrome瀏覽器中的遠(yuǎn)程調(diào)試功能，這是一個(gè)命令行標(biāo)志啟用。在Mac上，如果你已經(jīng)在使用Chrome瀏覽器，這時(shí)啟動(dòng)“即時(shí)預(yù)覽”，Brackets將詢問你是否要重新啟動(dòng)Chrome瀏覽器啟用遠(yuǎn)程調(diào)試功能。

只能同時(shí)對(duì)一個(gè)HTML文件進(jìn)行預(yù)覽 – 如果切換另一個(gè)HTML文件，Brackets將關(guān)閉原來的預(yù)覽。

Brackets快捷鍵

Ctrl/Cmd+Shift+H 可以呼出與關(guān)閉文件樹

Ctrl/Cmd + E 快速預(yù)覽/編輯 css樣式/javascript函數(shù)

Ctrl/Cmd + +/- 放大縮小編輯區(qū)字體大小

Ctrl/Cmd + 0 重置編輯區(qū)字體大小

Ctrl/Cmd + Alt + P 打開即時(shí)預(yù)覽功能

Ctrl/Cmd + / 行注釋

Ctrl/Cmd + Alt + / 塊注釋

不足：不支持代碼折疊。

Brackets插件推薦

1.代碼格式化插件：Beautify

直接打開Brackets 插件管理器，搜索安裝beautify。

安裝完畢后，選擇菜單上的編輯→beautify（或使用快捷鍵ctrl+alt+L）完成代碼格式化

2.HTML代碼編輯：Emmet

最強(qiáng)大的HTML和CSS快速編輯插件

3.CSS和JS壓縮插件：Minify

很強(qiáng)大的插件，集成了CSS和JS的壓縮，會(huì)在同個(gè)目錄下自動(dòng)生成*.min.*格式的文件。

4.css3代碼自動(dòng)補(bǔ)全插件：auto prefix

使用CanIUse上的css3數(shù)據(jù)，自動(dòng)補(bǔ)全css3前綴和瀏覽器兼容，不過可能有些新了。有一些舊版本的瀏覽器會(huì)被拋棄掉。

5.代碼折疊插件：brackets-code-folding

安裝URL：https://github.com/thehogfather/brackets-code-folding

默認(rèn)不支持代碼的可折疊功能。通過此擴(kuò)展的安裝，對(duì)代碼添加可折疊功能。

6.當(dāng)關(guān)閉編輯器時(shí)自動(dòng)保存所有打開未保存的文件：Autosave Files on Window Blur

類似Sublime Text2、phpstorm / webstorm的風(fēng)格，之前提到的不足全部解決了。

7.Brackets主題：theme

安裝URL：https://github.com/MiguelCastillo/Brackets-Themes

該擴(kuò)展為一個(gè)用于使用基于CodeMirror的主題集的擴(kuò)展。安裝該擴(kuò)展后應(yīng)用程序菜單中出現(xiàn)“Themes”菜單，開發(fā)者可以為應(yīng)用程序界面從中選用一個(gè)主題。

其他的等待發(fā)現(xiàn)中，如果你發(fā)現(xiàn)有優(yōu)秀的插件，不妨給我推薦一下。

原創(chuàng)文章，請(qǐng)勿轉(zhuǎn)載
喜歡這篇文章的朋友，歡迎關(guān)注、收藏、轉(zhuǎn)發(fā)、評(píng)論，幫我上熱門，你的支持，是我每日更新的動(dòng)力！
喜歡前端的朋友可以點(diǎn)擊關(guān)注一下，每日分享精彩的前端文章！

在線咨詢

上一篇：一個(gè)開源的HTML5流媒體播放器
下一篇：30分鐘輕松制作HTML5交互動(dòng)畫（視頻連載）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商