企业官网建设流程全解析

上海建设工程协会网站,微信网站域名备案成功后怎么做,网站加一个会员登陆怎么做,wordpress安装步骤集团 Word 导入产品探索与开发#xff1a;基于 TinyMCE 的征程 我作为集团内的前端开发工程师#xff0c;深知此次任务责任重大。集团业务广泛#xff0c;旗下多个子公司覆盖教育、政府、银行等多个关键行业。集团提出需求#xff0c;要开发一个 Word 导入产品#xff0c…集团 Word 导入产品探索与开发基于 TinyMCE 的征程我作为集团内的前端开发工程师深知此次任务责任重大。集团业务广泛旗下多个子公司覆盖教育、政府、银行等多个关键行业。集团提出需求要开发一个 Word 导入产品不仅能实现 Word 图片自动导入还要完美保留文档样式并且必须支持信创国产化软硬件环境。同时考虑到后续维护和使用便利性产品需完全开源还要提供 7*24 小时在线技术支持服务。而目前集团项目采用的是 TinyMCE 编辑器这为我们的开发既提供了一定基础也带来了新的挑战。寻觅开源“宝藏”多平台搜索与筛选主流开源平台初探接到任务后我第一时间在 GitHub 和 Gitee 等主流开源平台上展开搜索。以“Word 导入”“图片处理”“信创兼容”“TinyMCE 集成”等关键词组合进行搜索瞬间得到了大量结果。但面对这海量的信息我如同在大海中捞针需要仔细甄别每个项目的可行性和适用性。许多项目虽然能处理 Word 文档但对图片自动导入的支持并不完善。有的需要手动干预图片的插入位置和大小有的则在导入过程中图片会出现丢失或变形的情况。还有一些项目虽然声称支持信创环境但缺乏详细的测试报告和实际案例让人不敢轻易采用。聚焦 TinyMCE 相关生态由于集团项目采用 TinyMCE 编辑器我特别关注与 TinyMCE 集成的 Word 导入插件。在 TinyMCE 官方插件市场和社区论坛中我发现了一些相关的开源项目。其中“TinyMCE - WordImporter”项目引起了我的注意。它专门为 TinyMCE 设计旨在实现 Word 文档的导入功能。项目文档中提到对图片导入有一定的支持并且代码结构相对清晰便于二次开发。然而进一步了解后发现该项目对信创环境的适配并不完善而且在图片自动导入的准确性和样式保留的完整性方面还存在一些问题。另外关于 7*24 小时在线技术支持服务项目官方并没有明确提及这让我有些担忧。发现“潜力股”继续深入搜索我在一个小众的技术博客上看到了关于“Doc2Tiny - OpenSource”项目的介绍。这个项目完全开源基于先进的文档解析技术能够实现 Word 图片的自动导入并且在样式保留方面表现出色。更让我惊喜的是项目团队对信创环境有一定的研究和适配经验虽然目前还不完善但有相关的适配计划和技术方案。我立即下载了项目的源代码在本地环境进行了初步测试。测试结果显示该项目在处理普通 Word 文档时表现良好图片能够准确导入样式也基本保留。但在处理一些复杂的文档格式和特殊图片时还存在一些小问题。不过考虑到项目的开源性和可扩展性我决定将其作为重点考察对象进一步评估和开发。开发之路挑战与突破环境搭建与适配确定了产品方向后我开始搭建开发环境。由于要支持信创国产化软硬件环境我选择了国产的操作系统和数据库。在安装和配置过程中遇到了不少兼容性问题。例如某些开发工具在国产操作系统上无法正常运行需要寻找替代方案或进行二次开发。同时要将“Doc2Tiny - OpenSource”与 TinyMCE 编辑器进行集成也需要对项目代码进行一定的修改和优化。我仔细研究了 TinyMCE 的 API 和插件开发规范按照要求对“Doc2Tiny - OpenSource”的接口进行了调整确保两者能够无缝对接。经过一番努力我成功搭建起了符合要求的开发环境并完成了项目的初步适配。功能优化与完善图片自动导入优化虽然“Doc2Tiny - OpenSource”对图片导入有一定的支持但在实际测试中发现对于一些复杂的图片格式和排版导入效果并不理想。我深入研究 Word 文档的二进制结构结合项目的代码逻辑对图片处理模块进行了优化。通过增加图片格式识别和转换功能能够自动识别 Word 文档中的各种图片格式并将其转换为适合在网页中显示的格式。同时优化了图片在 TinyMCE 编辑器中的定位算法确保图片能够准确插入到原文档对应的位置并且保持合适的大小和比例。样式保留强化为了更好地保留 Word 文档样式我对项目的样式解析和渲染部分进行了细致的调整。与集团内部不同行业的业务人员沟通了解他们对文档样式的具体需求针对性地优化了字体、字号、颜色、段落格式等样式的保留效果。例如对于教育行业的文档重点优化了标题、正文、列表等常见样式的保留对于政府和银行行业的文档则更加注重公章、水印等特殊样式的处理。经过多次测试和迭代最终实现了 Word 文档样式的高度还原。测试与优化确保产品质量在开发过程中测试是至关重要的环节。我制定了详细的测试计划包括功能测试、性能测试、兼容性测试等多个方面。功能测试使用大量不同行业、不同格式的 Word 文档进行导入测试确保产品的各项功能都能正常工作。特别是对图片自动导入和样式保留功能进行了重点测试检查图片是否准确导入、样式是否完整保留。性能测试通过模拟大量并发导入操作评估产品在高压情况下的响应速度和稳定性。对发现的性能瓶颈进行了优化例如采用缓存技术减少重复计算优化代码结构提高执行效率。兼容性测试兼容性测试是本次开发的重点和难点。除了常见的国产操作系统和办公软件还考虑了不同版本的兼容性。我与集团内部的信创团队紧密合作获取了多种信创软硬件环境进行全面测试。针对测试中发现的问题及时调整代码确保产品能在各种信创环境下稳定运行。成果与展望经过几个月的努力我成功完成了 Word 导入产品的开发工作。该产品完全开源基于“Doc2Tiny - OpenSource”进行了深度定制和优化实现了 Word 图片自动导入和样式完美保留的功能并且与 TinyMCE 编辑器无缝集成全面支持信创国产化软硬件环境。虽然项目官方没有提供 7*24 小时在线技术支持服务但我通过建立内部技术支持团队和完善的文档体系为用户提供了及时、高效的技术支持。目前该产品已经在集团内部进行了试点应用得到了业务部门的一致好评。未来我将继续关注信创技术的发展动态及时对产品进行升级和优化确保它能够满足集团不断变化的业务需求。同时我也希望能与更多的开发者交流合作共同推动开源项目的发展为信创产业贡献自己的一份力量。复制插件安装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转换成图片上传到服务器中。上传网络图片一键自动上传网络图片。下载示例点击下载完整示例