項目中原本使用的富文本編輯器是 wangEditor，這是一個很輕量、簡潔編輯器
但是公司的業務升級，想要一個功能更全面的編輯器，我找了好久，目前常見的編輯器有這些：
UEditor：百度前端的開源項目，功能強大，基於 jQuery，但已經沒有再維護，而且限定了后端代碼，修改起來比較費勁
bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery...
kindEditor：功能強大，代碼簡潔，需要配置后台，而且好久沒見更新了
wangEditor：輕量、簡潔、易用，但是升級到 3.x 之后，不便於定制化開發。不過作者很勤奮，廣義上和我是一家人，打個call
quill：本身功能不多，不過可以自行擴展，api 也很好懂，如果能看懂英文的話...
summernote：沒深入研究，UI挺漂亮，也是一款小而美的編輯器，可是我需要大的
在有這么參考的情況下，我最終還是選擇了 tinymce 這個不搭梯子連官網都打不開的編輯器（簡直是自討苦吃），主要因為兩點：
1. GitHub 上星星很多，功能也齊全；
2. 唯一一個從 word 粘貼過來還能保持絕大部分格式的編輯器；
3. 不需要找后端人員掃碼改接口，前后端分離；
4. 說好的兩點呢！
注意：這篇博客僅適用於 Tinymce 4.x
一、資源下載
tinymce 官方為 vue 項目提供了一個組件 tinymce-vue
npm install @tinymce/tinymce-vue -S
在 vscode、webstorm 的終端運行這段代碼可能會報錯，最好使用操作系統自帶的命令行工具
如果有購買 tinymce 的服務，可以參考 tinymce-vue 的說明，通過 api-key 直接使用 tinymce
像我這樣沒購買的，還是要老老實實下載 tinymce
npm install tinymce -S
安裝之后，在 node_modules 中找到 tinymce/skins 目錄，然后將 skins 目錄拷貝到 static 目錄下
// 如果是使用 vue-cli 3.x 構建的 typescript 項目，就放到 public 目錄下，文中所有 static 目錄相關都這樣處理
tinymce 默認是英文界面，所以還需要下載一個中文語言包（記得搭梯子！搭梯子！搭梯子！）
然后將這個語言包放到 static 目錄下，為了結構清晰，我包了一層 tinymce 目錄
二、初始化
在頁面中引入以下文件
import tinymce from 'tinymce/tinymce' import 'tinymce/themes/modern/theme' import Editor from '@tinymce/tinymce-vue'
經評論區提醒，如果找不到 import 'tinymce/themes/modern/theme'
可以替換成 import 'tinymce/themes/silver/theme'
tinymce-vue 是一個組件，需要在 components 中注冊，然后直接使用
<Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor>
這里的 init 是 tinymce 初始化配置項，后面會講到一些關鍵的 api，完整 api 可以參考官方文檔
編輯器需要一個 skin 才能正常工作，所以要設置一個 skin_url 指向之前復制出來的 skin 文件
editorInit: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300 }
// vue-cli 3.x 創建的 typescript 項目，將 url 中的 static 去掉，即 skin_url: '/tinymce/skins/lightgray'
同時在 mounted 中也需要初始化一次：
如果在這里傳入上面的 init 對象，並不能生效，但什么參數都不傳也會報錯，所以這里傳入一個空對象
有朋友反映這里有可能出現以下報錯
這是因為 init 參數地址錯誤，請核對下 init 參數中的幾個路徑是否正確
如果參數無誤，可以先刪除 language_url 和 language 再試
三、擴展插件
完成了上面的初始化之后，就已經能正常運行編輯器了，但只有一些基本功能
tinymce 通過添加插件 plugins 的方式來添加功能
比如要添加一個上傳圖片的功能，就需要用到 image 插件，添加超鏈接需要用到 link 插件
同時還需要在頁面引入這些插件：
添加了插件之后，默認會在工具欄 toolbar 上添加對應的功能按鈕，toolbar 也可以自定義
貼一下完整的組件代碼：
<template>
<div class='tinymce'>
<h1>tinymce</h1>
<editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
<div v-html='tinymceHtml'></div>
</div>
</template>
<script> import tinymce from 'tinymce/tinymce' import 'tinymce/themes/modern/theme' import Editor from '@tinymce/tinymce-vue' import 'tinymce/plugins/image' import 'tinymce/plugins/link' import 'tinymce/plugins/code' import 'tinymce/plugins/table' import 'tinymce/plugins/lists' import 'tinymce/plugins/contextmenu' import 'tinymce/plugins/wordcount' import 'tinymce/plugins/colorpicker' import 'tinymce/plugins/textcolor' export default { name: 'tinymce', data () { return { tinymceHtml: '請輸入內容', init: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300, plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu', toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat', branding: false } } }, mounted () { tinymce.init({}) }, components: {Editor} } </script>
四、上傳圖片
tinymce 提供了 images_upload_url 等 api 讓用戶配置上傳圖片的相關參數
但為了在不麻煩后端的前提下適配自家的項目，還是得用 images_upload_handler 來自定義一個上傳方法
這個方法會提供三個參數：blobInfo, success, failure
其中 blobinfo 是一個對象，包含上傳文件的信息：
success 和 failure 是函數，上傳成功的時候向 success 傳入一個圖片地址，失敗的時候向 failure 傳入報錯信息
貼一下我自己的上傳方法，使用了 axios 發送請求
handleImgUpload (blobInfo, success, failure) { let formdata = new FormData() formdata.set('upload_file', blobInfo.blob()) axios.post('/api/upload', formdata).then(res => { success(res.data.data.src) }).catch(res => { failure('error') }) }