vue-cli -- Tinymce富文本編輯器挖坑

官方文檔
參考文獻

一、安裝Tinymce

// 首先安裝tinymce的vue組件，因為沒有注冊服務
npm install @tinymce/tinymce-vue -S

// 接着安裝tinymce
npm install tinymce -S

或者在package.json文件中配置

"@tinymce/tinymce-vue": "^2.0.0",
"tinymce": "^5.0.3",

二、安裝語言包

正常情況下，tinymce是英文的，所以需要下載中文包
中文語言包下載

三、配置文件

將下好的中文包和tinymce中的skins文件一起拷貝復制到public中的tinymce中

四、引入tinymce

在使用頁面引入tinymce

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'

Tips 這是個組件，需要在components中注冊后才能使用

<editor id="tinymce" v-model="tinyValue" :init="init"></editor>

init初始化配置

init: {
    language_url: '/tinymce/langs/zh_CN.js',// 語言包的路徑
    language: 'zh_CN',//語言
    skin_url: '/tinymce/skins/ui/oxide',// skin路徑，注意這個，很多網上教程都是skins/lightgray，但是發現其實並沒有這個玩意兒
    height: 300,//編輯器高度
    branding: false,//是否禁用“Powered by TinyMCE”
    menubar: false,//頂部菜單欄顯示
}

拓展插件
剛創建的編輯器是非常簡陋的，很多功能需要引入插件，並在初始化中配置plugins，並在toolbar上面配置對應按鈕

import 'tinymce/plugins/image'// 插入上傳圖片插件
import 'tinymce/plugins/media'// 插入視頻插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字數統計插件

init: {
    plugins: 'lists image media table wordcount',
    toolbar: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
}

五、初始化tinymce

在mounted鈎子函數里初始化

tinymce.init({})

正常圖片沒有上傳功能，需要在init里面添加上傳圖片方法

init: {
    // 這個是base64方法處理后的
    images_upload_handler: (blobInfo, success, failure) => {
        const img = "data:image/jpeg;base64," + blobInfo.base64();
        success(img);
   }
}

字數統計好像只對中文和標點符號有效果，輸入英文字母好像不管輸入多少都會統計成1個

六、常規編輯器

UEditor
wangEditor
Quill
CKeditor
kingEditor
mediumEditor
trix
bootStrap