Word一键转存CMS升级大冒险 开发日志2023年11月15日大家好我是广西某高校软件工程专业的码农小白正在为我的CMS新闻管理系统做一个超酷的升级——让Word内容能一键粘贴并自动上传图片下面记录我的开发历程和踩坑经验。 需求分析我需要实现Word内容粘贴保留所有样式图片自动上传到阿里云OSS支持LaTeX转MathML多终端公式高清显示支持Office全家桶导入预算99元穷学生的倔强 技术选型过程第一步编辑器插件调研CKEditor虽然有Paste from Word插件但功能有限于是我开始全网搜索TinyMCE强大的Word粘贴功能但商业版超预算WangEditor国产优秀但Word支持一般UEditor百度出品已停止维护KindEditor太老旧CKEditor 自定义插件最终选择因为已有基础插件系统完善社区活跃发现宝藏GitHub上找到ckeditor5-paste-from-office开源插件 技术方案前端方案Vue2 CKEditor5 paste-from-office插件自定义图片上传适配器后端方案PHP处理文件上传阿里云OSS SDKMathJax处理公式转换️ 开发实录第一步安装CKEditor5npminstall--save ckeditor/ckeditor5-vue ckeditor/ckeditor5-build-classicnpminstall--save ckeditor/ckeditor5-paste-from-office第二步自定义Vue组件importClassicEditorfromckeditor/ckeditor5-build-classic;importPasteFromOfficefromckeditor/ckeditor5-paste-from-office/src/pastefromoffice;classMyUploadAdapter{constructor(loader){this.loaderloader;}upload(){returnthis.loader.file.then(file{returnnewPromise((resolve,reject){// 这里调用你的PHP上传接口constformDatanewFormData();formData.append(file,file);axios.post(/api/upload,formData).then(response{resolve({default:response.data.url});}).catch(error{reject(上传失败: error);});});});}}exportdefault{data(){return{editor:ClassicEditor,editorData:,editorConfig:{extraPlugins:[PasteFromOffice],pasteFromOffice:{styles:true,formatting:true},image:{toolbar:[imageTextAlternative,|,imageStyle:alignLeft,imageStyle:full,imageStyle:alignRight],styles:[full,alignLeft,alignRight]},math:{engine:mathjax,outputType:script,forceOutputType:false}}}},methods:{onEditorReady(editor){editor.plugins.get(FileRepository).createUploadAdapter(loader){returnnewMyUploadAdapter(loader);};}}}第三步PHP后端处理uploadFile($bucket,$object,$file[tmp_name]);$signedUrl$ossClient-signUrl($bucket,$object,3600);echojson_encode([url$signedUrl,statussuccess]);}catch(OssException$e){echojson_encode([error$e-getMessage(),statuserror]);}} 公式处理方案为了支持LaTeX公式我找到了MathJaxMathJax { tex: { inlineMath: [[$, $], [\$, \$]] }, svg: { fontCache: global } }; 踩坑记录Word表格样式丢失解决添加CSS样式强制继承.ck-content table{border-collapse:collapse;width:100%;}图片上传失败原因阿里云OSS跨域问题解决在OSS控制台设置CORS规则公式显示异常解决使用MathJax渲染后手动触发重新渲染if(window.MathJax){MathJax.typesetPromise();} 插件打包由于项目需要我整理了一个完整的插件包结构word-paste-plugin/ ├── ckeditor.js # 自定义构建的CKEditor ├── paste-from-office/ # 官方插件 ├── image-upload/ # 自定义图片上传适配器 ├── mathml-support/ # 公式支持插件 └── demo/ # 示例代码 99元预算分配CKEditor商业插件授权0元使用开源方案MathJax服务0元使用CDN阿里云OSS已包含在现有服务中咖啡99元开发必备燃料☕ 求同行交流欢迎加入我们的技术交流群QQ群223813913福利新人红包1-99元内容技术讨论、项目合作、工作内推 最终效果现在我的CMS可以完美粘贴Word内容自动上传图片到OSS高清显示公式支持多平台查看整个开发耗时2周喝了7杯咖啡掉了若干头发但成就感爆棚给同行的建议先尝试开源方案仔细阅读文档加入社区讨论做好备份血泪教训希望我的经验对你有帮助如果有问题欢迎加群交流~ 复制插件说明此教程以CKEditor4.x为例使用其他编辑器的查看对应教程。将下列文件夹复制到项目中/WordPaster/ckeditor/plugins/imagepaster/ckeditor/plugins/netpaster/ckeditor/plugins/pptpaster/ckeditor/plugins/pdfimport上传插件上传插件文件夹将imagepaster,netpaster文件夹上传到现有项目ckeditor/plugins目录中在工具栏中增加插件按钮引用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});//加载控件配置上传接口注意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转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例