CKEditor如何实现Word文档到网页的无格式错乱粘贴？

PHP程序员的Word导入插件探索记各位老铁们好啊我是西安一名苦逼的PHP程序员最近接了个CMS企业官网的活儿客户突然甩给我个需求让我整个人都不好了…客户的小需求客户说“小王啊我们这个新闻发布系统能不能像Word一样好用啊就是那种从Word里复制粘贴过来啥都不变图片自动上传公式都能显示最好还能导入Excel、PPT、PDF…”我内心OS这哪是小需求啊这明明是让我造个Office 365啊预算还只有680块连顿像样的火锅都吃不起我的探索之路第一站开源世界碰壁我先试了各种开源编辑器插件这个不支持公式那个图片上传有问题还有的把样式全丢了最坑的是那些emz、wmz格式的公式图片开源的基本上都不认latex公式不存在的第二站商业插件天价然后我去看了商业插件一个Word导入功能就要好几千全套Office支持上万还要按年付费680预算人家客服直接给我发了个表情…第三站自己动手丰衣足食本来想自己写结果光解析Word格式就够写个毕业论文了图片上传要对接阿里云OSS公式转换要研究MathML算了吧我连女朋友都没有再这么加班怕是要孤独终老了…解决方案超时代插件包终于让我找到了超时代Office导入插件包简直是为我量身定制的为啥选它价格真香680预算搞定虽然只能买基础版但核心功能都有一键集成就像装了个Word插件那么简单公式全支持Latex、MathType通吃还能转MathML图片自动传直接怼到阿里云OSS省心代码示例Vue3 CKEditor// 安装插件npm install superoffice/ckeditor5-office--save// 在main.js中配置importSuperOfficePluginfromsuperoffice/ckeditor5-officeapp.use(CKEditor).use(SuperOfficePlugin,{ossConfig:{bucket:your-bucket,region:oss-cn-xianggang,accessKeyId:你的AK,accessKeySecret:你的SK}})PHP后端处理简单到哭// 处理图片上传到OSSfunctionuploadToOSS($file){$ossClientnew\OSS\OssClient(getenv(OSS_ACCESS_KEY_ID),getenv(OSS_ACCESS_KEY_SECRET),getenv(OSS_ENDPOINT));$objectnews/.uniqid()...pathinfo($file[name],PATHINFO_EXTENSION);$ossClient-uploadFile(getenv(OSS_BUCKET),$object,$file[tmp_name]);returnhttps://.getenv(OSS_BUCKET)...getenv(OSS_ENDPOINT)./.$object;}效果展示客户现在可以直接从Word复制粘贴 → 样式一点不变拖拽Office文档导入 → 自动解析公众号文章抓取 → 一键发布公式显示完美 → 手机电脑都能看最骚的是那些高龄用户现在都会用了客户给我发了个大红花表情包…虽然没加钱QQ群福利时间兄弟们我在搞个PHP技术交流群223813913有啥好活一起接啊群福利新人加群送1-99元红包能不能抢到看手速推荐客户拿20%提成躺着赚钱不是梦外包项目共享有钱大家一起赚技术难题互助拯救秃头程序员算笔账推荐个1万的项目 → 2000提成到手一个月推荐5个 → 月入过万比996香多了吧最后吐槽这个需求真的是各种网站都需要的政府、企业、学校…谁还没个Word文档要发布啊客户最开始还说“这不就是个复制粘贴功能吗应该很简单吧”我简单你来做啊不过现在搞定了客户满意我还能拿这案例去接更多活美滋滋群号再发一遍223813913记得备注PHP大佬啊红包有限先到先得复制插件说明此教程以CKEditor4.x为例使用其他编辑器的查看对应教程。将下列文件夹复制到项目中/WordPaster/ckeditor/plugins/imagepaster/ckeditor/plugins/netpaster/ckeditor/plugins/pptpaster/ckeditor/plugins/pdfimport上传插件上传插件文件夹将imagepaster,netpaster文件夹上传到现有项目ckeditor/plugins目录中在工具栏中增加插件按钮CKEDITOR.replace(editor1,{extraPlugins:zycapture,imagepaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,importword,exportword,importpdf,keystrokes:[[CKEDITOR.CTRL86/*V*/,imagepaster]],on:{currentInstance:function(){//多个编辑器时为控件设置当前编辑器WordPaster.getInstance().SetEditor(CKEDITOR.currentInstance);window.zyCapture.setEditor(this);window.zyOffice.SetEditor(this);}},//https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-allowedContentallowedContent:true//不过滤样式});引用js初始化控件WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:,//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:,Cookie:PHPSESSID});//加载控件配置上传接口WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:,//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:,Cookie:%clientCookie%,event:{dataReady:function(e){//e.word,//e.imgs:tag1,tag2,tag3console.log(e.imgs)}}});//加载控件注意1.如果接口字段名称不是file请配置FileFieldName。ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch用于匹配JSON数据点击查看详细教程配置ImageUrl用于为图片增加域名前缀点击查看详细教程配置Session如果接口有权限验证登陆验证SESSION验证请配置COOKIE。或取消权限验证。参考点击查看详细教程说明1.请先测试您的接口点击查看详细教程功能演示编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例