TinyMCE4支持跨平台ppt图片批量转存

杭州某集团企业项目负责人技术方案（专业版）

一、项目背景与需求分析

作为集团级项目负责人，现需为政府/国企类项目提供企业网站后台管理系统的富文本编辑器增强方案，核心需求如下：

1. 功能需求：

   • 支持Word/Excel/PPT/PDF文档导入（保留样式、公式、表格、形状组）
   • 支持微信公众号内容粘贴（自动下载图片并上传至华为云OBS）
   • 支持Word内容直接粘贴（图片自动上传、样式保留）
   • 兼容GB2312政府公文专用字体（如方正仿宋_GBK）
   • 信创环境全兼容（操作系统/浏览器/CPU架构）

2. 技术约束：

   • 前端框架：Vue2/Vue3/React（需全兼容）
   • 编辑器：TinyMCE 5（需扩展插件）
   • 后端：SpringBoot（需提供Java SDK）
   • 存储：华为云OBS（二进制存储，非BASE64）
   • 授权模式：集团级买断授权（预算88万，不限项目数）

3. 合规要求：

   • 厂商需提供5个以上央企/政府项目合作证明
   • 信创环境兼容认证（麒麟/统信UOS等）
   • 软件著作权、营业执照等资质文件

二、技术方案设计

1. 架构设计

2. 前端实现（Vue2/Vue3/React通用）

TinyMCE插件开发：

// /src/plugins/office-paste/plugin.js(function(){tinymce.PluginManager.add('officepaste',function(editor){// 添加工具栏按钮editor.ui.registry.addButton('officepaste',{text:'导入Office',icon:'paste',onAction:function(){// 触发文件选择对话框constinput=document.createElement('input');input.type='file';input.accept='.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf';input.onchange=async(e)=>{constfile=e.target.files[0];if(!file)return;// 显示加载状态editor.windowManager.alert('正在解析文档...');// 调用后端APIconstformData=newFormData();formData.append('file',file);try{constres=awaitfetch('/api/office/import',{method:'POST',body:formData});constdata=awaitres.json();if(data.success){// 插入解析后的HTMLeditor.insertContent(data.html);// 通知图片上传完成（如有延迟上传的图片）if(data.pendingImages){setTimeout(()=>{editor.windowManager.alert('部分图片正在上传中...');},1000);}}else{editor.windowManager.alert(`解析失败:${data.message}`);}}catch(error){editor.windowManager.alert('请求失败: '+error.message);}};input.click();}});// 监听粘贴事件（处理Word直接粘贴）editor.on('paste',(e)=>{constclipboardData=e.clipboardData||window.clipboardData;if(clipboardData?.files?.length>0){e.preventDefault();constfile=clipboardData.files[0];if(file.name.match(/\.(docx?|xlsx?|pptx?|pdf)$/i)){// 触发文件上传流程（同上）}}});return{getMetadata:()=>({name:'Office Paste Plugin',url:'https://your-company.com/plugins/officepaste'})};});})();

Vue2/Vue3/React集成示例：

// Vue2示例exportdefault{mounted(){tinymce.init({selector:'#editor',plugins:'officepaste',toolbar:'officepaste',external_plugins:{'officepaste':'/src/plugins/office-paste/plugin.js'}});}}

3. 后端实现（SpringBoot）

文档解析服务：

// OfficeImportController.java@RestController@RequestMapping("/api/office")publicclassOfficeImportController{@AutowiredprivateObsStorageServiceobsService;@PostMapping("/import")publicResponseEntityimportDocument(@RequestParam("file")MultipartFilefile){try{// 1. 文件类型判断StringfileType=FileTypeUtil.getType(file.getOriginalFilename());// 2. 文档解析（使用Apache POI/Aspose等库）StringhtmlContent="";switch(fileType){case"docx":htmlContent=WordParser.parse(file.getInputStream());break;case"xlsx":htmlContent=ExcelParser.parse(file.getInputStream());break;case"pdf":htmlContent=PdfParser.parse(file.getInputStream());break;default:thrownewRuntimeException("不支持的文件类型");}// 3. 图片处理（提取并上传至OBS）ListimageUrls=newArrayList<>();Documentdoc=Jsoup.parse(htmlContent);for(Elementimg:doc.select("img")){Stringbase64=img.attr("src").replace("data:image/png;base64,","");if(!base64.isEmpty()){StringobsUrl=obsService.uploadBase64(base64,"images/"+UUID.randomUUID()+".png");img.attr("src",obsUrl);imageUrls.add(obsUrl);}}// 4. 返回结果returnResponseEntity.ok(newImportResult(true,doc.html(),imageUrls.isEmpty()?null:imageUrls));}catch(Exceptione){returnResponseEntity.badRequest().body(newImportResult(false,null,e.getMessage()));}}@Data@AllArgsConstructorstaticclassImportResult{privatebooleansuccess;privateStringhtml;privateStringmessage;}}

华为云OBS集成：

// ObsStorageService.java@ServicepublicclassObsStorageService{@Value("${obs.endpoint}")privateStringendpoint;@Value("${obs.ak}")privateStringaccessKey;@Value("${obs.sk}")privateStringsecretKey;@Value("${obs.bucket}")privateStringbucketName;publicStringuploadBase64(Stringbase64,StringobjectKey){try{// 解码Base64（实际项目应从文件流上传）byte[]bytes=Base64.getDecoder().decode(base64);// 创建OBS客户端ObsClientobsClient=newObsClient(accessKey,secretKey,endpoint);// 上传对象obsClient.putObject(bucketName,objectKey,newByteArrayInputStream(bytes));// 生成访问URL（需配置Bucket为公共读或使用临时密钥）returnString.format("https://%s.%s/%s",bucketName,endpoint,objectKey);}catch(Exceptione){thrownewRuntimeException("OBS上传失败",e);}}}

4. 信创环境兼容方案

1. 浏览器兼容：

   • IE8支持：使用TinyMCE 4.x LTS版本（需额外授权）
   • 现代浏览器：通过polyfill解决ES6兼容问题

2. CPU架构适配：

   arm os.arch aarch64 com.huawei obs-sdk-arm 3.22.11

3. 操作系统适配：

   • 提供麒麟/统信UOS的安装包
   • 包含依赖库（如glibc、libstdc++等）的兼容版本

三、厂商评估要点

1. 核心能力矩阵

2. 风险控制点

1. 法律风险：

   • 要求厂商提供《软件授权承诺书》
   • 明确禁止转售集团定制功能

2. 技术风险：

   • 要求提供信创环境下的完整测试报告
   • 预留3个月免费技术适配期

3. 商务风险：

   • 分阶段付款（30%预付款+60%验收款+10%质保金）
   • 约定年费涨幅上限（不超过CPI指数）

四、项目实施计划

1. POC阶段（2周）：

   • 在华为云ECS部署测试环境
   • 完成Word/Excel/PPT基础功能验证

2. 信创适配（4周）：

   • 在麒麟/统信UOS上完成兼容性测试
   • 优化ARM架构下的性能

3. 集团推广（8周）：

   • 制定标准化集成文档
   • 对各项目组进行培训

五、预算分配

结语：本方案通过标准化插件开发、华为云OBS深度集成、信创环境专项适配，可满足集团级政府项目的严苛要求。建议优先选择具有央企项目经验、提供源码级授权、支持信创全栈的厂商合作，确保长期技术可控性。

复制插件

安装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转换成图片上传到服务器中。

上传网络图片

一键自动上传网络图片。

下载示例

点击下载完整示例