目錄

項目使用 vue-cli 3.x 版本，tinymce 5

1、npm install tinymce -S

2、npm install @tinymce/tinymce-vue

3、public 文件夾下新建文件夾 tinymce ，在 node_modules 中找到 tinymce/skins 目錄，然后將 skins 目錄拷貝到 tinymce 目錄下 ，

4、還需要下載一個中文語言包 (https://www.tiny.cloud/get-tiny/language-packages/)，然后將這個語言包放到 tinymce  - lang 目錄下

5、components 中注冊 tinymce-vue 組件　　

<template>
<div>
  <!-- 給editor加key是因為給tinymce keep-alive以后組件切換時tinymce編輯器會顯示異常， 在activated鈎子里改變key的值可以讓編輯器重新創建 -->
  <editor id="tinymceEditor" :init="tinymceInit" v-model="content" :key="tinymceFlag"></editor>
  <Upload multiple ref="imageUpload" action="//jsonplaceholder.typicode.com/posts/" :on-success="insertImage" style="display:none">
  </Upload>
</div>
</template>
<script> import tinymce from 'tinymce/tinymce' import 'tinymce/themes/silver/theme' import Editor from '@tinymce/tinymce-vue' import 'tinymce/plugins/textcolor' import 'tinymce/plugins/advlist' import 'tinymce/plugins/table' import 'tinymce/plugins/lists' import 'tinymce/plugins/paste' import 'tinymce/plugins/preview' import 'tinymce/plugins/fullscreen' export default { name: 'TinymceEditor', components: { 'editor': Editor }, data () { return { tinymceFlag: 1, tinymceInit: {}, content: '本地圖片上傳功能僅為演示，實際使用需要補全圖片存儲地址' } }, methods: { // 插入圖片至編輯器
 insertImage (res, file) { let src = '' // 圖片存儲地址
 tinymce.execCommand('mceInsertContent', false, `<img src=${src}>`) } }, created () { const that = this
    this.tinymceInit = { skin_url: '/tinymce/skins/ui/oxide', language_url: `/tinymce/langs/zh_CN.js`,
 language: 'zh_CN', height: document.body.offsetHeight - 300, browser_spellcheck: true, // 拼寫檢查
 branding: false, // 去水印
      // elementpath: false, //禁用編輯器底部的狀態欄
 statusbar: false, // 隱藏編輯器底部的狀態欄
 paste_data_images: true, // 允許粘貼圖像
 menubar: false, // 隱藏最上方menu
 plugins: 'advlist table lists paste preview fullscreen', toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | imageUpload quicklink h2 h3 blockquote table numlist bullist preview fullscreen', /** * 下面方法是為tinymce添加自定義插入圖片按鈕 * 借助iview的Upload組件,將圖片先上傳到存儲雲上，再將圖片的存儲地址放入編輯器內容 */ setup: (editor) => { editor.ui.registry.addButton('imageUpload', { // text: '插入圖片',
 tooltip: '插入圖片', icon: 'image', onAction: () => { let upload = that.$refs.imageUpload upload.handleClick() } }) } } }, activated () { this.tinymceFlag++ }, mounted () { } } </script>

6、視圖組件中 引入 <tinymce-editor /> 組件

<tinymce-editor /> import TinymceEditor from '../../components/tinymce-editor/tinymce-editor' components: {TinymceEditor},

 

 

 

 

在 Vue 項目中引入 tinymce 富文本編輯器

 

項目中原本使用的富文本編輯器是 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>