首页 > 其他分享 >TinyMCE富文本编辑器导入word文件内容,使word文件上的的图文内容能正常显示图片

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

时间:2023-09-17 15:22:22浏览次数:42  
标签:文件 文本编辑 word 插件 e5% TinyMCE importword 导入

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

欢迎入群一起讨论

 

 

标签:文件,文本编辑,word,插件,e5%,TinyMCE,importword,导入
From: https://www.cnblogs.com/songsu/p/17708828.html

相关文章

  • IDEA用git管理文件后各颜色含义
    红色:表示没有add;绿色:表示没有commit;  习惯:  合并之前先CodeReview:https://zhuanlan.zhihu.com/p/73809355 参考文章【1】https://blog.csdn.net/lidazhou/article/details/84291641【2】GitHub中CodeReview:https://www.cnblogs.com/daniel-hutao/p/code_review.......
  • vue2 使用tinymce编辑器实现上传图片及粘贴word文本保留格式并粘贴图片自动上传
    下载对应的版本 npminstall@tinymce/[email protected]@5.8.2-S然后在node_modules中找到tinymce把整个文件复制下来粘到public中 在组件页面使用根据自己需求进行注释或添加功能<template><divclass="tinymce-editor"><Editor:......
  • python实现从网站下载文件, 带进度信息
    我实现了一个函数,代码如下:defdownload_file_from_url(url,save_path='',callback:callable=None):'''下载文件,并保存到save_path指定的位置url:形如'http://www.tdx.com.cn/products/data/data/vipdoc/shlday.zip'或者'http......
  • 写一个cmd脚本,列出指定目录下的所有子目录和文件,限制层数
    在Windows的CMDshell中,tree命令并不直接支持指定层数。@echooffsetlocalset"root=%~1"set"maxdepth=%~2"set"curdepth=0"set"indent=":looppushd"%root%"for/d%%Din(*)do(echo%indent%+--%%Dif%......
  • Win32编程之文件设备(九)
    一、文件的创建CreateFile是一个WindowsAPI函数,用于创建或打开文件、设备、目录或管道。它是Windows操作系统中文件和I/O操作的基础之一。CreateFile允许你指定文件的访问方式、共享模式、创建选项等,并返回一个文件句柄,通过该句柄可以执行读取、写入、关闭等操作。以下......
  • FastAPI学习-17.其它响应html,文件,视频或其它
    前言通过我们返回JSON类型的接口会比较多,除了返回JSON格式,还可以响应其它格式的内容JSONResponseContent-Type 会被设置成 application/jsonHTMLResponseContent-Type 会被设置成 text/htmlPlainTextResponse Content-Type 会被设置成text/plainORJSONResp......
  • tinymce实现从word直接粘贴并自动上传图片
    背景介绍:tinymce是一款优秀的富文本编辑器。powerpaste是其一款收费插件,能实现word内容无缝粘贴入网页的tinymce中,可保留word的格式以及自动将word中的图片上传至服务器端。使用说明:我默认你们都能在官网下载到tinymce,鉴于部分同学是通过npm安装的,要注意了:npm安装的不行!!!!不能用......
  • windows11右键集成新建markdown文件
    右键集成新建markdown文档在桌面新建文本文档输入以下内容WindowsRegistryEditorVersion5.00[HKEY_CLASSES_ROOT.md]@="Typora.exe"[HKEY_CLASSES_ROOT.md\ShellNew]"NullFile"=""[HKEY_CLASSES_ROOT\Typora.exe]@="Markdown"把后缀名改为.reg点击执行......
  • k8s之认证文件失效,导致kubelet无法正常启动
     报错:failedtorunKubelet:unabletoloadbootstrapkubeconfig:stat/etc/kubernetes/bootstrap-kubelet.conf:nosuchfileordirectory解决:#备份并重新生成证书cd/etc/kubernetes/pki/mkdirbackupmvapiserver.crtapiserver-etcd-client.keyapiserver-kub......
  • 不小心把pom.xml文件变成了Ant类型,然后全面爆红问题的解决
    问题描述不小心按到了这里:导入依赖的文件这里就全面爆红了!!本来都要配置完成了,出现这个误操作,真的很崩心态!问题解决这么操作:文件目录-->Views-->ToolWindows-->Ant;就能够打开Ant的相关界面;然后右键选中想要操作的文件,选择Remove,就能解决啦!......