1、装置依赖

npm i tinymce @tinymce/tinymce-vue// "tinymce": "^5.4.1" "@tinymce/tinymce-vue": "^2.0.0"

2、下载中文语言包

3、应用

  1. 在public目录下新建tinymce，将下载的语言包解压到该目录
  2. 在node_modules外面找到tinymce，将skins目录复制到public/tinymce外面
    最终造成：public/tinymce/langs/zh_CN.js public/tinymce/langs/skins

4、封装TinymceEditor组件

门路：src/components/Editor/TinymceEditor.vue

<template>  <div class="tinymce-editor">    <editor      v-model="myValue"      :init="init"      :disabled="disabled"      @onClick="onClick">    </editor>    <button @click="clear">清空内容</button>  </div></template><script>  import tinymce from 'tinymce/tinymce'  import Editor from '@tinymce/tinymce-vue'  import 'tinymce/themes/silver'  import 'tinymce/icons/default'  // 编辑器插件plugins  // 更多插件参考：https://www.tiny.cloud/docs/plugins/  import 'tinymce/plugins/image'// 插入上传图片插件  import 'tinymce/plugins/media'// 插入视频插件  import 'tinymce/plugins/table'// 插入表格插件  import 'tinymce/plugins/lists'// 列表插件  import 'tinymce/plugins/wordcount'// 字数统计插件  import 'tinymce/plugins/fullscreen'// 全屏插件  export default {    name: 'TinymceEditor',    components: {      Editor    },    props: {      value: {        type: String,        default: ''      },      disabled: {        type: Boolean,        default: false      },      plugins: {        type: [String, Array],        default: 'lists image media table wordcount fullscreen'      },      toolbar: {        type: [String, Array],        default: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat | fullscreen'      }    },    data () {      return {        init: {          language_url: '/tinymce/langs/zh_CN.js',          language: 'zh_CN',          skin_url: '/tinymce/skins/ui/oxide',          // skin_url: '/tinymce/skins/ui/oxide-dark',//暗色系          height: 300,          plugins: this.plugins,          toolbar: this.toolbar,          // external_plugins: {          //   'powerpaste': '/tinymce/plugins/powerpaste/plugin.min.js' // words的粘贴插件          // },          branding: false,          menubar: false,          end_container_on_empty_block: true,          powerpaste_word_import: 'merge',          powerpaste_html_import: 'merge',          powerpaste_allow_local_images: true,          paste_data_images: true,          // 此处为图片上传处理函数，这个间接用了base64的图片模式上传图片，          // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler          images_upload_handler: (blobInfo, success, failure) => {            const img = 'data:image/jpeg;base64,' + blobInfo.base64()            success(img)          }        },        myValue: this.value      }    },    mounted () {      tinymce.init({})    },    methods: {      // 增加相干的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events      // 须要什么事件能够本人减少      onClick (e) {        this.$emit('onClick', e, tinymce)      },      // 能够增加一些本人的自定义事件，如清空内容      clear () {        this.myValue = ''      }    },    watch: {      value (newValue) {        this.myValue = newValue      },      myValue (newValue) {        this.$emit('input', newValue)      }    },    beforeDestroy () {      tinymce.remove()    }  }</script>

5、封装后应用

<template>  <div>    <tinymce-editor      v-if="tinymceEditor"      ref="tinymceEditor"      :value="value"      @input="editorChange" />  </div></template><script>import TinymceEditor from '../components/Editor/TinymceEditor'export default {  components: {    TinymceEditor  },  data() {    return {      tinymceEditor: false,      value: ''    }  },  created () {    this.$nextTick(() => {      this.initPage()    })  },  methods: {    editorChange (newValue) {      this.value = newValue    },    // 初始化页面数据    initPage () {      this.tinymceEditor = false      this.$nextTick(() => {        this.tinymceEditor = true      })    }  }}</script><style scoped></style>