0
点赞
收藏
分享

微信扫一扫

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富文本编辑器导入word文件内容,使word文件上的的图/



举报

相关推荐

0 条评论