衡水精品网站建设报价,怎么做没有后台程序的网站,两学一做网站登录,一个具体网站的seo优化方案《Word一键转存历险记#xff1a;一个穷学生的CMS升级之路》
寻找解决方案的奇幻旅程
第一天#xff1a;初探Word粘贴黑科技
作为一名福建某高校的计科大三狗#xff08;啊不是#xff0c;学生#xff09;#xff0c;我正在给我的CMS新闻管理系统做升级。需求很简单一个穷学生的CMS升级之路》寻找解决方案的奇幻旅程第一天初探Word粘贴黑科技作为一名福建某高校的计科大三狗啊不是学生我正在给我的CMS新闻管理系统做升级。需求很简单才怪让用户能从Word一键粘贴内容还能自动上传图片到我的阿里云OSS同时保留所有花里胡哨的格式开始在网上疯狂搜索“Word粘贴保留格式”、“KindEditor图片自动上传”…“免费”是我的关键词毕竟预算只有99元连顿像样的火锅都吃不起。发现1CKEditor有Paste from Word插件但要付费钱包在哭泣发现2TinyMCE貌似支持但集成到KindEditor要魔改我太难了发现3国内某个叫WangEditor的文档全是中文感动但功能有限柳暗花明又一村在GitHub上挖到宝藏了一个叫mammoth.js的开库可以把Word转HTML还能处理图片// 前端示例代码 - 使用mammoth.js处理Word文档importmammothfrommammoth;functionhandleWordFile(file){constreadernewFileReader();reader.onloadfunction(event){constarrayBufferevent.target.result;mammoth.extractRawText({arrayBuffer:arrayBuffer}).then(function(result){// 获取纯文本lettextresult.value;// 处理图片letimagesresult.messages.filter(mm.typeimage).map(imguploadImageToOSS(img));// 自定义上传函数}).catch(function(error){console.error(error);});};reader.readAsArrayBuffer(file);}后端PHP处理大冒险既然前端能解析Word了后端要负责把图片传到OSS// PHP后端处理图片上传到阿里云OSSuseOSS\OssClient;useOSS\Core\OssException;functionuploadToOSS($imageData,$fileName){$accessKeyId您的AccessKeyId;$accessKeySecret您的AccessKeySecret;$endpoint您的Endpoint;$bucket您的Bucket;try{$ossClientnewOssClient($accessKeyId,$accessKeySecret,$endpoint);$result$ossClient-putObject($bucket,news/.$fileName,$imageData);return$result[info][url];}catch(OssException$e){error_log(OSS上传失败: .$e-getMessage());returnfalse;}}KindEditor魔改计划KindEditor默认不支持这么高级的功能得给它动手术// 在KindEditor初始化时添加自定义按钮KindEditor.plugin(wordpaste,function(K){vareditorthis;editor.clickToolbar(wordpaste,function(){// 创建隐藏的file inputvarinputdocument.createElement(input);input.typefile;input.accept.doc,.docx;input.onchangefunction(e){handleWordFile(e.target.files[0],function(html){editor.insertHtml(html);});};input.click();});});踩坑记录与突破Word公式处理MathType公式简直是大BOSS最终用html-to-docx库把公式转成图片解决样式保留发现直接粘贴会丢失样式改用mammoth.js的convertToHtml方法并自定义样式映射跨平台兼容在Linux服务器上GD库没安装导致图片处理失败熬夜到凌晨3点才解决成果展示经过两周的奋战和无数杯速溶咖啡我的CMS现在可以✅ Word一键粘贴保留格式✅ 图片自动上传到OSS✅ 支持表格、公式等复杂内容✅ 跨平台兼容性良好全部花费0元感谢开源社区省下的99元可以吃顿好的了致同行的小伙伴如果你也在做类似的功能欢迎加入我们的接单交流群QQ群223813913。我们可以分享开发经验接外包项目吐槽坑爹的需求互相安利好用的工具库最后送上学长的忠告遇到技术难题不要慌先喝杯奶茶压压惊然后去GitHub、StackOverflow上找找答案总比问题多上传工具栏插件文件夹上传插件文件夹控件初始化在head中引入组件文件注意不要重复引入jquery如果您的页面已经引入了jquery这里就不要再引入jquery 1.4了。WordPaster For KindEditor-4.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();});}});});注意1.如果接口字段名称不是file请配置FileFieldName。点击查看教程2.如果接口返回JSON请配置ImageMatch点击查看教程3.如果接口返回的图片地址没有域名请配置ImageUrl点击查看教程整合效果效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片示例下载下载完整示例