vue2中富文本插件 tinymce的使用和tinymce的弹窗被el-dialog遮挡的问题

1.安装插件

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

在 node_modules 中找到 tinymce文件夹，然后将tinymce目录拷贝到 static目录下, tinymce 默认是英文界面，所以还需要下载一个中文包，我是放到tinymce/langs中

3.封装组件

<template>

  <div class="tinymce-editor">

    <editor v-model="myValue" :init="init" :api-key="apiKey" />

  </div>

</template>

<script>
  // import { fileUpload } from '@/api/cms'
  import tinymce from 'tinymce/tinymce'
  import Editor from '@tinymce/tinymce-vue'
  // import 'tinymce/themes/modern/theme'
  import 'tinymce/themes/silver/theme'
  mport 'tinymce/icons/default/icons'
  // 用什么插件引入什么插件
  import 'tinymce/plugins/image' // 插入上传图片插件
  import 'tinymce/plugins/media' // 插入视频插件
  import 'tinymce/plugins/table' // 插入表格插件
  import 'tinymce/plugins/link' // 超链接插件
  import 'tinymce/plugins/code' // 代码块插件

  export default {
    components: {
      Editor,
    },
    props: {
      // 传入一个value，使组件支持v-model绑定
      value: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        apiKey: 'jzlds2e6urz6akm9wxp4f70mnwg83d8fovsialqazxowyity',
        // 配置文件服务器的静态访问路径前缀
        // static_web_preurl: 'http://localhost/files/hxzy_img/',
        // 初始化配置
        init: {
          placeholder: '在这里输入文字',
          language_url: process.env.VUE_APP_TINYMCE + '/tinymce/zh-Hans.js',
          // 这个文件会放在下面
          language: 'zh_CN',
          height: 300,
          end_container_on_empty_block: true,
          powerpaste_word_import: 'clean',
          content_css: process.env.VUE_APP_TINYMCE + '/tinymce/skins/content/default/content.css',
          skin_url: process.env.VUE_APP_TINYMCE + '/tinymce/skins/ui/oxide',
          plugins:
            'advlist anchor autolink autosave code codesample colorpicker  contextmenu directionality  fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount',
          toolbar: ['bold italic underline strikethrough bullist numlist link image'],
          branding: false,
          menubar: false,
        },
        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>
<style scoped lang="scss"></style>

4.使用

TinyEditorComponent v-model="taskInfo.description" />

import TinyEditorComponent from '@/components/tinyMCE/tinymceComponent'
export default {
    components: { TinyEditorComponent },
}

5.解决弹框被遮挡问题

<style>
/* 在el-dialog中tinymce z-index 被太小而被遮挡时要加这两句 */
.tox-tinymce-aux{z-index:99999 !important;}
.tinymce.ui.FloatPanel{z-Index: 99;}
</style>