Vue項目中引入 tinymce 富文本編輯器（僅適用於 Tinymce 4.x）

註明：是教程僅適用於 Tinymce 4.x，版本5.x以上不支持

優點：

1. 唯一一個從 word 粘貼過來還能保持絕大部分格式的編輯器；

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

缺點：

1.圖片上傳只能上傳url,需要自己改裝本地上傳圖片；

一、資源下載

npm install @tinymce/tinymce-vue -S

npm install [email protected] -S

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

// 如果是使用 vue-cli 3.x 構建的 typescript 項目，就放到 public 目錄下，文中所有 static 目錄相關都這樣處理

tinymce 默認是英文界面，所以還需要下載一箇中文語言包

然後將這個語言包放到 static 目錄下，爲了結構清晰，我包了一層 tinymce 目錄

 二、初始化

在components文件夾裏新建一個EditorTinymce.vue組件,引入以下文件

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' 

代碼見下：

<template>
  <div>
    <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 'tinymce/themes/silver/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: 'EditorTinymce',
  components: {
    Editor
  },
  data () {
    return {
      tinymceHtml: '',
      init: {
        // language_url: '/static/tinymce/zh_CN.js',   // vue-cli 2.x 使用這個
        language_url: '/tinymce/zh_CN.js',   // vue-cli 3.x 創建的 typescript 項目，將 url 中的 static 去掉，即 skin_url: '/tinymce/skins/lightgray'
        language: 'zh_CN',
        // skin_url: '/static/tinymce/skins/lightgray',   // vue-cli 2.x 使用這個
        skin_url: '/tinymce/skins/lightgray',  // vue-cli 3.x 創建的 typescript 項目，將 url 中的 static 去掉，即 skin_url: '/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 () {
    // 在 mounted 中也需要初始化一次
    tinymce.init({})
  },
}
</script>

 三、擴展插件

完成了上面的初始化之後，就已經能正常運行編輯器了，但只有一些基本功能

tinymce 通過添加插件 plugins 的方式來添加功能

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

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'

添加了插件之後，默認會在工具欄 toolbar 上添加對應的功能按鈕，toolbar 也可以自定義

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',

四、效果圖