基于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组件

<editor id='tinymce' v-model='editorData.detail' :init='init'></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

完整代码

<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>

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

父组件使用富文本组件

• 引用子组件

import editorDetail from './editorDetail'

• 注册子组件并传值

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

components: {
    editorDetail
  }

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