核心内容摘要
小明看看：一场关于“永久”的奇遇与追寻
Word一键转存CMS升级日记 Day 1需求分析与市场调研作为一个资深的广东计科大三狗今天开始给我的CMS新闻系统升级Word粘贴功能老板说预算99块不能再多笑死比我一周奶茶钱还少但作为未来的全栈工程师这都不是事儿经过一整天疯狂的Google搜索我发现几个可行方案TinyMCE的PowerPaste插件专业版要$199/年打扰了…CKEditorBase64处理免费但公式支持不好自定义解析OSS上传需要自己写解析逻辑头秃警告⚠️国产的WangEditor居然有Word粘贴功能而且免费最终决定用WangEditor 自定义PHP解析方案毕竟穷学生的99块还得留着买服务器续命呢Day 2前端改造实录安装WangEditornpminstallwangeditor --saveVue组件改造importEfromwangeditorexportdefault{data(){return{editor:null}},mounted(){this.editornewE(#editor-box)// 配置图片上传this.editor.config.uploadImgServer/api/uploadImagethis.editor.config.uploadFileNamefile// 开启Word过滤this.editor.config.pasteFilterStylefalsethis.editor.config.pasteIgnoreImgfalsethis.editor.create()// 监听粘贴事件this.editor.txt.eventHooks.pasteEvents.push(function(pasteStr){console.log(捕获Word内容,pasteStr)})}}Word样式保留黑科技 ♂️WangEditor默认会过滤Word样式需要修改源码// 在node_modules/wangeditor/src/config/paste-config.jsconstpasteConfig{// 改为false保留样式filterStyle:false,// 忽略的样式标签空数组表示不忽略ignoreTags:[]}Day 3后端PHP处理图片上传接口 (PHP)// uploadImage.phpheader(Content-Type: application/json);$file$_FILES[file];$ossPathuploads/.date(Ym)./.uniqid()...pathinfo($file[name])[extension];// 阿里云OSS上传require_onceoss-sdk/autoload.php;useOSS\OssClient;$ossClientnewOssClient(yourAccessKeyId,yourAccessKeySecret,yourEndpoint);try{$result$ossClient-uploadFile(yourBucket,$ossPath,$file[tmp_name]);echojson_encode([errno0,data[$result[info][url]]]);}catch(Exception$e){echojson_encode([errno1,message$e-getMessage()]);}Word内容清洗函数functioncleanWordContent($html){//
转换MS Office特有标签$htmlpreg_replace(//,,$html);//
处理公式临时方案$htmlpreg_replace_callback(//,function($matches){$latexhtmlspecialchars_decode($matches[1]);return.latexToMathML($latex).;},$html);//
移除冗余样式$htmlpreg_replace(/style[^]*/,,$html);return$html;}functionlatexToMathML($latex){// 调用KaTeX或MathJax转换// 这里是伪代码实际需要调用相关库return.$latex.;}Day 4公式显示方案多终端公式显示方案在页面底部引入MathJax { loader: {load: [[tex]/html]}, tex: { packages: {[]: [html]}, inlineMath: [[$,$], [\$,\$]], displayMath: [[$$,$$], [\$$,\$$]] }, options: { renderActions: { addMenu: [] } } };CSS适配所有终端.mathml{overflow-x:auto;-webkit-overflow-scrolling:touch;/* 手机端滑动 */}mediascreenand(max-width:768px){.mathml{font-size:
2em!important;/* 手机端放大 */}}踩坑日记 ️Word表格变形发现Word的表格转HTML后会丢失边框解决方案是强制添加CSStable{border-collapse:collapse!important;}td, th{border:1px solid #ddd!important;}公式乱码Word公式粘贴后变成图片而且模糊。
最终采用前端用MathJax实时渲染后端开发Python脚本批量转换用PyLaTeX库Linux服务器字体缺失导致公式显示异常解决方案sudoaptinstall-y fonts-freefont-otf texlive-fonts-recommended成果展示 经过一周爆肝和掉头发终于实现了✅ Word一键粘贴保留样式✅ 自动上传图片到OSS✅ 公式多终端高清显示✅ 支持Win/Mac/Linux总花费$0感谢开源精神省下的99块可以买皮肤了外包接单交流 欢迎各位大佬/萌新加入我们的接单群QQ群223813913技术栈Vue/PHP/Python/Java业务范围CMS开发/小程序/爬虫/AI应用群里定期分享外包项目资源大厂内推机会技术难题互助最近有师兄在鹅厂招实习生哦后续计划 开发Office文件导入解析器实现协同编辑功能接入AI自动摘要生成最后求Star如果这个方案帮到你请给我虚构的GitHub仓库点个⭐️笑上传工具栏插件文件夹上传插件文件夹控件初始化在head中引入组件文件注意不要重复引入jquery如果您的页面已经引入了jquery这里就不要再引入jquery
4了。
WordPaster For KindEditor-
x # 初始化组件 WordPaster.getInstance({ui:{render:wdpst}//目标容器一般为div});设置快捷键将插件添加到工具栏并挂载KindEditor的CtrlV快捷键事件vareditor;KindEditor.ready(function(K){editorK.create(#content1,{items:[wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf,|],afterCreate:function(){WordPaster.getInstance().SetEditor(this);varselfthis;//自定义 Ctrl V 事件。
KindEditor.ctrl(self.edit.doc,V,function(){WordPaster.getInstance().Paste();});}});});注意
如果接口字段名称不是file请配置FileFieldName。
点击查看教程
如果接口返回JSON请配置ImageMatch点击查看教程
如果接口返回的图片地址没有域名请配置ImageUrl点击查看教程整合效果效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。
Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。
导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。
导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。
上传网络图片示例下载下载完整示例