由于業務需要，做一個運用在移動端的富文本編輯器，找了多個富文本組件，最后選擇了tinymce
官網
中文文檔，網友翻譯

此篇文章的代碼用的html文件編寫，如果有vue或其他框架需要可以自行百度

創建一個標簽用于掛載富文本

script中創建富文本

此時頁面就會出現一個富文本

相關屬性設置：

需要取消上下相關欄目（menubar、statusbar），只需要在init里面設置

還有一些其他的屬性如下圖：
mobile：設置mobile端的相關屬性
icons_url：自定義icons的js路徑
icons：自定義icons的名稱
language：設置語言翻譯，zh_CN可以在官網或者中文網漢化下載
content_style：設置相關富文本的css
plugins：引用官網的話：plugins配置參數用于指定哪些插件被用在當前編輯器實例中。TinyMCE自帶豐富的插件，您也可以編寫自己的插件，用此選項引入。比如這里的hr（官方）defendImage（自定義）
toolbar：重定義工具欄，這里設置默認的工具欄會被覆蓋
toolbar_mode: 設置工具欄的布局，默認wrap, mode相關文檔
toolbar_location: 工具欄的位置，有bottom、top、auto三個屬性，默認auto

toolbar_groups：把菜單折疊起來，如下圖效果，其中折疊實現需要結合toolbar_mode: 'floating'來使用，移動端的話還需要mobile: { toolbar_mode: 'floating' }方能生效

自定義菜單組件：

defendAt：自定義組件的名字（此處只是我自定義的名字）
icon：此處放svg圖標，可以用官方的，也可以自定義，自定義的如下圖，注冊完成之后，在頁面直接引用相關js
tooltip：pc端鼠標聚焦tooltip說明
onAction：這個因業務未涉及暫無研究，可以直接在官網搜索
箭頭函數里面的就是相關點擊觸發之后的處理，即此處的tinyMCE.editors['mytextarea'].insertContent('@')

總結

以上是生活随笔為你收集整理的tinymce富文本编辑器的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。