基于tinymce-vue封装富文本编辑器

前言：此文是基于TinyMCE v5版本，想深入学习的同学可以先看下官方介绍 tinymce-vue。

安装项目依赖

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

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

tinyMCE.png

在 static 目录下新建 tinymce 文件夹，然后将 skins 目录拷贝到 tinymce 目录下，
tinymce 默认是英文界面，所以还需要下载一个汉化包 zh_CN.js，拷贝到 tinymce 目录下。

skins.png

初始化

• 引用文件

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

• 注册Editor组件

• init数据，plugins和toolbar可根据需求自行引入

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

• mounted调用方法

tinymce.init({})

如果出现此类报错请检查init参数中的几个路径是否正确

errorMessage.png

完整代码

editor.png

去除右下角水印的方法：

到这里富文本编辑器功能已经完成了但还没有结束，但细心的同学会发现上面代码props 属性中的editorData，这不是父传子的属性吗，不错，这个组件其实只是我们封装的一个公共子组件，我们还需要在父组件中调用。

父组件使用富文本组件

• 引用子组件

import editorDetail from './editorDetail'

• 注册子组件并传值

components: {
    editorDetail
  }

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