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

作為一個技術人員，手上備上兩款富文本編輯器還是很有用的，指不定那個項目就要集成一個進去。

到時候現找現用那可就費功夫了，畢竟從開發上講，每個富文本編輯器的用法都是有區別的。

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

1、wangEditor

網址：http://www.wangeditor.com/

基于JavaScript和css開發的 Web富文本編輯器， 輕量、簡潔、界面美觀、易用、開源免費。

兼容性

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

2、TinyMCE

網址：https://www.tiny.cloud/docs/demo/full-featured/

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

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

3、百度ueditor

網址：https://github.com/fex-team/ueditor

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

4、kindeditor

網址：http://kindeditor.net/demo.php

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

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

主要特點

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

開源：開放源代碼，高水平，高品質

底層：內置自定義 DOM 類庫，精確操作 DOM

擴展：基于插件的設計，所有功能都是插件，可根據需求增減功能

風格：修改編輯器風格非常容易，只需修改一個 CSS 文件

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

5、Textbox

網址：https://www.textbox.io/

Textbox是一款極簡但功能強大的在線文本編輯器，支持桌面設備和移動設備。主要功能包含內置的圖像處理和存儲、文件拖放、拼寫檢查和自動更正。

此外，該工具還實現了屏幕閱讀器等輔助技術，并符合WAI-ARIA可訪問性標準。

6、CKEditor

網址：https://ckeditor.com/ckeditor-5/demo/

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

7、quill

網址：https://quilljs.com/

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

開源免費，項目活躍，一直有人維護。

8、simditor

網址：https://simditor.tower.im/

simditor是Tower平臺使用的富文本編輯器，是一款輕量化的編輯器，界面簡約，功能實用，插件不是很多，功能要求不高的可以使用。

雖然是國內出品，但文檔是英文的。開源免費。

9、summernote

網址：https://summernote.org/

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

summernote開源免費，該項目一直比較活躍，一直都有人在維護。summernote同樣依賴于jquery和bootstrap，使用前先引入這兩項。

10、jodit

網址：https://xdsoft.net/jodit/

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

11、Editor.md

網址：https://pandao.github.io/editor.md/

功能非常豐富的編輯器，左端編輯，右端預覽，非常方便，完全免費。

主要特性

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

12、froala Editor

網址：https://www.froala.com/wysiwyg-editor

界面非常好看，功能非常強大，非常好用（非免費，可破解）

13、eWebEditor

網址：http://www.ewebeditor.net/

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

導入文件接口很多，支持word、excel、pdf、ppt直接導入，目前版本不支持代碼高亮，不適合純技術平臺使用，適合內容編輯人員使用。

eWebEditor有很長的歷史了，是典型的傳統富文本編輯器，不論是界面，還是功能都比較傳統。eWebEditor是收費的，但也有免費的精簡版，精簡版沒有后臺功能。

14、dhtmlxEditor

網址：https://dhtmlx.com/docs/products/dhtmlxRichText/

DHTMLX組件是一整套基于js的UI庫，功能強大，其中包含編輯器dhtmlxEditor。

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

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

dhtmlxEditor分為免費版和收費版，免費版具有絕大多數功能，而且免費版是開源的你可以在代碼級別隨便擴充。

最后

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

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

vue2-editor 一個底層基于 Quill.js 構建的vue2.x版本圖文編輯器組件，star高達2K+。簡單易上手的API及豐富的自定義參數配置。

特性

• 快速且輕量級、易于上手
• 基于vue.js & Quill.js
• 標準化HTML
• 支持自定義配置

安裝

$ npm i vue2-editor -S

引入插件

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

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

基礎版

<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>

多個編輯器并存實例

<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>

兩個常用方法

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

• 獲取光標位置

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

• 在光標處插入字符串或其它數據類型

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

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

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

# 倉庫地址
https://github.com/davidroyer/vue2-editor

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