TinyMCE4支持微信公众号内容转存CMS

项目需求分析与技术方案

作为项目负责人，针对企业网站后台管理系统富文本编辑器升级需求，结合信创国产化、多浏览器兼容、云存储集成等核心要求，现提出以下技术方案：

一、核心功能实现方案

1. Word/公众号内容粘贴功能

• 前端实现（Vue3 + TinyMCE5扩展）：

// tinymce-plugin.jstinymce.PluginManager.add('wordpaste',function(editor){editor.ui.registry.addButton('wordpaste',{text:'Word粘贴',icon:'paste',onAction:function(){// 监听粘贴事件editor.on('paste',function(e){constclipboardData=e.clipboardData||window.clipboardData;if(clipboardData){constitems=clipboardData.items;for(leti=0;i<items.length;i++){if(items[i].type.indexOf('image')!==-1){constblob=items[i].getAsFile();uploadImage(blob).then(url=>{// 替换粘贴内容中的图片引用editor.insertContent(``);});}}// 处理文本内容（保留样式）if(clipboardData.getData('text/html')){processWordHtml(clipboardData.getData('text/html')).then(html=>editor.insertContent(html));}}});}});});asyncfunctionprocessWordHtml(html){// 调用后端清洗服务constresponse=awaitfetch('/api/clean-word-html',{method:'POST',body:html});returnawaitresponse.text();}

2. 文档导入功能（后端JSP实现）：

// DocumentUploadServlet.java@WebServlet("/api/upload/document")@MultipartConfigpublicclassDocumentUploadServletextendsHttpServlet{@InjectprivateCloudStorageServicestorageService;protectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{PartfilePart=req.getPart("file");StringoriginalName=getFilename(filePart);Stringext=originalName.substring(originalName.lastIndexOf(".")+1);// 使用Apache Tika检测MIME类型InputStreamstream=filePart.getInputStream();StringmimeType=newTika().detect(stream,originalName);// 根据文件类型调用不同解析器DocumentParserparser=ParserFactory.getParser(ext);DocumentContentcontent=parser.parse(stream);// 处理文档中的图片ListimageUrls=newArrayList<>();for(FileItemimage:content.getImages()){Stringpath="docs/"+UUID.randomUUID()+"."+getExtension(image.getName());storageService.upload(path,image.getInputStream());imageUrls.add(storageService.generateUrl(path));}// 生成可渲染的HTMLStringhtml=HtmlGenerator.generate(content,imageUrls);resp.setContentType("application/json");resp.getWriter().write(newGson().toJson(Map.of("html",html,"images",imageUrls)));}}

二、信创兼容性保障措施

1. 跨平台构建方案：

• 使用Gradle多平台构建配置：

// build.gradleplugins{id'java'id'org.springframework.boot'version'2.7.0'}bootRun{systemProperties=['os.arch':System.getProperty('os.arch'),'file.encoding':'UTF-8']// 信创环境特定配置if(System.getProperty('os.name').contains('Kylin')){jvmArgs+=['-Djava.awt.headless=true']}}

2. 浏览器兼容处理：

• IE8专项适配（polyfill方案）：

// ie8-polyfills.jsif(!Array.prototype.forEach){Array.prototype.forEach=function(callback){for(vari=0;i<this.length;i++){callback.call(window,this[i],i,this);}};}// 其他必要polyfill...

三、云存储抽象层设计

// CloudStorageService.javapublicinterfaceCloudStorageService{Stringupload(Stringpath,InputStreamdata);StringgenerateUrl(Stringpath);booleandelete(Stringpath);// 工厂方法staticCloudStorageServicegetInstance(Stringprovider){switch(provider.toLowerCase()){case"aliyun":returnnewAliyunOssService();case"huawei":returnnewHuaweiObsService();case"tencent":returnnewTencentCosService();default:thrownewIllegalArgumentException();}}}// 阿里云实现示例publicclassAliyunOssServiceimplementsCloudStorageService{privateOSSossClient;privateStringbucketName;@OverridepublicStringupload(Stringpath,InputStreamdata){PutObjectRequestrequest=newPutObjectRequest(bucketName,path,data);ossClient.putObject(request);return"https://"+bucketName+".oss-cn-beijing.aliyuncs.com/"+path;}}

四、采购与合规方案

1. 授权模式对比：
   | 对比项 | 单项目授权 | 集团买断方案 |
   |--------------|----------------|----------------|
   | 初始成本 | 500万/年 | 98万（一次性） |
   | 部署灵活性 | 低（逐个部署） | 高（统一管理） |
   | 维护成本 | 高（500+实例） | 低（集中维护） |
   | 信创认证 | 需逐个认证 | 统一认证 |
   | 定制开发 | 受限 | 完全自主 |

2. 供应商资质要求清单：

• 提供3个以上党政机关项目合同（扫描件带红章）
• 信创产品互认证证书（统信UOS/麒麟软件）
• 源代码安全审计报告（等保三级标准）
• 国产化环境测试报告（龙芯/飞腾平台）

五、实施路线图

1. 第一阶段（2周）：

   • 完成TinyMCE插件开发
   • 搭建测试环境（CentOS 7 + MySQL 5.7）

2. 第二阶段（4周）：

   • 实现文档解析核心功能
   • 完成阿里云OSS集成

3. 第三阶段（3周）：

   • 全浏览器兼容性测试
   • 信创环境验证（兆芯+麒麟系统）

4. 第四阶段（1周）：

   • 编写开发文档
   • 开展内部培训

六、风险控制措施

1. 技术备选方案：

   • 保留CKEditor作为备用编辑器
   • 准备Aspose.Words商业库作为解析备选

2. 合规保障措施：

   • 委托公安部三所进行代码审计
   • 签订数据安全责任书

3. 供应商管理：

   • 采用3-3-3-1付款方式
   • 约定1年免费维护期

该方案已通过公司技术委员会评审，建议优先选择具有党政军领域实施经验的供应商，重点考察其信创环境适配能力和长期维护支持能力。预计实施周期8周，可满足高安全要求的政务系统集成需求。

复制插件

安装jquery

npm install jquery

在组件中引入

// 引入tinymce-vueimportEditorfrom'@tinymce/tinymce-vue'import{WordPaster}from'../../static/WordPaster/js/w'import{zyOffice}from'../../static/zyOffice/js/o'import{zyCapture}from'../../static/zyCapture/z'

添加工具栏

//添加导入excel工具栏按钮(function(){'use strict';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importExcel()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importWordToImg()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().UploadNetImg()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().ImportPDF()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importPPT()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importWord()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');varico="http://localhost:8080/static/WordPaster/plugin/word.png"functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).PasteManual()}varregister$1=function(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 visualchars'default:'autoresize code autolink autosave image imagetools paste preview table powertables'},

点击查看在线代码

初始化组件

// 初始化WordPaster.getInstance({// 上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203edPostUrl:'http://localhost:8891/upload.aspx',// 为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936ImageUrl:'http://localhost:8891{url}',// 设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:'file',// 提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1ImageMatch:''})

在页面中引入组件

功能演示

编辑器

在编辑器中增加功能按钮

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

一键粘贴Word内容，自动上传Word中的图片，保留文字样式。

Word转图片

一键导入Word文件，并将Word文件转换成图片上传到服务器中。

导入PDF

一键导入PDF文件，并将PDF转换成图片上传到服务器中。

导入PPT

一键导入PPT文件，并将PPT转换成图片上传到服务器中。

上传网络图片

一键自动上传网络图片。

下载示例

点击下载完整示例