安装依赖

复制
npm i tinymce @packy-tang/vue-tinymce

全局引入

将 node_modules 下的 tinymce目录复制到 public 中；

在 public 下的 index.html 中引入 tinymce.min.js 文件。

复制
<script src="./tinymce/tinymce.min.js"></script>

在 main.js 全局注册组件

复制
import VueTinymce from '@packy-tang/vue-tinymce'
 
Vue.use(VueTinymce)

自定义富文本编辑器组件

复制
<template> 
  <div> 
    <vue-tinymce 
      ref="tiny" 
      :content="content"
      @change="getContent" 
      :setting="setting" 
      :setup="setup"
    ></vue-tinymce> 
    <material ref="files" @select="setSelectFiles" /> 
  </div>
</template>
<script>
import material from '@/views/Material' //素材库
export default {
  props: ['content'], // 父件传来回显富文本数据 
  components: {
    material
  },
  data () {
    return {
      setting: {
        max_height: 500,
        height: 500,
        statusbar: false, // 隐藏最下方的技术支持栏 
        language_url: '/tinymce/langs/zh_CN.js', // 中文语言包 
        language: 'zh_CN',
        fontsize_formats: '12px 14px 16px 18px 20px 24px 36px 48px',
        plugins: '', // 其他插件需要在这里注册才能在toolbar中使用 
        toolbar: 'material'
      }
    }
  },
  methods: {
    setup (editor) {
      // 富文本自定义按钮 material 
      const _this = this
      editor.ui.registry.addButton('material', {
        // text: '素材库', 
        icon: 'material',
        tooltip: '素材库',
        onAction: function () {
          // 自定义按钮回调
          _this.$refs.files.theMaterial()
        }
      })
      // 自定义按钮图标
      editor.ui.registry.addIcon(
        'material',
        '<svg></svg>' //svg图标
      )
    },
    getContent (text) {
      // 给父组件传回富文本的内容 
      this.$emit('text', text)
    },
    setSelectFiles (files) {
      // 选中的文件回调 
      // 这里是我自己的素材库回调，如果需要自定义插入内容的可以调用 
      // this.$refs.tiny.editor.insertContent() 
      // insertContent() 方法是富文本编辑器内置的API，具体有哪些API可以查找下方的官方文档 
      const str = '<img style="max-width:100%;" src="" />' 
      this.$refs.tiny.editor.insertContent(str)
    }
  }
}
</script>

使用3中的组件，建议全局祖册该组件

vue-tinymce参考

TinyMCE中文文档