在Vue项目中集成TinyMCE富文本编辑器流程步骤

前端  /  管理员 发布于 2年前   1185

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器，下面是TinyMCE的Vue组件集成至你的项目中

安装vue-tinymce组件

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>

vue-tinymce组件手册

https://packy-tang.gitee.io/vue-tinymce/#/?id=vue-tinymce

TinyMCE中文文档

http://tinymce.ax-z.cn/