TinyMCE富文本编辑器导入word文件内容，使word文件上的的图文内容能正常显示图片

今天在使用后台管理系统录入富文本数据时，发现从微信等APP上复制过来的图文内容直接粘贴到TinyMCE富文本编辑器上时图片可以正常显示，而从word上复制过来的图文内容，粘贴时只能显示文字，图片内容不能正常显示。

    查找问题后发现从微信上复制过来的是Base64图片，而从word上复制过来的图片则是file:///xxxx.png这种内容，所以word复制的图片应该是没有调用TinyMCE图片上传并返回链接，才没办法正常显示。

    搜了网上的解决方法，大部分都是说通过TinyMCE的粘贴插件paste 或 powerpaste来实现的，自己试了下目前是还没有实现，有实现的大神麻烦留言指导下。转变思路并查了 TinyMCE中文文档中文手册，发现可以用 TinyMCE 的  importword插件  直接导入word文件来解决。

importword 插件的使用：

1、下载 importword 插件，将文件放置在项目的 public 文件内，下载地址：importword 插件下载

2、在TinyMCE初始化配置里配置拓展插件 importword；

3、配置 toolebar 的导入word文件按钮；

4、配置word导入的 预处理函数 importword_handler、过滤函数 importword_filter ，具体配置参数信息可以查看TinyMCE中文手册；（选配）

// TinyMCE 的初始化配置
init: {
    // 初始化的其他配置
    ...
 
    // 导入word按钮
    toolbar： 'importword', 
 
    // 添加扩展配置
    external_plugins: {
        importword: '/importword/plugin.min.js'
    },
 
    // 预处理函数
    importword_handler: function(editor,files,next){
        var file_name = files[0].name
        if(file_name.substr(file_name.lastIndexOf(".")+1)=='docx'){
            editor.notificationManager.open({
                text: '正在转换中...',
                type: 'info',
                closeButton: false,
            });
            next(files);
        }else{
            editor.notificationManager.open({
                text: '目前仅支持docx文件格式，若为doc，请将扩展名改为docx',
                type: 'warning',
            })
        }
    },
    // 过滤函数
    importword_filter: function(result,insert,message){ 
        // 自定义操作部分
        insert(result) //回插函数
    }
}

这样，就可以在TinyMCE编辑器上实现导入word文件内容并正常显示word的图片。

参考文章：http://blog.ncmem.com/wordpress/2023/09/17/tinymce%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8%e5%af%bc%e5%85%a5word%e6%96%87%e4%bb%b6%e5%86%85%e5%ae%b9%ef%bc%8c%e4%bd%bfword%e6%96%87%e4%bb%b6%e4%b8%8a%e7%9a%84%e7%9a%84%e5%9b%be/
欢迎入群一起讨论