vue2 使用 tinymce富文本编辑器

注意：
1、在vue2中使用tinymce有版本限制的，最新版都是支持v3的，官方也说明了；
2、 vue2中不能使用@tinymce/tinymce-vue 为4以上的版本；
3、支持粘贴表格，支持粘贴图片（图片为base64）;

使用步骤：

1、vue项目中安装 tinymce；
npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S

2、将富文本编译器封装成组件；
在src/components目录下新建一个tinymce文件夹（每个文件的代码在文章末尾提供）

3、将组件引入到页面中进行使用；
哪个页面使用富文本编译器 就在哪个页面引入组件；

<tinymce 
  v-model="addContent"
  @input="(info) => tinymceInput(info)"
   id="tinymceId"
></tinymce>

import tinymce from '@/components/tinymce/index.vue' // 注意引入路径
components: {
   
    tinymce },

data () {
   
   
  return {
   
   
    addContent: '',
  }
},
methods: {
   
   
	tinymceInput (info) {
   
   
       console.log(info,'info------------');
     },
},

注意：可能会遇到的问题
import “tinymce/icons/default” 路径找不到需要升级tinymce版本
解决方法：
终端执行：npm i tinymce -S

代码：

index.vue

<template>
  <div class="tinymce-editor">
    <editor
      :id="id"
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick"
    ></editor>
  </div>
</template>

<script>
// 引入组件
import tinymce from 'tinymce'
import editor from '@tinymce/tinymce-vue'

// 引入富文本编辑器主题的js和css
import 'tinymce/skins/content/default/content.css'
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons' // 解决了icons.js 报错问题，不用定制icon可以忽略

// 编辑器扩展插件plugins
import 'tinymce/plugins/paste' // 粘贴插件
import 'tinymce/plugins/image' // 上传图片插件
import 'tinymce/plugins/media'// 插入视频插件