在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