news 2026/6/11 23:07:18

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/6/9 22:05:50

儿童绘本故事动画化:HeyGem助力亲子教育内容创作

儿童绘本故事动画化:HeyGem助力亲子教育内容创作 在幼儿园的睡前故事时间,老师用温柔的声音讲述《小熊找朋友》,孩子们睁大眼睛听得入神。可如果这位“老师”是一个会动嘴、有表情的数字人,而同一个故事还能由“穿围裙的女老师”“…

作者头像 李华
网站建设 2026/6/10 13:51:33

小说有声剧升级:HeyGem为角色赋予面部表情与口型

小说有声剧的视觉革命:HeyGem如何让角色“开口说话” 在音频内容泛滥的今天,用户早已不再满足于“只听声音”。无论是网络小说演播、儿童故事讲解,还是知识类短视频,听众越来越期待看到与声音同步的“人物表现”——一个会动嘴唇、…

作者头像 李华
网站建设 2026/6/11 4:12:32

LUT调色包下载后如何应用?HeyGem输出视频后期美化方案

LUT调色包下载后如何应用?HeyGem输出视频后期美化方案 在AI生成内容(AIGC)席卷短视频、在线教育和虚拟主播的今天,数字人技术已不再是实验室里的概念——它正被大量用于企业宣传、课程录制甚至新闻播报。像HeyGem这样的语音驱动数…

作者头像 李华
网站建设 2026/6/10 19:48:48

俄语新闻听力训练:主播数字人播报今日要闻

俄语新闻听力训练:主播数字人播报今日要闻 在语言教学领域,尤其是外语听力训练中,内容的时效性与多样性长期面临挑战。教师们常常陷入两难:想用真实新闻材料提升学生语感,却受限于版权、发音标准和制作成本&#xff1b…

作者头像 李华
网站建设 2026/6/10 21:15:15

驾考宝典内容更新快:HeyGem快速响应政策变化生成新规解读

HeyGem 数字人视频生成系统:如何让驾考新规解读“当日出片” 在知识更新节奏越来越快的今天,用户对信息的“新鲜度”要求前所未有地高。以驾考行业为例,每当交通法规或考试政策调整,成千上万的学员第一时间就会搜索“新规有哪些变…

作者头像 李华
网站建设 2026/6/10 19:51:22

揭秘C#跨平台日志难题:如何在.NET 6+中完美配置Serilog与NLog

第一章:C#跨平台日志配置的挑战与演进在现代软件开发中,C# 应用越来越多地部署于多操作系统环境中,如 Windows、Linux 和 macOS。这种跨平台趋势对日志记录机制提出了更高要求,传统的日志方案难以在不同系统中保持一致行为。平台差…

作者头像 李华