以前jQuery、PC網頁時代,富文本編輯器一直就是百度Ueditor、KindEditor。現在使用Angular、Vue、React等MVVM架構以及最新的大前端
工程模式下,老的編輯器顯然不更新了,累贅了。當然也有不少技術愛好者進行了老編輯器的打包成新架構可用的依賴。
選擇一個滿足業務需求的富文本編輯器還是難搞的,輕便的有quill之類的,然而有的項目需要豐富一點的富文本操作跟舊的Ueditor相比,差的遠了。
比較适中的方法是選擇Tinymce編輯器,适配PC和移動端響應式頁面,有自定義的上傳接口和回調,可以粘貼剪切闆圖片上傳,可以保存編輯内容(本地記憶)。
不過V5版本的最新版本,集成方式出現了一點點變化。至于Tinymce V5版本怎麼和Vue、Angular集成,網上一大堆方法,自己去看就行了。但npm依賴更新到這兩天的最新版,會出現圖标不顯示,那就在網上教程的基礎上增加一個icons代碼的引入。
Angular很簡單,把npm下載下來的tinymce庫文件夾下icons文件夾複制到工程下目錄,然後在angular.json下配置導出訪問目錄即可,例如下面的操作。
{
"glob": "**/*",
"input": "src/tinymce/icons",
"output": "/tinymce/icons/"
}
Vue版本也很簡單,把tinymce依賴目錄下的icons文件夾單獨複制出來,放到項目public目錄下,然後在Vue的配置對象裡配置icons_url路徑即可。
icons_url: `/tinymce/icons/default/icons.min.js`,
更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!