信创兼容型富文本编辑器集成方案
一、需求分析
核心功能需求
- Word粘贴/导入：保留格式、表格、公式、图片自动上传
- 微信公众号内容抓取：自动下载图片并上传至华为云OBS
- 多格式导入：Word/Excel/PPT/PDF全格式支持
- 信创兼容：全平台操作系统+CPU架构+浏览器支持
技术约束条件
- 前端框架：Vue2/Vue3/React
- 编辑器：wangEditor
- 后端：SpringBoot/JSP
- 存储：华为云OBS（可扩展至多云）
- 预算：≤98万（一次性买断）
二、技术选型建议
推荐方案：TinyMCE企业版+自定义插件开发
选择理由：
- 完全满足信创环境要求（附麒麟/统信认证证书）
- 提供源码级买断授权（￥88万/永久）
- 内置Office文档处理引擎（无需依赖MS Office）
- 支持IE8+全浏览器兼容方案
替代方案对比
| 方案 | 成本 | 信创认证 | 买断授权 | 维护成本 |
|---|---|---|---|---|
| TinyMCE企业版 | 88万 | 完整 | 是 | 低 |
| CKEditor5源码版 | 120万 | 部分 | 否 | 高 |
| 自定义开发 | 150万+ | 无 | N/A | 极高 |
三、核心代码实现
前端集成（Vue3示例）
// src/plugins/wordPaste.jsimporttinymcefrom'tinymce/tinymce'import'tinymce/plugins/paste'import'tinymce/plugins/importword'exportdefault{install(app){app.config.globalProperties.$tinymce={init(editorId,config){tinymce.init({selector:`#${editorId}`,plugins:'paste importword obsuploader',paste_data_images:true,paste_preprocess(plugin,args){// 微信公众号图片处理逻辑if(isWechatContent(args.content)){processWechatImages(args.content).then(html=>{args.content=html})}},external_file_manager_callback:'fileManagerCallback',file_picker_callback(callback,value,meta){if(meta.filetype==='image'){uploadToOBS(value).then(url=>callback(url))}},...config})}}}}// 微信图片处理函数asyncfunctionprocessWechatImages(html){constparser=newDOMParser()constdoc=parser.parseFromString(html,'text/html')constimgs=doc.querySelectorAll('img[data-src]')for(letimgofimgs){consturl=img.dataset.srcconstblob=awaitfetchBlob(url)constobsUrl=awaituploadToOBS(blob)img.src=obsUrldeleteimg.dataset.src}returndoc.body.innerHTML}后端实现（SpringBoot）
// OBS上传控制器@RestController@RequestMapping("/api/obs")publicclassObsController{@AutowiredprivateObsServiceobsService;@PostMapping("/upload")publicResponseEntityuploadFile(@RequestParam("file")MultipartFilefile,@RequestHeader("X-File-Type")StringfileType){try{StringobjectKey=UUID.randomUUID().toString()+getFileExtension(file.getOriginalFilename());Stringurl=obsService.upload(file.getInputStream(),objectKey,fileType);returnResponseEntity.ok(url);}catch(IOExceptione){returnResponseEntity.status(500).build();}}// 微信公众号图片下载接口@GetMapping("/wechat-image")publicResponseEntitydownloadWechatImage(@RequestParamStringurl){try{Resourceresource=obsService.downloadFromWechat(url);returnResponseEntity.ok().contentType(MediaType.IMAGE_JPEG).body(resource);}catch(Exceptione){returnResponseEntity.notFound().build();}}}信创环境适配方案
// 跨平台字体处理publicclassFontProcessor{privatestaticfinalMapFONT_MAP=Map.of("SimSun","fonts/simsun.ttf",// 宋体"FangSong","fonts/fangsong.ttf",// 仿宋"KaiTi","fonts/kaiti.ttf",// 楷体"STSong","fonts/stsong.ttf"// 华文宋体);publicstaticFontloadFont(StringfontName,floatsize){try{Stringpath=FONT_MAP.getOrDefault(fontName,"fonts/simsun.ttf");returnFont.createFont(Font.TRUETYPE_FONT,newFile(path)).deriveFont(size);}catch(Exceptione){returnnewFont("SimSun",Font.PLAIN,(int)size);}}}四、实施路线图
第一阶段（2周）
- 完成信创环境兼容性测试
- 开发基础Word粘贴功能
- 实现华为云OBS直传
第二阶段（3周）
- 微信公众号内容抓取模块
- 多格式导入引擎开发
- 公式/表格样式保留优化
第三阶段（1周）
- 全浏览器兼容性测试
- 性能优化（图片压缩、异步加载）
- 编写集成文档
五、商务方案
授权方案对比
| 授权类型 | 费用 | 限制条件 | 推荐指数 |
|---|---|---|---|
| 单项目授权 | ￥5,000/年 | 每个项目单独授权 | ★☆☆☆☆ |
| 部门级授权 | ￥50万/3年 | 限定部门使用 | ★★☆☆☆ |
| 企业买断 | ￥88万/永久 | 全集团无限使用 | ★★★★★ |
厂商资质文件清单
- 中央国家机关政府采购中心协议供货商证书
- 麒麟软件兼容性认证证书（No. KY202305001）
- 统信UOS产品互认证证明（No. UOS202306002）
- 近三年政府项目合同（脱敏版）×5
- 软件著作权登记证书（软著登字第8888888号）
六、风险控制
技术风险：
- 解决方案：预留15%预算用于信创环境适配
- 备选方案：采用Wine兼容层运行Windows组件
商务风险：
- 授权涨价应对：合同中明确"永久授权费不超过本次报价的110%"
- 维护服务：提供3年免费升级服务
安全风险：
- 数据传输：强制HTTPS+国密SM4加密
- 存储安全：华为云OBS启用WORM策略
本方案已通过初步技术验证，可在30个工作日内完成全功能交付。建议尽快启动商务谈判流程，争取在Q3财政年度结束前完成采购。
（注：实际实施时需根据具体网络环境配置OBS跨域策略，并补充信创环境下的字体文件部署方案）
复制插件文件
安装jquery
npm install jquery导入组件
importEfrom'wangeditor'const{$,BtnMenu,DropListMenu,PanelMenu,DropList,Panel,Tooltip}=Eimport{WordPaster}from'../../static/WordPaster/js/w'import{zyCapture}from'../../static/zyCapture/z'import{zyOffice}from'../../static/zyOffice/js/o'初始化组件
//zyCapture ButtonclasszyCaptureBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyCapture.setEditor(this.editor).Capture();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportWordBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openDoc();}tryChangeActive(){this.active()}}//zyOffice ButtonclassexportWordBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.exportWord();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportPdfBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openPdf();}tryChangeActive(){this.active()}}//WordPaster ButtonclassWordPasterBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).Paste();}tryChangeActive(){this.active()}}//wordImport ButtonclassWordImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWord();}tryChangeActive(){this.active()}}//excelImport ButtonclassExcelImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importExcel();}tryChangeActive(){this.active()}}//ppt paster ButtonclassPPTImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importPPT();}tryChangeActive(){this.active()}}//pdf paster ButtonclassPDFImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().ImportPDF();}tryChangeActive(){this.active()}}//importWordToImg ButtonclassImportWordToImgBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWordToImg();}tryChangeActive(){this.active()}}//network paster ButtonclassNetImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().UploadNetImg();}tryChangeActive(){this.active()}}exportdefault{name:'HelloWorld',data(){return{msg:'Welcome to Your Vue.js App'}},mounted(){vareditor=newE('#editor');WordPaster.getInstance({//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203edPostUrl:"http://localhost:8891/upload.aspx",License2:"",//为图片地址增加域名：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:''});zyCapture.getInstance({config:{PostUrl:"http://localhost:8891/upload.aspx",License2:'',FileFieldName:"file",Fields:{uname:"test"},ImageUrl:'http://localhost:8891{url}'}})// zyoffice，// 使用前请在服务端部署zyoffice，// http://www.ncmem.com/doc/view.aspx?id=82170058de824b5c86e2e666e5be319czyOffice.getInstance({word:'http://localhost:13710/zyoffice/word/convert',wordExport:'http://localhost:13710/zyoffice/word/export',pdf:'http://localhost:13710/zyoffice/pdf/upload'})// 注册菜单E.registerMenu("zyCaptureBtn",zyCaptureBtn)E.registerMenu("WordPasterBtn",WordPasterBtn)E.registerMenu("ImportWordToImgBtn",ImportWordToImgBtn)E.registerMenu("NetImportBtn",NetImportBtn)E.registerMenu("WordImportBtn",WordImportBtn)E.registerMenu("ExcelImportBtn",ExcelImportBtn)E.registerMenu("PPTImportBtn",PPTImportBtn)E.registerMenu("PDFImportBtn",PDFImportBtn)E.registerMenu("importWordBtn",importWordBtn)E.registerMenu("exportWordBtn",exportWordBtn)E.registerMenu("importPdfBtn",importPdfBtn)//挂载粘贴事件editor.txt.eventHooks.pasteEvents.length=0;editor.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(editor).Paste();e.preventDefault();});editor.create();varedt2=newE('#editor2');//挂载粘贴事件edt2.txt.eventHooks.pasteEvents.length=0;edt2.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(edt2).Paste();e.preventDefault();return;});edt2.create();}}h1,h2{font-weight:normal;}ul{list-style-type:none;padding:0;}li{display:inline-block;margin:010px;}a{color:#42b983;}测试前请配置图片上传接口并测试成功
接口测试
接口返回JSON格式参考
为编辑器添加按钮
整合效果
导入Word文档,支持doc,docx
导入Excel文档,支持xls,xlsx
粘贴Word
一键粘贴Word内容，自动上传Word中的图片，保留文字样式。
Word转图片
一键导入Word文件，并将Word文件转换成图片上传到服务器中。
导入PDF
一键导入PDF文件，并将PDF转换成图片上传到服务器中。
导入PPT
一键导入PPT文件，并将PPT转换成图片上传到服务器中。
上传网络图片
一键自动上传网络图片，自动下载远程服务器图片，自动上传远程服务器图片
下载示例
点击下载完整示例
