Vue2中使用tinymce-vue富文本

npm下载,如果是vue3.0版本执行以下代码

npm install tinymce --save
npm install @tinymce/tinymce-vue --save

在tinymce4.0以后不支持vue2.0，所以需要固定版本，或降级版本，否则会报错

TypeError: Object(...) is not a function at 
Module../node_modules/_@tinymce_tinymce-vue@4.0.0@@tinymce/tinymce-vue/lib/es2015/main/ts/components/Editor.js (Editor.js:37)

在vue2.0使用以下npm安装

npm install tinymce@5.1.0 --save
npm install @tinymce/tinymce-vue@3.0.1

安装完成后在node_modules下找到tinymce下的skins和themes文件夹复制粘贴到public下备用;

另外tinymce富文本默认是英文的，所以需要去官网下载对应的语言包,里面包含了大部分国家的语言，下载完成后是一个js文件,把下载的语言包也放到public目录下;下载语言包地址: www.tiny.cloud/get-tiny/la…

接下来封装一个tinymce富文本组件

// 引入tinymce插件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'

// 如果上面引入tinymce/themes/silver/theme报错可以尝试引入下面这两个
import 'tinymce/themes/modern/theme'
import "tinymce/icons/default"; 

完整富文本组件代码

<template>
  <div class="tinymce-editor">
    <Editor v-model="myValue" :init="init" :disabled="disabled" ref="editorRef"
      :key="timestamp" @onClick="onClick">
    </Editor>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import { uploadFiles } from '@/api/common.js'
import 'tinymce/themes/silver/theme'
// 列表插件
import 'tinymce/plugins/lists'
import 'tinymce/plugins/advlist'
// 上传图片插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/imagetools'
// 表格插件
import 'tinymce/plugins/table'
// 自动识别链接插件
import 'tinymce/plugins/autolink'
// 预览插件
import 'tinymce/plugins/preview'
export default {
  name: 'TinymceEditor',
  components: {
    Editor
  },
  props: {
    // 传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    menubar: { // 菜单栏      
      type: String,
      default: 'file edit insert view format table'
    },
    // 相关插件配置
    plugins: {
      type: [String, Array],
      default:
        'lists advlist image imagetools table autolink preview'
    },
    // 工具栏配置
    toolbar: {
      type: [String, Array],
      default:
        'undo redo |  formatselect | fontsizeselect | bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image table preview'
    },
    // 富文本高度
    height: {
      type: Number,
      default: 500
    }
  },
  data () {
    return {
      // 当前时间戳,是为了解决回显问题
      timestamp: 0,
      //初始化配置
      init: {
        language_url: '/tinymce/langs/zh_CN.js', // 根据自己文件的位置，填写正确的路径，注意/可以直接访问到public文件
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide', // 根据自己文件的位置，填写正确的路径。路径不对会报错
        height: this.height,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        menubar: false,
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        // 配置了此方法,即可手动选择图片
        images_upload_handler: (blobInfo, success, failure) => {
          const formData = new FormData()
          formData.append('files', blobInfo.blob());
          uploadFiles(formData)
            .then(res => {
              success(res.url)
            })
            .catch(err => {
              failure(err)
            })
        },
        resize: false,
      },
      myValue: this.value
    }
  },
  methods: {
    // 需要什么事件可以自己增加 可用的事件参照文档=> https://github.com/tinymce/tinymce-vue
    onClick (e) {
      this.$emit('onClick', e, tinymce)
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear () {
      this.myValue = ''
    },

    // 解决切换页签后数据回显问题
    setTinymceContent () {
      setTimeout(() => {
        this.timestamp = new Date().getTime()
      }, 10)
    }
  },
  watch: {
    value: {
      handler (newValue) {
        this.myValue = newValue
      },
      immediate: true
    },
    myValue (newValue) {
      this.$emit('input', newValue)
    }
  }
}
</script>

使用组件

<TinymceEditor v-model="form.noticeContent" ref="tinymceEditorRef"></TinymceEditor>

内容展示

更多插件配置见官方中文文档tinymce.ax-z.cn/plugins/adv…