項目中原本使用的富文本編輯器是 wangEditor,這是一個很輕量、簡潔編輯器
但是公司的業務升級,想要一個功能更全面的編輯器,我找了好久,目前常見的編輯器有這些:
UEditor:百度前端的開源項目,功能強大,基于 jQuery,但已經沒有再維護,而且限定了后端代碼,修改起來比較費勁
bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery...
kindEditor:功能強大,代碼簡潔,需要配置后臺,而且好久沒見更新了
wangEditor:輕量、簡潔、易用,但是升級到 3.x 之后,不便于定制化開發。不過作者很勤奮,廣義上和我是一家人,打個call
quill:本身功能不多,不過可以自行擴展,api 也很好懂,如果能看懂英文的話...
summernote:沒深入研究,UI挺漂亮,也是一款小而美的編輯器,可是我需要大的
在有這么參考的情況下,我最終還是選擇了 tinymce 這個不搭梯子連官網都打不開的編輯器(簡直是自討苦吃),主要因為兩點:
1. GitHub 上星星很多,功能也齊全;
2. 唯一一個從 word 粘貼過來還能保持絕大部分格式的編輯器;
3. 不需要找后端人員掃碼改接口,前后端分離;
4. 說好的兩點呢!
一、資源下載
tinymce 官方為 vue 項目提供了一個組件 tinymce-vue
npm install @tinymce/tinymce-vue -S