最新項目上需要添加一個富文本編輯器，通過各種推薦與比較選擇了TinyMce。我的項目是vue2，通過npm下載了模塊後，找到官方文檔進行閱讀，只有英文文檔，所以在閱讀的時候有些細節方面就很難理解。下面我就記錄一下我在學習中遇到的幾個問題，希望能給更多的朋友提供幫助。
正文
要學習怎麼使用插件，首先肯定是要去官網看文檔:https://www.tiny.cloud/docs。但是有一個小小的挑戰是文檔只有英文版。直接從General Configuration Guide開始，使用插件最主要就是要了解配置嘛。
在瞭解配置之前先需要了解下如何引入插件,如何初始化插件。
- 本人使用NPM下載tinymce，在組件中使用import局部引入tinymce模塊。
- 使用tinymce.init()方法來初始化將tinymce掛載到selector的選擇器上。
import tinymce from "tinymce";
tinymce.init({
selector: 'textarea', // 必填項:選擇器。插件掛載到選擇器對應的dom元素上
plugin: 'a_tinymce_plugin', // 需要使用到的插件
toolbar:'a_tinymce_toolbar', // 富文本的按鈕
images_upload_handler:(blobInfo, success, failure)=>{}, // 圖片上傳回調
setup:(editor)=>{} // 建立實例事件監聽,editor爲tinytmce實例
});
tinymce.activeEditor.getContent(); // 獲取富文本的內容
tinymce.remove(); // 銷燬tinymce實例
-
經驗1：離開插件時需要先銷燬tinymce，從而銷燬tinymce實例對應的dom元素。這樣重新進入富文本對應的路由的時候會重新建立一個tinymce。否則離開富文本對應的路由重新進入，tinymce將會保持離開前理由前的狀態。
-
經驗2: tinymce只對部分插件的功能默認引入可直接使用,所以在使用一些不在tinymce-core裏面的功能，需要在局部使用import關鍵字引入插件。
我在使用的過程，更多的時間是在瞭解配置以及如何解決路由切換時更新tinymce狀態。如果有什麼需要溝通的，或者糾正的歡迎留言。