前言：此文是基于TinyMCE v5版本，想深入學(xué)習(xí)的同學(xué)可以先看下官方介紹 tinymce-vue。

安裝項目依賴

npm install tinymce -S
npm install @tinymce/tinymce-vue -S

安裝完成之后，在 node_modules 中找到 tinymce/skins 目錄。

tinyMCE.png

在 static 目錄下新建 tinymce 文件夾，然后將 skins 目錄拷貝到 tinymce 目錄下，
tinymce 默認(rèn)是英文界面，所以還需要下載一個漢化包 zh_CN.js，拷貝到 tinymce 目錄下。

skins.png

初始化

• 引用文件

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

• 注冊Editor組件

<editor id='tinymce' v-model='editorData.detail' :init='init'></editor>

• init數(shù)據(jù)，plugins和toolbar可根據(jù)需求自行引入

init: {
        height: 500,
        plugins: '',
        toolbar: '',
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/ui/oxide'
      }

• mounted調(diào)用方法

tinymce.init({})

如果出現(xiàn)此類報錯請檢查init參數(shù)中的幾個路徑是否正確

errorMessage.png

完整代碼

<template>
  <div class='tinymce'>
    <editor id='tinymce' v-model='editorData.detail' :init='init'></editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/link'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/image'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/media'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/print'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/help'

export default {
  name: 'tinymce',
  props: [
    'editorData'
  ],
  components: {
    Editor
  },
  data () {
    return {
      init: {
        height: 500,
        plugins: 'link lists image code table wordcount preview media  charmap print anchor searchreplace visualblocks fullscreen insertdatetime help',
        toolbar: 'bold italic underline strikethrough | fontselect | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/ui/oxide'
      }
    }
  },
  mounted () {
    tinymce.init({})
  }
}
</script>

editor.png

去除右下角水印的方法：

<style>
  .tox-statusbar__branding {
    display: none;
  }
</style>

到這里富文本編輯器功能已經(jīng)完成了但還沒有結(jié)束，但細(xì)心的同學(xué)會發(fā)現(xiàn)上面代碼props 屬性中的editorData，這不是父傳子的屬性嗎，不錯，這個組件其實(shí)只是我們封裝的一個公共子組件，我們還需要在父組件中調(diào)用。

父組件使用富文本組件

• 引用子組件

import editorDetail from './editorDetail'

• 注冊子組件并傳值

<editor-detail :editorData="editorData"/>

components: {
    editorDetail
  }

data () {
    return {
      editorData: {
        detail: ''
      }
    }
  }