項(xiàng)目中原本使用的富文本編輯器是 wangEditor，這是一個(gè)很輕量、簡(jiǎn)潔編輯器

但是公司的業(yè)務(wù)升級(jí)，想要一個(gè)功能更全面的編輯器，我找了好久，目前常見(jiàn)的編輯器有這些：

UEditor：百度前端的開(kāi)源項(xiàng)目，功能強(qiáng)大，基于 jQuery，但已經(jīng)沒(méi)有再維護(hù)，而且限定了后端代碼，修改起來(lái)比較費(fèi)勁

bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery...

kindEditor：功能強(qiáng)大，代碼簡(jiǎn)潔，需要配置后臺(tái)，而且好久沒(méi)見(jiàn)更新了

wangEditor：輕量、簡(jiǎn)潔、易用，但是升級(jí)到 3.x 之后，不便于定制化開(kāi)發(fā)。不過(guò)作者很勤奮，廣義上和我是一家人，打個(gè)call

quill：本身功能不多，不過(guò)可以自行擴(kuò)展，api 也很好懂，如果能看懂英文的話...

summernote：沒(méi)深入研究，UI挺漂亮，也是一款小而美的編輯器，可是我需要大的

在有這么參考的情況下，我最終還是選擇了 tinymce 這個(gè)不搭梯子連官網(wǎng)都打不開(kāi)的編輯器（簡(jiǎn)直是自討苦吃），主要因?yàn)閮牲c(diǎn)：

1. GitHub 上星星很多，功能也齊全；

2. 唯一一個(gè)從 word 粘貼過(guò)來(lái)還能保持絕大部分格式的編輯器；

3. 不需要找后端人員掃碼改接口，前后端分離；

4. 說(shuō)好的兩點(diǎn)呢！

一、資源下載

tinymce 官方為 vue 項(xiàng)目提供了一個(gè)組件 tinymce-vue

npm install @tinymce/tinymce-vue -S

在 vscode、webstorm 的終端運(yùn)行這段代碼可能會(huì)報(bào)錯(cuò)，最好使用操作系統(tǒng)自帶的命令行工具

如果有購(gòu)買(mǎi) tinymce 的服務(wù)，可以參考 tinymce-vue 的說(shuō)明，通過(guò) api-key 直接使用 tinymce

像我這樣沒(méi)購(gòu)買(mǎi)的，還是要老老實(shí)實(shí)下載 tinymce

npm install tinymce -S

安裝之后，在 node_modules 中找到 tinymce/skins 目錄，然后將 skins 目錄拷貝到 static 目錄下

// 如果是使用 vue-cli 3.x 構(gòu)建的 typescript 項(xiàng)目，就放到 public 目錄下，文中所有 static 目錄相關(guān)都這樣處理

tinymce 默認(rèn)是英文界面，所以還需要下載一個(gè)中文語(yǔ)言包（記得搭梯子！搭梯子！搭梯子?。?/p>

然后將這個(gè)語(yǔ)言包放到 static 目錄下，為了結(jié)構(gòu)清晰，我包了一層 tinymce 目錄

二、初始化

在頁(yè)面中引入以下文件

import tinymce from 'tinymce/tinymce'import 'tinymce/themes/modern/theme'import Editor from '@tinymce/tinymce-vue'

tinymce-vue 是一個(gè)組件，需要在 components 中注冊(cè)，然后直接使用

這里的 init 是 tinymce 初始化配置項(xiàng)，后面會(huì)講到一些關(guān)鍵的 api，完整 api 可以參考官方文檔

編輯器需要一個(gè) skin 才能正常工作，所以要設(shè)置一個(gè) skin_url 指向之前復(fù)制出來(lái)的 skin 文件

init: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300}

// vue-cli 3.x 創(chuàng)建的 typescript 項(xiàng)目，將 url 中的 static 去掉，即 skin_url: '/tinymce/skins/lightgray'

同時(shí)在 mounted 中也需要初始化一次：

如果在這里傳入上面的 init 對(duì)象，并不能生效，但什么參數(shù)都不傳也會(huì)報(bào)錯(cuò)，所以這里傳入一個(gè)空對(duì)象

三、擴(kuò)展插件

完成了上面的初始化之后，就已經(jīng)能正常運(yùn)行編輯器了，但只有一些基本功能

tinymce 通過(guò)添加插件 plugins 的方式來(lái)添加功能

比如要添加一個(gè)上傳圖片的功能，就需要用到 image 插件，添加超鏈接需要用到 link 插件

同時(shí)還需要在頁(yè)面引入這些插件：

添加了插件之后，默認(rèn)會(huì)在工具欄 toolbar 上添加對(duì)應(yīng)的功能按鈕，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: '請(qǐng)輸入內(nèi)容',   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 讓用戶配置上傳圖片的相關(guān)參數(shù)

但為了在不麻煩后端的前提下適配自家的項(xiàng)目，還是得用 images_upload_handler 來(lái)自定義一個(gè)上傳方法

這個(gè)方法會(huì)提供三個(gè)參數(shù)：blobInfo, success, failure

其中 blobinfo 是一個(gè)對(duì)象，包含上傳文件的信息：

success 和 failure 是函數(shù)，上傳成功的時(shí)候向 success 傳入一個(gè)圖片地址，失敗的時(shí)候向 failure 傳入報(bào)錯(cuò)信息

總結(jié)

以上所述是小編給大家介紹的在 Vue 項(xiàng)目中引入 tinymce 富文本編輯器的完整代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！