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

发布时间 2023-09-17 15:23:19作者: Xproer-松鼠

今天在使用后台管理系统录入富文本数据时,发现从微信等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/

欢迎入群一起讨论