在vue中整合使用tinymce富文本編輯器

參考tinymce文檔：點擊此處跳轉

步驟一：在vue中引入tinymce（點擊跳轉查看資料）

npm install @tinymce/tinymce-vue -S

步驟二：引入tinymce-vue進入到子組件中

import Editor from '@tinymce/tinymce-vue'

步驟三：註冊tinymce-vue進入到組件中

 // 註冊tinymce組件
  components: {
    'editor': Editor
  }

步驟四：渲染template組件

     <editor :init="init"></editor>

步驟五：初始化init tinymce

      init: {
        // 組件
        plugins:
          ' lists image colorpicker textcolor wordcount contextmenu autoresize',
        // 工具欄
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent  | undo redo | link unlink image  | removeformat ',
        branding: false,
        min_height: 300
      }

效果圖：

優化：
怎麼讓組件漢化：
tinymce 漢化包下載：點擊此處
首先發現tinymce-vue需要首費才能加入主體才能漢化，因此不得不用tinymce取代tinymce-vue

步驟一：安裝tinymce

 npm install tinymce -S

檢查是否已經安裝了tinymce

步驟二：在node_modules文件下找到tinymce文檔，複製tinymce放入項目的根目錄下static的文件夾中

步驟三：把zh_CN.js放入根目錄下static文件夾中

步驟四：初始化組件

代碼

<template>
  <div class="tinymce">
    <h1>tinymce Children</h1>
    <editor  id="tinymce" v-model="tinymceHtml" :init="init"></editor>
  </div>
</template>

<script>
// 引入tinymce主件
import tinymce from './../../static/tinymce/tinymce'
// 必須引入主體才能漢化和顯示
import './../../static/tinymce/themes/silver/theme'
// 引入tinymce-vue組件
import Editor from '@tinymce/tinymce-vue'
// 引入圖片上傳組件
import image from './../../static/tinymce/plugins/image'
export default {
  name: 'tinymce',
  data () {
    return {

      tinymceHtml: '',
      init: {
        // 引入漢化組件
        language_url: './../../static/zh_CN.js',
        // 設定語言爲中文
        language: 'zh_CN',
        // 加入主題
        skin_url: './../../static/tinymce/skins/ui/oxide',
        // 註冊功能組件
        plugins:
          ' lists image colorpicker textcolor wordcount contextmenu autoresize',
        // 註冊工具欄
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent  | undo redo | link unlink image  | removeformat '

      }
    }
  },
  mounted () {
    // 頁面加載的時候初始化組件
    tinymce.init({})
  },
  components: { Editor }
}
</script>
<style scoped>
</style>

最後呈現的效果圖：

備註：圖片，js，css等等一些類靜態文件放在static文件下才會有效
（點擊查看補充資料）

源碼地址：https://github.com/gyfgyz/vue-tinymce