Vue集成tinymce富文本編輯器並實現本地化指南（2019.11.21最新）

 tinymce是一款綜合口碑特別好、功能異常強大的富文本編輯器，在某些網站，甚至享有“宇宙最強富文本編輯器”的稱號。那麼，在Vue項目中如何集成呢？這並不困難，只需要參照官方教程即可。難點在於如何將默認的英文本地化爲中文。
 本人蔘考了衆多網絡資料進行本地化，竟發現沒有一篇文章能夠完全走通，並且各個教程顯得極其繁瑣。因此重新參考官方教程，反覆實踐，終究得以攻克。最終的方案較爲簡潔，基於官方包較爲可靠。現將配置的細節、一些關鍵的要點分享如下。
 本文使用的版本：tinymce-vue 3.0.1。該包是tinymce官方的開源項目，並在官網文檔中提供了說明，因此完全是值得信賴的。
 與網絡上的衆多教程相比，本文的方案只需要安裝tinymce-vue即可，無需額外安裝tinymce。

一、安裝tinymce-vue

npm install @tinymce/tinymce-vue

二、引入tinymce-vue並註冊爲組件

import Editor from '@tinymce/tinymce-vue';
export default {
  name: 'HelloWorld',
  components: {
    'tinymce-editor': Editor
  },
}

三、使用組件

<tinymce-editor api-key="API_KEY" 
:init="{plugins: 'wordcount'}"></tinymce-editor>

API_KEY是你向tinymce官網註冊賬號得到的，免費即可獲得，若沒有傳入有效的api-key屬性，富文本編輯器也能使用，但會有惱人的提示：

The API key you have entered is invalid. Please review your API key here.

四、下載中文語言包

經過以上三步，已經可以使用了，但菜單是英文的，因此需要本地化爲中文。進入官網下載中文語言包，語言包地址。

五、導入中文語言包

在項目的public目錄下新建tinymce目錄，並將下載好的中文語言包中的zh_CN.js文件拷貝到tinymce目錄中。
這是最爲關鍵的一步，需注意的是：

• 必須在public目錄下創建文件夾來存放語言包。原因是語言包必須能通過絕對路徑訪問，而對於我們的vue項目而言，絕對路徑是public目錄。

現在傳入tinymce編輯器的初始化參數，在其中正確設置語言參數，如下：

    <tinymce-editor api-key="API_KEY" 
    :init="editorConfig"></tinymce-editor>

import Editor from '@tinymce/tinymce-vue';
export default {
  name: 'HelloWorld',
  components: {
    'tinymce-editor': Editor
  },
  data(){
    return {
      editorConfig:{
        language: 'zh_CN',
        language_url: '/tinymce/zh_CN.js'
      }
     }
  }
}

其中language_url必須傳入絕對路徑。

六、繼續漢化

即便我們已經有了中文語言包，由於tinymce的插件衆多，情況千差萬別，難免有漢化不全的情況。這時，我們只需要進入zh_CN.js文件中，添加需要漢化的英文即可，例如：

{ "Insert iframe": "插入iframe" }

• 雖然我們看到原本的語言包中的中文采用的是unicode編碼，但我們並不是只能採用unicode編碼，直接輸入漢字也是可以的。

本文完~。