Vue2 使用 Tinymce 富文本编辑器

这里有份大佬汉化的文档tinymce。

在vue2中使用tinymce有版本限制的，最新版都是支持v3的，这里官方也说明了

1、项目里使用的版本号

"@tinymce/tinymce-vue": "^3"
"tinymce": "^5.0.12"

yarn add @tinymce/tinymce-vue@^3 -S
//tinymce官方要申请一个api_key的，虽然免费，但建议自己下一份代码放本地使用。
yarn add tinymce@^5.0.12 -S

1. 汉化包： https://www.tiny.cloud/get-tiny/language-packages/

2. 我是在这里存放的

3. 将node_modules里tinymce包里的skins文件夹也复制到上面文件夹里

2、封装tinymce成公用组件

<template>
  <div class="tinymce-editor">
    <editor
      id="tiny-editor"
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick"
    ></editor>
  </div>
</template>
<script>
// 引入组件
import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'

// 引入富文本编辑器主题的js和css
import 'tinymce/skins/content/default/content.css'
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons' // 解决了icons.js 报错问题，不用定制icon可以忽略

// 编辑器扩展插件plugins
import 'tinymce/plugins/paste' // 粘贴插件
import 'tinymce/plugins/image' // 上传图片插件
// import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/link' // 超链接
import 'tinymce/plugins/code' // 源码
import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/preview' // 预览

export default {
  components: {
    Editor
  },
  props: {
    value: {
      // 默认的富文本内容
      type: String,
      default: ''
    },
    disabled: {
      // 禁用
      type: Boolean,
      default: false
    },
    plugins: { // 需要使用的插件
      type: [String, Array],
      default: 'link paste lists image code table wordcount'
    },
    toolbar: { // 工具栏显示配置
      type: [String, Array],
      default:
        'bold italic underline strikethrough | styleselect fontsizeselect fontselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | cut copy paste | bullist numlist | outdent indent blockquote | undo redo | link unlink code | removeformat'
    }
  },
  watch: {
    value(newValue) {
      this.myValue = newValue
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    }
  },
  data() {
    return {
      init: {
        language_url: '/tinymce/langs/zh_CN.js', // 语言包路径
        language: 'zh_CN', // 语言
        skin_url: '/tinymce/skins/ui/oxide', // 主题路径
        height: '700px',
        width: this.calcWidth(),
        plugins: this.plugins, // 指定需加载的插件
        toolbar: this.toolbar, // 自定义工具栏
        toolbar_mode: 'sliding',
        branding: false, // 技术支持(Powered by Tiny || 由Tiny驱动)
        menubar: true, // 菜单栏
        theme: 'silver', // 默认主题
        zIndex: 1101,
        style_formats: [{ title: '首行缩进', block: 'p', styles: { 'text-indent': '2em' } }],
        style_formats_merge: true,
        content_css: '/tinymce/tinymce.css' // 为编辑区指定css文件,该参数的值是你的css文件路径，可使用绝对路径或相对路径。
      },
      myValue: this.value
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    calcWidth() {
      return document.body.clientWidth / 2 + 'px'
    },
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    },
    clear() {
      this.myValue = ''
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

3、父组件使用

<template>
  <div class="home">
    <editor-vue id="myedit" ref="editor" v-model="msg" @onClick="onClick" />
    <p>右侧预览👉</p>
    <div v-html="msg" class="preview"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import editorVue from '@/components/TinymceVue.vue'

export default {
  name: 'HomeView',
  components: {
    editorVue
  },
  data() {
    return {
      msg: 'Welcome to Use Tinymce Editor'
    }
  },
  methods: {
    // 内容
    getContent() {
      console.log('内容', this.msg)
    },
    // 鼠标单击的事件
    onClick(e, editor) {
      console.log('Element clicked')
      console.log(e)
      console.log(editor)
    },
    // 清空内容
    clear() {
      console.log(this.$refs.editor)
      this.$refs.editor.clear()
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  .preview {
    flex: 1;
    border: 2px solid tomato;
  }
}
</style>

4、到这里基础的富文本组件就可以渲染出来使用了，下面来看看编辑器里常用的配置

1. 关于插件的使用：
   这里都罗列出来插件名称了，按需使用吧，也可以对照node_modules>tinymce>plugins文件夹下的名称
2. 内容区样式定制：
   比如，首行缩进2字符
   插入的图片设置大小，方便在移动端展示。

到这里就结束了，中文文档都有了，要啥找啥吧。有啥不足可以帮我斧正，一起进步啊。