news 2026/4/15 19:45:15

xhEditor word粘贴支持表格和列表

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
xhEditor word粘贴支持表格和列表

(扶了扶眼镜,敲着机械键盘开始码字)

各位老铁,作为山西网络安全专业的"码农",今天给大家表演一个"如何在预算99元内实现Word内容一键粘贴"的绝活。首先,咱们得给xhEditor这个老编辑器动个手术,给它装个"任意门"——

前端部分(Vue2版):

// 在main.js全局注册粘贴插件importXhEditorfrom'xheditor'importMathJaxfrom'mathjax'XhEditor.plugins.push({name:'wordPaste',init:function(editor){editor.addButton('wordpaste',{icon:'fa fa-file-word',click:function(){// 弹出文件选择对话框constinput=document.createElement('input')input.type='file'input.accept='.docx,.doc'input.onchange=async(e)=>{constfile=e.target.files[0]constformData=newFormData()formData.append('file',file)// 调用后端API处理Word内容constres=awaitaxios.post('/api/wordparse',formData)// 插入处理后的HTML内容editor.insertHtml(res.data.content)}input.click()}})}})// 粘贴事件监听document.addEventListener('paste',(e)=>{constitems=(e.clipboardData||e.originalEvent.clipboardData).itemsfor(letitemofitems){if(item.type.indexOf('image')===0){constblob=item.getAsFile()constformData=newFormData()formData.append('img',blob)// 上传图片到OSSaxios.post('/api/upload',formData).then(res=>{// 替换为OSS路径consturl=res.data.url document.execCommand('insertImage',false,url)})}}})

后端部分(C#版):

[Route("api/wordparse")]publicclassWordParserController:ApiController{[HttpPost]publicasyncTaskParseWord(){varprovider=newMultipartMemoryStreamProvider();awaitRequest.Content.ReadAsMultipartAsync(provider);foreach(varfileinprovider.Contents){varfilename=file.Headers.ContentDisposition.FileName.Trim('"');varbuffer=awaitfile.ReadAsByteArrayAsync();// 使用OpenXml解析Word文档using(vardoc=DocumentFormat.OpenXml.Packaging.WordprocessingDocument.Open(newMemoryStream(buffer),false)){varparser=newWordContentParser(doc);varhtml=parser.ToHtml();// 自定义解析逻辑// 处理公式转换html=Regex.Replace(html,@"\$\\$(.*?)\$\\$",(match)=>{varlatex=match.Groups[1].Value;return$"{LatexToMathML(latex)}";});returnOk(new{content=html});}}returnBadRequest();}}

(突然拍桌)等等!这公式转换的坑比煤矿还深!推荐个神器——LaTeX2MathML,直接把Latex公式变成MathML,手机端用MathJax渲染,电脑端用Katex,双倍保障!

关于文件导入功能,给大家整了个"四件套"处理方案:

  • Word:用DocumentFormat.OpenXml
  • Excel:EPPlus库(注意商业授权)
  • PPT:OpenXml PowerTools
  • PDF:PdfPig库(开源免费)

(突然神秘兮兮)知道为啥选阿里云OSS不?因为咱们可以白嫖他们的免费额度啊!学生认证送6个月,配合对象存储的防盗链设置,四舍五入省了一个亿!

最后关于那个QQ群…(搓手)其实是我建的接单群,里面藏着各种"白嫖"技巧:

  1. 每天签到领红包,积少成多
  2. 推荐客户拿20%提成,够吃一个月刀削面
  3. 黄金会员直接50%分成,够交半年房租

(突然正经)不过说真的,要找网络安全工作的话,建议多刷刷CTF,内推的话…(掏出手机)加群备注"山西煤老板",我让HR优先看简历!

代码仓库地址:https://github.com/yourname/cms-upgrade
(突然发现预算超了99元)咳咳…这个OSS费用可能需要大家众筹一下…

将插件目录复制到项目中

引入插件文件

定义插件图标

初始化插件

在工具栏中添加插件按钮

效果

编辑器

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

一键粘贴Word内容,自动上传Word中的图片,保留文字样式。

Word转图片

一键导入Word文件,并将Word文件转换成图片上传到服务器中。

导入PDF

一键导入PDF文件,并将PDF转换成图片上传到服务器中。

导入PPT

一键导入PPT文件,并将PPT转换成图片上传到服务器中。

上传网络图片

一键自动上传网络图片,自动下载远程服务器图片,自动上传远程服务器图片

下载示例

点击下载完整示例

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/8 2:05:12

小目标检测在热红外域的挑战 _ - 无可见光条件下基于热特征的显著性建模 _ - - 夜间智能监控系统开发 如何训练无人机视角行人 _ 车辆检测与显著性分割的热红外数据集

面向无人机视角行人 / 车辆检测与显著性分割的热红外数据集 数据由 DJI M600Pro 无人机搭载 FLIR Vue Pro 热像仪在白天与夜间采集,专门解决“无人机视角下缺乏行人和车辆热红外公开数据集”的问题,并提供目标检测和显著性检测所需的像素级标注。 数…

作者头像 李华
网站建设 2026/4/15 11:34:09

爱沙尼亚语数字政府服务:公务员数字人讲解办事流程

爱沙尼亚语数字政府服务:公务员数字人讲解办事流程 在爱沙尼亚,一个不到140万人口的国家,99%的政务服务已实现在线办理。居民可以在几分钟内完成报税、注册公司甚至跨境业务申报——这一切都建立在“电子公民”(e-Residency&#…

作者头像 李华
网站建设 2026/4/15 11:38:14

马耳他语地中海饮食推广:厨师数字人推荐健康食谱

马耳他语地中海饮食推广:厨师数字人推荐健康食谱 —— 基于 HeyGem 数字人视频生成系统的技术实现 在马耳他,一种被联合国教科文组织列为非物质文化遗产的地中海饮食文化正面临传播困境:尽管它以橄榄油、新鲜蔬果和鱼类为核心,被誉…

作者头像 李华
网站建设 2026/4/15 11:34:09

如何用C#实现跨平台请求拦截与调试?90%开发者忽略的关键细节

第一章:C#跨平台请求拦截的现状与挑战在现代软件开发中,C# 作为一门强大的面向对象语言,已通过 .NET Core 和 .NET 5 实现了真正的跨平台能力。随着应用架构向微服务和分布式系统演进,对 HTTP 请求进行拦截、监控和修改的需求日益…

作者头像 李华
网站建设 2026/4/15 11:33:18

客服数字人上线前演练:HeyGem模拟对话场景视频制作

客服数字人上线前演练:HeyGem模拟对话场景视频制作 在企业客服系统加速智能化的今天,一个关键却常被忽视的问题浮出水面:如何在不反复真人出镜的前提下,高效验证数字人的表达自然度?尤其是在准备上线阶段,运…

作者头像 李华
网站建设 2026/4/15 11:33:54

PyCharm激活码永不过期?误传信息澄清及IDE调试HeyGem建议

PyCharm激活码永不过期?误传信息澄清及IDE调试HeyGem建议 在AI内容创作工具快速普及的今天,数字人视频生成系统如HeyGem正被广泛应用于虚拟主播、在线教育和自动化营销场景。这类系统通常基于Python构建,依赖Gradio或Flask提供Web交互界面&a…

作者头像 李华