广东网站设计品牌设计初学者学做网站用什么软件

广东网站设计品牌设计,初学者学做网站用什么软件,免费编程网课,怎样把已经有的网站做推广企业网站后台Word/公众号内容导入功能集成项目记录 1. 项目需求分析 作为广西某集团公司的项目负责人#xff0c;我们近期需要为企业网站后台管理系统的文章发布模块增加以下功能#xff1a; 核心需求#xff1a; Word粘贴功能#xff1a;支持从Word复制内容粘贴到编辑…企业网站后台Word/公众号内容导入功能集成项目记录1. 项目需求分析作为广西某集团公司的项目负责人我们近期需要为企业网站后台管理系统的文章发布模块增加以下功能核心需求Word粘贴功能支持从Word复制内容粘贴到编辑器自动上传图片到存储服务器Word文档导入功能支持批量导入Word/Excel/PPT/PDF文档微信公众号内容粘贴自动下载公众号文章图片并上传保留原始样式表格、形状、公式、字体(GB2312)、字号、颜色等技术栈要求前端Vue2 CLI TinyMCE后端SpringBoot数据库MySQL服务器华为云ECS OBS开发工具IntelliJ IDEA特殊要求信创国产化兼容多种OSCPU组合浏览器兼容包含IE8在内的主流浏览器预算58万以内买断授权避免后期涨价风险2. 市场调研与产品评估2.1 候选方案调研经过市场调研我筛选出以下几个可能的解决方案TinyMCE官方PowerPaste插件优点原生支持TinyMCE集成简单缺点不支持公众号内容导入部分信创环境兼容性存疑KindEditor商业版优点国产产品信创兼容性好缺点不支持公式和复杂形状更新维护频率低WangEditor企业版优点轻量级国产化支持好缺点功能相对简单不支持Word/Excel/PPT/PDF/微信公众号导入UEditor百度编辑器优点功能全面国产化支持缺点维护停滞IE8兼容性问题自定义开发方案优点完全定制化缺点开发周期长成本高2.2 产品功能对比表功能特性TinyMCE PowerPasteKindEditor商业版WangEditor企业版UEditor自定义开发WordPaster源码版Word粘贴✔️✔️✔️✔️✔️✔️文件导入✔️(仅Word)✔️❌✔️✔️Word,Excel,PPT,PDF公众号粘贴❌❌❌✔️✔️✔️公式支持✔️❌❌❌✔️Latex,MathType信创兼容部分✔️✔️✔️✔️✔️IE8兼容✔️✔️❌✔️✔️✔️买断授权❌✔️✔️✔️不适用✔️预算内✔️✔️✔️✔️❌✔️2.3 最终选择基于WordPaster的源码版方案决策理由原生支持TinyMCE集成风险最小核心Word处理功能成熟稳定可扩展性强便于增加公众号功能技术团队对TinyMCE熟悉维护成本低通过二次开发可满足信创要求商务谈判结果采购WordPaster源码授权PowerPaste插件委托原厂开发公众号功能模块总费用55万元(授权买断定制开发)包含3年技术支持和版本更新3. 技术实现方案3.1 系统架构设计[前端] Vue2 CLI → TinyMCE编辑器 → 自定义插件(Word/公众号处理) ↓ [后端API] SpringBoot → 文件处理服务 → 华为云OBS存储 ↑ [数据库] MySQL(存储元数据)3.2 关键技术点实现3.2.1 前端实现(Vue2TinyMCE)main.js 集成代码importtinymcefromtinymce/tinymceimporttinymce/themes/silverimporttinymce/plugins/powerpasteimporttinymce/plugins/wechatpaste// 自定义公众号插件Vue.prototype.$tinymcetinymceconstinitTinyMCE{language:zh_CN,plugins:powerpaste wechatpaste image table code,toolbar:paste wechatpaste | image table,powerpaste_word_import:clean,powerpaste_html_import:clean,powerpaste_allow_local_images:true,paste_data_images:true,images_upload_handler:function(blobInfo,success,failure){// 调用后端图片上传接口uploadImage(blobInfo.blob()).then(url{success(url)}).catch(err{failure(上传失败: err)})}}3.2.2 后端实现(SpringBoot)图片上传ControllerRestControllerRequestMapping(/api/upload)publicclassUploadController{AutowiredprivateHuaweiObsServiceobsService;PostMapping(/image)publicResponseEntityuploadImage(RequestParam(file)MultipartFilefile){try{// 生成唯一文件名StringfilenameUUID.randomUUID()getFileExtension(file.getOriginalFilename());// 上传到华为云OBSStringurlobsService.uploadFile(images/filename,file.getInputStream());// 返回JSON结果returnResponseEntity.ok(Collections.singletonMap(url,url));}catch(Exceptione){returnResponseEntity.status(500).body(上传失败: e.getMessage());}}privateStringgetFileExtension(Stringfilename){returnfilename.substring(filename.lastIndexOf(.));}}3.2.3 华为云OBS服务封装ServicepublicclassHuaweiObsServiceImplimplementsHuaweiObsService{Value(${huawei.obs.endpoint})privateStringendpoint;Value(${huawei.obs.bucket})privateStringbucketName;privateObsClientobsClient;PostConstructpublicvoidinit(){// 使用华为云永久AK/SK初始化obsClientnewObsClient(your-access-key,your-secret-key,endpoint);}OverridepublicStringuploadFile(StringobjectKey,InputStreaminputStream)throwsException{PutObjectRequestrequestnewPutObjectRequest(bucketName,objectKey,inputStream);obsClient.putObject(request);returnString.format(https://%s.%s/%s,bucketName,endpoint,objectKey);}PreDestroypublicvoiddestroy(){if(obsClient!null){try{obsClient.close();}catch(Exceptione){// 记录日志}}}}3.3 信创兼容性处理针对信创环境的特殊处理字体兼容性方案/* 全局CSS设置GB2312字体回退 */body{font-family:SimSun,STSong,NSimSun,FangSong,KaiTi,sans-serif;}浏览器polyfill处理// 在入口文件添加IE8兼容代码if(window.attachEvent!window.addEventListener){// 加载es5-shim等polyfillimport(es5-shim).then((){import(console-polyfill)import(eventlistener-polyfill)})}国产CPU适配在Docker构建时针对不同CPU架构使用多阶段构建# 多架构Dockerfile示例 FROM --platform$TARGETPLATFORM openjdk:8-jdk-alpine COPY target/*.jar app.jar ENTRYPOINT [java,-jar,/app.jar]4. 项目进度与实施4.1 项目实施里程碑第1周完成产品选型与商务谈判第2周环境准备与架构设计评审第3-4周核心功能开发与集成测试第5周信创环境适配测试第6周用户验收测试与上线准备4.2 测试策略浏览器兼容性测试矩阵IE8/IE11/Edge/Chrome/Firefox/QQ浏览器国产浏览器360安全/急速模式、UC、搜狗信创OS测试清单中标麒麟NeoKylin V7银河麒麟Kylin V10统信UOS 20深度Deepin 205. 项目风险管理信创环境兼容风险应对提前与厂商沟通获取测试设备备选方案针对不兼容环境提供简化版UIIE8性能问题应对代码拆分懒加载监控实施后密切监控CPU/内存使用图片上传稳定性应对实现断点续传和分片上传重试机制3次自动重试人工干预提醒6. 项目成果6.1 功能达成情况需求项实现状态备注Word粘贴✔️支持到Office 2019格式文件导入✔️支持Word/Excel/PPT/PDF公众号内容粘贴✔️支持常见公众号排版样式保留✔️表格/公式/字体等信创兼容✔️测试通过麒麟/UOS等IE8兼容✔️性能优化后达标6.2 性能指标图片上传平均耗时1.5s(2MB以内图片)Word文档导入(20页)3s内存占用50MB(IE8下)7. 后续优化建议长期维护计划建立插件自动更新机制每季度一次信创环境复测功能扩展路线图WPS文档专项优化党政机关公文格式自动校验多级审核工作流集成技术升级准备Vue3迁移预案对象存储多云适配层本项目在预算内按时完成各项指标达到或超过预期特别是在信创兼容性方面表现优异为后续政府项目投标提供了有力的技术支撑。通过买断授权方式集团后续项目无需重复采购累计可节省约200万元授权费用。复制插件安装jquerynpm install jquery在组件中引入// 引入tinymce-vueimportEditorfromtinymce/tinymce-vueimport{WordPaster}from../../static/WordPaster/js/wimport{zyOffice}from../../static/zyOffice/js/oimport{zyCapture}from../../static/zyCapture/z添加工具栏//添加导入excel工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importExcel()}varregister$1function(editor){editor.ui.registry.addButton(excelimport,{text:,tooltip:导入Excel文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(excelimport,{text:,tooltip:导入Excel文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(excelimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加word转图片工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importWordToImg()}varregister$1function(editor){editor.ui.registry.addButton(importwordtoimg,{text:,tooltip:Word转图片,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(importwordtoimg,{text:,tooltip:Word转图片,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(importwordtoimg,function(editor){Buttons.register(editor);});}Plugin();}());//添加粘贴网络图片工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().UploadNetImg()}varregister$1function(editor){editor.ui.registry.addButton(netpaster,{text:,tooltip:网络图片一键上传,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(netpaster,{text:,tooltip:网络图片一键上传,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(netpaster,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入PDF按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().ImportPDF()}varregister$1function(editor){editor.ui.registry.addButton(pdfimport,{text:,tooltip:导入pdf文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pdfimport,{text:,tooltip:导入pdf文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pdfimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入PPT按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importPPT()}varregister$1function(editor){editor.ui.registry.addButton(pptimport,{text:,tooltip:导入PowerPoint文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pptimport,{text:,tooltip:导入PowerPoint文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pptimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入WORD按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importWord()}varregister$1function(editor){editor.ui.registry.addButton(wordimport,{text:,tooltip:导入Word文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordimport,{text:,tooltip:导入Word文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加WORD粘贴按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);varicohttp://localhost:8080/static/WordPaster/plugin/word.pngfunctionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).PasteManual()}varregister$1function(editor){editor.ui.registry.addButton(wordpaster,{text:,tooltip:Word一键粘贴,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordpaster,{text:,tooltip:Word一键粘贴,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordpaster,function(editor){Buttons.register(editor);});}Plugin();}());在线代码添加插件// 插件plugins:{type:[String,Array],// default: advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualcharsdefault:autoresize code autolink autosave image imagetools paste preview table powertables},点击查看在线代码初始化组件// 初始化WordPaster.getInstance({// 上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,// 为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:http://localhost:8891{url},// 设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,// 提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:})在页面中引入组件功能演示编辑器在编辑器中增加功能按钮导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片。下载示例点击下载完整示例