vue项目中更换tinymce版本踩坑

项目需求：

vue项目中实现多图片批量上传功能

问题：

tinymce富文本编辑器的多图片批量上传插件 支持版本：5.0.4+
项目中现有的富文本编辑器版本：4.9.4
为实现这一功能选择更换tinymce版本 于是开启踩坑之旅。。

实现：

1.替换项目中tinymce文件 本项目放在\static\plugins文件夹

将tinymce.4.9.4更换成从官网上 http://download.tiny.cloud/tinymce/community/tinymce_5.7.0.zip
下载下来解压过的文件

并将语言包下载解压放到tinymce文件中 langs文件夹的zh_CN.js文件

2.更换路径

index.html文件内部的引入路径

<script src="./static/plugins/tinymce.4.9.4/tinymce.min.js"></script>
<script src="./static/plugins/tinymce.4.9.4/zh_CN.js"></script>

更换成自己替换后的文件：

<script src="./static/plugins/tinymce/tinymce.min.js"></script>
<script src="./static/plugins/tinymce/langs/zh_CN.js"></script>

static\config中init.js文件内部

'https://cdn.bootcss.com/tinymce/4.9.4/tinymce.min.js',
window.SITE_CONFIG.cdnUrl + '/static/plugins/tinymce.4.9.4/zh_CN.js',

同样作替换（用外部链接之后页面出现加载太慢问题，这里作下调整）：

window.SITE_CONFIG.cdnUrl + '/static/plugins/tinymce/tinymce.min.js',
window.SITE_CONFIG.cdnUrl + '/static/plugins/tinymce/langs/zh_CN.js',

根据自己修改后的路径进行正确替换即可 如果此时页面上没有富文本编辑器可能不是你路径问题

3.富文本编辑器不出现原因

排查之后是theme: 'modern', 这个主题问题
改成TinyMCE随附的默认主题silver theme: 'silver', 之后 成功显示在页面 可参考文档做主题替换

4.工具栏内容不出现

通过查看文档http://tinymce.ax-z.cn/general/basic-setup.php 在toolbar逐步添加自己需要的工具
通过参照文档在plugins添加需要的插件

此时可以参考文档加入多图片批量上传插件

tinymce文档代码：

tinymce.init({
   
    selector: '#tinydemo',
    plugins: "code image axupimgs",
    toolbar: "code axupimgs",
    images_upload_base_path: '/demo',
    images_upload_handler: function (blobInfo, succFun, failFun) {
   
        var xhr, formData;
        var file = blobInfo.blob();//转化为易于理解的file对象
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '/demo/upimg2.php');
        xhr.onload = function() {
   
            var json;
            if (xhr.status != 200) {
   
                failFun('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.location != 'string') {
   
                failFun('Invalid JSON: ' + xhr.responseText);