企业官网建设流程全解析

django个人博客网站开发部署源码,网页制作工具中,wordpress的关键词插件,杭州免费建站Word一键转存CMS升级方案 哈喽各位技术同僚们#xff01;我是山东某高校软件工程专业的大三学生#xff0c;最近在折腾我的CMS新闻管理系统升级工作。今天想和大家分享一下我正在做的Word图片一键转存功能开发历程#xff0c;顺便求点技术指导#xff0c;当然也欢迎找我外…Word一键转存CMS升级方案哈喽各位技术同僚们我是山东某高校软件工程专业的大三学生最近在折腾我的CMS新闻管理系统升级工作。今天想和大家分享一下我正在做的Word图片一键转存功能开发历程顺便求点技术指导当然也欢迎找我外包合作(咳咳重点在技术分享啊)。项目需求分析我需要为后台编辑器添加以下炫酷功能Word内容粘贴支持完整保留文档样式(表格/字体/公式等)自动上传图片粘贴后图片自动传到阿里云OSS公式支持Latex转MathML多终端高清显示文件导入支持Word/Excel/PPT/PDF导入并保留样式跨平台Windows/macOS/Linux全支持技术栈选型我的技术家底前端Vue2 CLI(未来升级Vue3)编辑器百度UEditor后端PHP数据库MySQL云存储阿里云OSS开发工具Zend Studio预算99元巨款(能省则省啊同学们)解决方案1. 编辑器插件方案经过我三天三夜的谷歌搜索发现以下可行方案方案AUEditor扩展插件// 前端核心代码示例UE.registerUI(wordpaste,function(editor){varbtnnewUE.ui.Button({name:wordpaste,title:粘贴Word内容,onclick:function(){// 监听粘贴事件editor.addListener(paste,function(type,evt){varclipboardDataevt.clipboardData;varitemsclipboardData.items;// 处理Word内容processWordContent(editor,items);});}});returnbtn;});functionprocessWordContent(editor,items){// 这里处理Word内容解析和图片上传// ...// 自动上传图片到OSSuploadImagesToOSS(items).then(function(imageUrls){// 替换图片链接varcontentreplaceImageUrls(items,imageUrls);// 插入编辑器editor.execCommand(insertHtml,content);});}方案B集成mammoth.js// 使用mammoth.js解析Word文档mammoth.extractRawText({arrayBuffer:arrayBuffer}).then(function(result){varhtmlresult.value;// 获取转换后的HTML// 处理图片上传returnuploadImagesInHtml(html);}).then(function(htmlWithImageUrls){// 插入编辑器editor.execCommand(insertHtml,htmlWithImageUrls);});2. 后端PHP处理代码uploadFile(config(oss.bucket),$filename,$file[tmp_name]);// 返回URLreturn[urlhttps://.config(oss.bucket)...config(oss.endpoint)./.$filename,success1];}catch(OssException$e){return[success0,message$e-getMessage()];}}// 处理Word内容中的图片functionhandleWordPaste($content){// 正则匹配图片preg_match_all(/]src([^])/,$content,$matches);$imageUrls[];foreach($matches[1]as$imageSrc){if(strpos($imageSrc,data:image)0){// 处理base64图片$uploadResultuploadBase64Image($imageSrc);if($uploadResult[success]){$contentstr_replace($imageSrc,$uploadResult[url],$content);}}}return$content;}?公式处理方案对于LaTeX公式转换我推荐使用MathJaxfunction convertLatexToMathML(latex) { // 使用MathJax转换 return MathJax.tex2mml(latex); } // 在编辑器内容变化时重新渲染公式 editor.addListener(contentChange, function() { MathJax.typeset(); });部署建议开发环境先用本地测试没问题再上云服务器配置建议至少2核4G配置OSS配置设置合理的生命周期规则控制成本缓存策略对公式图片使用CDN加速求职彩蛋咳咳顺便打个广告——有师兄师姐在招PHP/Vue开发吗求内推啊(简历可私聊)另外我们有个技术交流群(QQ:223813913)新人加群有红包哦~大家一起来搞事情完整项目结构cms-word-import/ ├── frontend/ # 前端代码 │ ├── src/ │ │ ├── components/ # Vue组件 │ │ ├── plugins/ # UEditor插件 │ │ │ └── word-paste.js # Word粘贴插件 │ │ └── main.js # 主入口 ├── backend/ # 后端代码 │ ├── api/ # API接口 │ │ └── upload.php # 上传接口 │ └── lib/ # 库文件 │ └── oss-sdk/ # 阿里云OSS SDK ├── docs/ # 文档 └── README.md # 项目说明这个方案基本能在99元预算内搞定如果大家有更好的建议欢迎交流(群里等你哦~)复制插件目录引入插件文件UEditor 1.4.3.3示例注意不要重复引入jquery如果您的项目已经引入了jq则不用再引入jq-1.4在工具栏中增加插件按钮//工具栏上的所有的功能按钮和下拉框可以在new编辑器的实例时选择自己需要的重新定义toolbars:[[fullscreen,source,|,zycapture,|,wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf]]初始化控件varposwindow.location.href.lastIndexOf(/);varapi[window.location.href.substr(0,pos1),asp/upload.asp].join();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:});//加载控件注意如果接口字段名称不是file请配置FileFieldName。ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch匹配图片地址如果服务器返回的是JSON则需要通过正则匹配ImageMatch:,点击参考链接配置ImageUrl为图片地址增加域名如果服务器返回的图片地址是相对路径可通过此属性添加自定义域名。ImageUrl:,点击查看详细教程配置SESSION如果接口有权限验证登陆验证SESSION验证请配置COOKIE。或取消权限验证。参考http://www.ncmem.com/doc/view.aspx?id8602DDBF62374D189725BF17367125F3效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片下载示例点击下载完整示例