tinymce vue2.0集成 并解决响应式丢失问题 文件引入问题(若依版本)、自定义上传图片、视频、样式被el-dialog遮挡问题

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

• tinymce提供了很多的语言包 语言包地址

下载完后放到静态文件public目录下
    1、在public目录下新建tinymce目录，将上面下载的语言包解压到该目录

    2、在node_modules里面找到tinymce目录,将此目录下skins目录复制到public/tinymce里面

    3、在init配置中增加一下代码

<template>
  <div class="tinymce-box">
    <TinymceVueEdit
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @click="onClick"
    >
    </TinymceVueEdit>
  </div>
</template>

<script>
// 文档 http://tinymce.ax-z.cn/
// 引入组件
import tinymce from 'tinymce/tinymce'; // tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue';
import request from '@/utils/request';
// // 引入富文本编辑器主题的js和css
// import 'tinymce/skins/content/default/content.css';
import 'tinymce/themes/silver/theme.min.js';
// import 'tinymce/icons/default/icons' // 解决了icons.js 报错Unexpected token '<'

// 编辑器插件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/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/help';
import { getToken } from '@/utils/auth';
export default {
    components: {
        TinymceVueEdit: Editor
    },
    name: 'TinyEditor',
    props: {
        // 默认的富文本内容
        value: {
            type: String,
            default: ''
        },
        // 禁用
        disabled: {
            type: Boolean,
            default: false
        },
        plugins: {
            type: [String, Array],
            default: 'link lists image code table wordcount media preview fullscreen'
            // 其他工具： 'help'
        },
        toolbar: {
            type: [String, Array],
            default: 'bold italic underline strikethrough | fontsizeselect | formatselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | undo redo | link unlink code lists table image media | removeformat | fullscreen preview'
        }
    },
    data() {
        let _this = this;
        return {
            uploadUrl: '/file/upload', // 上传的图片服务器地址
            refresh: true,
            init: {
                language_url: `/tinymce/zh_CN.js`,
                language: 'zh-Hans',
                skin_url: `/tinymce/skins/ui/oxide`,
                // skin_url: 'tinymce/skins/ui/oxide-dark', // 暗色系
                content_css: `/tinymce/skins/content/default/content.css`,
                convert_urls: false,
                height: 450,
                // content_css（为编辑区指定css文件）,加上就不显示字数统计了
                // content_css: `${this.baseUrl}tinymce/skins/content/default/content.css`,
                // （指定需加载的插件）
                plugins: this.plugins,
                toolbar: this.toolbar, // （自定义工具栏）

                statusbar: true, // 底部的状态栏
                menubar: 'file edit insert view format table tools help', // （1级菜单）最上方的菜单
                branding: false, // （隐藏右下角技术支持）水印“Powered by TinyMCE”
                // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
                // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
                images_upload_handler: (blobInfo, success, failure) => {
                    // 在这校验上传图片大小
                    this.images_upload(blobInfo, success, failure);
                },
                file_picker_callback: function (callback, value, meta) {
                    if (meta.filetype === 'media') {
                        // 模拟上传本地视频
                        let input = document.createElement('input');
                        input.setAttribute('type', 'file');
                        input.setAttribute('accept', '.mp4');
                        input.onchange = function () {
                            let file = this.files[0];
                            // console.log(file);
                            let fd = new FormData();
                            fd.append('file', file);
                            _this.saveImgOrFile(fd).then((response) => {
                                callback(response.data.url);
                            });
                        };
                        input.click();
                    }
                }
            },
            myValue: ''
        };
    },
    mounted() {
        tinymce.init({});
    },
    methods: {
        // 图片上传，我这里转成了FormData，并且发送post请求给后端上传阿里云返回url，把url给编辑器
        images_upload: function (blobInfo, success, failure) {
            let formData = new FormData();
            formData.append('file', blobInfo.blob(), blobInfo.filename());
            this.saveImgOrFile(formData).then((response) => {
                success(response.data.url);
            });
        },
        saveImgOrFile(params) {
            return request({
                headers: {
                    'Content-Type': 'multipart/form-data',
                    Authorization: 'Bearer ' + getToken()
                },
                url: this.uploadUrl,
                method: 'post',
                data: params
            });
        },
        // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
        // 需要什么事件可以自己增加
        onClick(e) {
            this.$emit('onClick', e, tinymce);
        }
    },
    watch: {
        value: {
          deep: true,
          immediate: true,
          handler(newValue, oldValue) {
              this.$set(this,'myValue',newValue || '');
          }
        },
        myValue(newValue = '') {
            this.$emit('input', newValue || '');
        }
    }
};
</script>

<template>
  <div class="app-container home"> 
     <TinyEditor v-model="content"></TinyEditor>
  </div>
</template> 
<script>
import TinyEditor from '@/components/TinyEditor '
export default {
  name: "Index",
  data() {
    components: {
        TinyEditor 
    },
    return {
      content:"", 
    };
  },
  methods: {
  }
};
</script> 

// tinymce样式--开始
.tox-fullscreen .tox.tox-tinymce.tox-fullscreen {
  z-index: 8000 !important;
}
.tox-tinymce-aux {
  z-index: 8001 !important;
}
// tinymce样式--结束