[排序不分先后，只是標記數量]
1. 如果你想直接引入，完全不定制，扔進項目就直接用
CKEditor
TinyMCE
Froala
Quill
Summernote(框架不太友善)
Trix
2. 想有非常高度的定制
可以看看 Slate.js，它基於 React.js。
用了 Slate.js 的知名產品有 Taskade，Taskade 的編輯器非常漂亮而且格式很多。
如果想開發和 Taskade 一樣的編輯器，我覺得用如上里任何一個現成編輯器都是很難開發出來的（甚至不可能，因為要改動那么多還不如寫個新的方便）就是得用 Slate.js。
而且 Slate.js 的官方 README 開頭就花了不少篇幅來解釋為什么又要開發一個新編輯器，提到了其他編輯器的不足，理由非常充分。
編輯器歷史
一代編輯器
代表：UEditor、KindEditor、KissyEditor...等
二代編輯器
ProseMirror，Quill.js，Draft.js，Slatejs。比如Quill.js定義了一個叫dela的格式，專門描述文檔和變化。
draftjs自定義了schema的方式，不過它的schema結構是扁平化的，這點上slatejs支持的更好，支持嵌套結構。
同時很多編輯器框架放棄了開箱即用，更多提供的是一個樂高積木，而不是已經拼好的玩具車。
三代編輯器
二代編輯器的使用者們發現，國際化和移動端並不能很好的處理。
所以最早的google doc在2010年就把contenteditable也放棄了，完全自己接管了光標。同樣做了這種選擇的還有iCloud Page，有道雲筆記好像也是。這樣子做代價很高，因為接手越多，意味着瀏覽器幫你做的越少。
這一代的我並沒有做深入研究，因為他們並沒有開源。我們其實也還沒有到達這個階段，沒有足夠的人力和精力去踩坑。
1. quill 富文本編輯器（初選，據說華為也在用）
l quill主要是大廠在用（華為，騰訊都在用），使用上和layUI很像，加上同事都有使用layUI的使用經驗所以會很容易上手，頁面很簡約好看之前使用layUI的時候就感覺不像是在DOM對象，而是Delta，跟json數據很像，感覺就像是在配置項目而不是面向過程
- https://quilljs.com/guides/designing-the-delta-format/ 這是quill的delta的教程
- https://quilljs.com/docs/delta/
l blots & Parchment
Quill 里面有個 blots 的概念，想象一下，一段文字是一個段落，屬於塊狀元素，該段落可以包含以下幾種基礎元素：
- 塊狀元素 (Block)，例如標題；塊狀樣式，例如行高，縮進，居中等；
- 純文本內容 (Text)，是個葉子結點；
- 內聯元素 (Inline)，例如等；內聯樣式，例如文字顏色，文字大小等；
- 非文本葉子結點 (Embed)，例如圖片，視頻；
缺點：
1.中文文檔很少，大部分都是英文文檔
2.用到 MutationObserver，這表示對一些老式的瀏覽器會不支持。
3. Quill 的 Range 和 Selection 底層用的原生的 api，我們也知道原生的 Selection／Range 本來就比較坑，不然就不會有人自己實現一套 Selection 和 Range 了。
4. 內容管理平台中基於 Vue.js 開發，富文本編輯器使用的是 Quill。
而 Quill 簡潔易用的優點，如今成了它的缺點 —— 它只保留特定的標簽和樣式，且沒有可供修改的配置。
優點：
- 簡單易上手
- 功能強大
- Quill 對現在很流行的 React、Vue 或者 Angular 都能很好的支持
參考文獻：
http://www.alloyteam.com/2017/09/13191/
description: 長相好看簡約。基於它寫插件也很簡單，api 設計也很簡單，api驅動設計
demo : https://quilljs.com/playground/#class-vs-inline-style
3.tinymce-vue
description : vue 官方package，功能豐富但是都是英文的
demo :https://github.com/tinymce/tinymce-vue
4. medium-editor
descripition: 更符合程序員的風格 ,purejs ,輕量只有28KB,兼容chrome firefox safari IE edge
demo : http://yabwe.github.io/medium-editor/
5. Squire
description: 開源 簡約
demo:https://www.zoho.com/mail/
6.slate.js
優點
1. 插件是一等公民：插件是slatejs里面最重要的概念，以插件方式開放了一系列自定義的口子，甚至內核也是插件實現。插件的執行順序依賴我們傳入的插件列表的數組順序。
2. 仿造dom：slate本身可以理解為一個model，一個仿dom的模型，我們的操作實際在與這個虛擬dom交互，交互完走react的setState渲染流程，設計天然運行效率高
3.使用react渲染：可能現在看來很平常的一點，其實抽象出model與view互通是編輯器開發的一次大進步。同時slatejs沒有自建view層，而是擁抱了react
4.immutable：不可變，實現undo，redo的法門
5.schema以及normalize機制：非常優秀的機制，避免文檔錯亂的重要一環
6.源代碼邊界清晰：slate與slate-react負責的內容拆分清晰，下面會詳細講
7.瀏覽器兼容：slate-react處理了安卓，普通的瀏覽器兼容的坑（重要）
缺點
可高度定制化，但是碰到的問題超出能力范圍
這個框架應該是否定了，隨着深入理解發現，很多博客作者碰到的問題都是內核級別的bug，我根本應付不了。出於考慮，這個框架排在后面
總結
想有非常高度的定制，可以考慮，基於react.js
descripition : 插件化，簡化API接口方面做出了自己的特色
作者描述：Why you choose slate?
Why create Slate? Well... (Beware: this section has a few of my opinions!)
Before creating Slate, I tried a lot of the other rich text libraries out there—Draft.js, Prosemirror, Quill, etc. What I found was that while getting simple examples to work was easy enough, once you started trying to build something like Medium, Dropbox Paper or Google Docs, you ran into deeper issues...
The editor's "schema" was hardcoded and hard to customize. Things like bold and italic were supported out of the box, but what about comments, or embeds, or even more domain-specific needs?
Transforming the documents programmatically was very convoluted. Writing as a user may have worked, but making programmatic changes, which is critical for building advanced behaviors, was needlessly complex.
Serializing to HTML, Markdown, etc. seemed like an afterthought. Simple things like transforming a document to HTML or Markdown involved writing lots of boilerplate code, for what seemed like very common use cases.
Re-inventing the view layer seemed inefficient and limiting. Most editors rolled their own views, instead of using existing technologies like React, so you have to learn a whole new system with new "gotchas".
Collaborative editing wasn't designed for in advance. Often the editor's internal representation of data made it impossible to use to for a realtime, collaborative editing use case without basically rewriting the editor.
The repositories were monolithic, not small and reusable. The code bases for many of the editors often didn't expose the internal tooling that could have been re-used by developers, leading to having to reinvent the wheel.
Building complex, nested documents was impossible. Many editors were designed around simplistic "flat" documents, making things like tables, embeds and captions difficult to reason about and sometimes impossible.
Of course not every editor exhibits all of these issues, but if you've tried using another editor you might have run into similar problems. To get around the limitations of their API's and achieve the user experience you're after, you have to resort to very hacky things. And some experiences are just plain impossible to achieve.
If that sounds familiar, you might like Slate.
Which brings me to how Slate solves all of that...
opinions: 沒找到插入圖片 感覺跟markdown一樣
7. draft.js
descripition : Draft.js除了與React緊密的整合之外，另外一個很大的優勢就是利用contentEditable這個DOM特性解決一眾編輯器小坑的同時，使用immutable的數據結構來代表編輯器的狀態，很好的分離了DOM和state。所以除了Facebook，很多公司也上手了Draft.js，比如知乎。
Draft.js給富文本編輯器提供了一個很簡單明了的解決辦法，就是React -> view，immutable.js -> model，然后Draft.js提供編輯器操作作為controller,開源
8. Kindeditor
KindEditor 是一套開源的在線HTML編輯器，主要用於讓用戶在網站上獲得所見即所得編輯效果，開發人員可以用 KindEditor 把傳統的多行文本輸入框(textarea)替換為可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用
主要特點
快速：體積小，加載速度快
開源：開放源代碼，高水平，高品質
底層：內置自定義 DOM 類庫，精確操作 DOM
擴展：基於插件的設計，所有功能都是插件，可根據需求增減功能
風格：修改編輯器風格非常容易，只需修改一個 CSS 文件
兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera
初始化kindeditor編輯器
<script type="text/javascript"> var editor; KindEditor.ready(function(K) { editor = K.create('textarea[name="content"]', { allowFileManager : true }); }); </script>
提取kindeditor編輯器的內容
9.CKEditor5
好用是好用，但是界面相對優點老。但是也可以寫出好看頁面，插件很多很全。
Descriptiton: 能夠繼承繼承vue,可以直接引入，可以 npm install，開源的，有收費內容
優點：易用性，全球化，可配置性和可定制性
現代化：基於ECS5和ES6編碼，基於AMD和MVC模式，基於NPM分發。
多終端支持：支持桌面，平板，智能手機上的瀏覽器和app.
具有模塊化體系結構的現代JavaScript RTF編輯器。它干凈的用戶界面和功能為創建語義內容提供了理想的所見即所得UX❤️。
- 用MVC架構，自定義數據模型，虛擬DOM編寫在ES6中。
- 響應式圖像和媒體嵌入（視頻，tweet）。
- 自定義輸出格式：HTML和Markdown支持。
- 通過自動格式化和協作來提高生產力。
- 通過設計可擴展和可定制
合作
使用CKEditor 5，每個應用程序都可以成為在線協作軟件。通過更快的查看和即時交付來提高生產力。
- 實時協作編輯文檔。
- 跟蹤變化。
- 評論，討論，帶有化身的用戶面板。
- 文本建議的僅注釋模式。
- 支持所有富文本功能，包括表格或媒體。
圖片上傳
靈活的圖像上傳和文件管理器工具，用於向您的內容添加響應圖像，視頻或PDF文件。
- 一鍵式輕松拖放文件上傳支持。
- 具有精細的用戶權限的一流安全性。
- 文件和文件夾管理：上載，刪除，移動，分類。
- 內置圖像編輯器，可進行圖像裁剪和調整大小或過濾器。
- 多種存儲選項：本地文件服務器，FTP和雲支持。
官網案例
鏈接：https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html
<div name="content" id="editor"> <p></p> </div> <script type="text/javascript" src="../js/ckeditor/ckeditor.js"></script> <script> var data; ClassicEditor.create(document.querySelector('#editor'), { ckfinder: { uploadUrl: '/' } } ).then(editor => { window.editor = editor; data = editor.getData(); console.log(data); } ) .catch(error => { console.log(error); } ); </script>
10.Tinymce
TinyMCE是一款易用、且功能強大的所見即所得的富文本編輯器
TinyMCE的優勢：
- · 開源可商用，基於LGPL2.1
- · 插件豐富，自帶插件基本涵蓋日常所需功能（示例看下面的Demo-2）
- · 接口豐富，可擴展性強，有能力可以無限拓展功能
- · 界面好看，符合現代審美
- · 提供經典、內聯、沉浸無干擾三種模式（詳見“介紹與入門”）
- · 對標准支持優秀（自v5開始）
- · 多語言支持，官網可下載幾十種語言。
- 官網及文檔：www.tiny.cloud（右鍵）
- 官網下載：www.tiny.cloud/get-tiny/self-hosted/（右鍵）
- Github：github.com/tinymce（右鍵）
<html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../js/ckeditor/tinymce.min.js"> </script> <script type="text/javascript"> tinymce.init({ selector: '#myTextarea', width: 600, height: 300, plugins: [ 'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker', 'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking', 'table emoticons template paste help' ], toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' + 'bullist numlist outdent indent | link image | print preview media fullpage | ' + 'forecolor backcolor emoticons | help', menu: { favs: {title: 'My Favorites', items: 'code visualaid | searchreplace | spellchecker | emoticons'} }, menubar: 'favs file edit view insert format tools table help', content_css: 'css/content.css' }); </script> </head> <body> <textarea id="myTextarea"></textarea> </body> </html>