tinymce-vue的使用

描述：tinymce-vue有两种安装方法：
(1)在官网注册，然后获取到api-key以及配置Approved Domains，这种安装插件都是放在云端的，就是在tiny官网服务器上，在国内初始化一般会很慢，所以国内还是不要用了，免得被吐槽太慢了，或者直接是空白；

(2)插件和语音包都是放在本地，这是本文介绍的核心；

1、安装插件

npm install @tinymce/tinymce-vue -S
npm install tinymce -S

2、配置中文包，项目的public文件中新建tinymce文件夹，并放置zh_cn.js 具体下载地址：中文包，并且配置到你的public目录里，具体如下图：

3、配置skins，放置到public文件夹 > tinymce文件夹中 该文件来自如下目录:
node_modules > tinymce > skins

4、新建index.vue子组件目录如下：
src -> components -> defineTinymce -> index.vue

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick" />
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'

// 解决icons.js异常问题
import 'tinymce/icons/default'

// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image' // 插入上传图片插件
import 'tinymce/plugins/media' // 插入视频插件
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/code'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/link'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/textpattern'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/template'
import 'tinymce/plugins/fullscreen'

export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default:
        'code advlist lists image media wordcount link template fullscreen'
    },
    toolbar: {
      type: [String, Array],
      default:
        'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | image | code'
    }
  },
  data () {
    const This = this
    return {
      init: {
        language_url: `/tinymce/zh_CN.js`,
        language: 'zh_CN',
        skin_url: `/tinymce/skins/ui/oxide`,
        content_css: `/tinymce/skins/content/default/content.css`,
        height: 300,
        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 file = blobInfo.blob() || {}
          if (!file || !file.size) return
          const maxSize = 10
          if (file.size > maxSize * 1024 * 1024) {
            this.$Message.warning(`图片最大尺寸是${maxSize}M`)
            return
          }
        },
        file_picker_types: 'file image'
      },
      myValue: this.value
    }
  },
  watch: {
    value (newValue) {
      this.myValue = newValue
    },
    myValue (newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick (e) {
      this.$emit('onClick', e, tinymce)
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear () {
      this.myValue = ''
    }
  }
}
</script>

5、引入组件

import TinymceEditor from '@/components/defineTinymce'

export default {
  name: 'CTerminalAdd',
  components: {
    TinymceEditor
  },
  props: {
    currMuseum: Object
  }
}

<tinymce-editor v-model="remark" />

6、为上传的图片增加属性,在init中配置

        file_picker_types: "file image",
        setup: function (editor) {
          editor.on("NodeChange", function (e) {
            if (e.element.tagName === "IMG") {
              e.element.setAttribute("crossorigin", "anonymous");
            }
          });
        },

参考文章：
1、www.tianbianyu.com/828/
2、juejin.cn/post/684490…