先安装

// tinymce
npm i tinymce@5.1.0 -S
// 或yarn
yarn add tinymce@5.1.0

// tinymce-vue
npm i tinymce-vue@3.2.8 -S
// 或yarn
yarn add tinymce-vue@3.2.8

要把node_modules中的tinymce目录复制到public中
下载一个kityformula-editor目录存到/public/tinymce/plugins中
注意修改一些目录的路径地址

再封装组件

<template>
  <!-- 富文本 -->
  <div>
    <Editor id="tinymce" v-model="richTextIn" :init="init" />
  </div>
</template>
如果多次使用组件，需要把id改成不同的。

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/skins/ui/oxide/skin.css'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/code'
import 'tinymce/plugins/link'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/textpattern'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/template'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/imagetools'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/print'
import { upoladFile } from '@/api/try'
export default {
  components: { Editor },
  props: {
    richText: {
      type: String,
      default: ''
    },
    // 默认插件
    plugins: {
      type: [String, Array],
      default: 'kityformula-editor preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave autoresize print'
    },
    toolbar: {
      type: [String, Array],
      default:
        'kityformula-editor print code undo redo restoredraft | cut copy paste pastetext image | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent formatpainter | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table media charmap hr pagebreak insertdatetime | fullscreen preview'
    }
  },
  data () {
    return {
      init: {
        language_url: '/tinymce/langs/zh-Hans.js',
        language: 'zh-Hans',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 400,
        min_height: 400,
        max_height: 600,
        toolbar_mode: 'wrap',
        plugins: this.plugins,
        toolbar: this.toolbar,
        content_style: 'p {margin: 5px 0}',
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        font_formats:
          `微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings`,
        branding: false,
        // 自定义上传图片
        images_upload_handler: (blobInfo, success, failure, progress) => {
          console.log('图片文件')
          const sendFile = blobInfo.blob()
          // upoladFile是自己的上传方法
          upoladFile(sendFile).then((res) => {
            if (res) {
              console.log(res)
              this.$notification.success({ message: '上传成功' })
              success(res.data.url)
              return
            }
            failure('上传失败')
          })
            .catch(() => {
              failure('上传出错')
            })
        },
        context: this.value,
        external_plugins: {
          'kityformula-editor': '/tinymce/plugins/kityformula-editor/plugin.min.js'
        }
      }
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods: {
    onClick (e) {
      this.$emit('onClick', e)
    }
  }
}
</script>

<style scoped>
.tox-tinymce-aux {
  z-index: 5000 !important;
}
</style>

Tinymce的菜单在dialog中无法显示，调整/public/tinymce/skins/ui/oxide/skin.min.css中所有z-index的值（统一前面加1000）即可。