重庆XX教育集团项目评估与技术方案
——基于信创环境的富文本编辑器增强模块开发纪实
一、需求分析与技术评估
1. 核心需求矩阵
| 需求分类 | 具体要求 | 技术挑战点 |
|---|---|---|
| 内容粘贴 | Word/微信公众号图文粘贴（含图片自动上传） | IE8下Clipboard API兼容性、微信公众号反爬策略 |
| 文档导入 | Word/Excel/PPT/PDF解析（保留样式+公式） | 龙芯架构下Office二进制解析性能 |
| 信创适配 | 支持6类国产OS+3类CPU架构 | 银河麒麟缺少动态链接库、龙芯MIPS指令集兼容 |
| 安全要求 | 图片二进制存储、政府公文GB2312字体渲染 | 信创环境下字体版权问题、华为OBS跨域加密传输 |
2. 现成方案对比
| 方案 | 优点 | 缺点 | 信创适配性 | 成本估算 |
|---|---|---|---|---|
| 金山WPS云服务 | 原生兼容Vue2 | 功能强大 | 全栈适配 | 80万(年付) |
| 永中Office | 原生兼容Vue2 | 功能强大 | 全栈适配 | 59万(年付) |
| 腾讯文档 | 原生兼容Vue2 | 功能强大 | 全栈适配 | 60万(年付) |
| 钉钉文档 | 原生兼容Vue2 | 功能强大 | 全栈适配 | 60万(年付) |
| 飞书 | 原生兼容Vue2 | 功能强大 | 全栈适配 | 59万(年付) |
| 石墨文档 | 原生兼容Vue2 | 功能强大 | 全栈适配 | 50万(年付) |
| CKEditor官方插件 | 原生兼容Vue2 | 不支持Excel/PPT导入 | 仅x86/arm | 35万(年付) |
| WebOffice SDK | 完美保留Office样式 | 依赖Windows ActiveX（IE8兼容困难） | 不适用国产CPU | 80万/年 |
| 自研方案 | 完全可控 | 开发周期6-8周 | 全栈适配 | 58万(买断) |
| WordPaster | 完全开源(下载源码) | |||
| 功能全面 | ||||
| 原生兼容Vue2 | ||||
| 完全可控 | 开发周期1天 | 全栈适配 | 58万(买断) |
决策依据：选择自研+部分开源改造方案，基于以下组件二次开发：
- 前端：CKEditor5 PasteFromOffice插件 + mammoth.js（Word解析）
- 后端：Apache POI（Office解析） + pdftotext（PDF解析）
- 信创层：统信UOS编译工具链打包
二、核心功能实现（代码片段）
1. 前端Vue2集成方案
// src/components/EditorWithImport.vueexportdefault{methods:{initCKEditor(){ClassicEditor.create(this.$refs.editor,{plugins:[PasteFromOffice,DocumentImport],toolbar:['wordImport','wechatPaste'],wordImport:{serverUrl:'/api/convert/word',ossConfig:{region:'cn-south-1',bucket:'edu-docs'}}}).then(editor=>{this.editor=editor;editor.on('paste',this.handleWechatPaste);});},asynchandleWechatPaste(event,data){consthtml=data.dataTransfer.getData('text/html');constimages=extractWechatImages(html);// 解析公众号图片constuploaded=awaitthis.uploadToOBS(images);replaceTempUrls(html,uploaded);// 替换为华为OBS链接editor.setData(html);}}}2. 后端文件解析（SpringBoot）
// FileConverterController.java@PostMapping("/convert/word")publicResponseEntityconvertWord(@RequestParamMultipartFilefile){// 信创环境检测if(SystemUtils.isLoongArch()&&file.getContentType().contains("ppt")){thrownewUnsupportedOperationException("龙芯暂不支持PPT转换");}ConversionResultresult;if(file.getContentType().contains("word")){result=newWordParser().parse(file.getInputStream());}elseif(file.getContentType().contains("pdf")){result=newPDFParser().parse(file.getBytes());}// 处理图片存储result.getImages().forEach(img->{StringossKey="doc/"+UUID.randomUUID()+".png";huaweiOBSUtil.upload(ossKey,img.getBytes(),true);// 启用客户端加密});returnResponseEntity.ok(result.toHtml());}3. 信创环境编译脚本示例（龙芯MIPS）
# 在统信UOS龙芯版编译Apache POIexportJAVA_HOME=/opt/loongson/jdk-11exportCC="loongarch64-linux-gnu-gcc -mabi=lp64d"./configure --host=loongarch64-linux-gnumakeJNI_NATIVE_LIBS=libpoi-loongarch64.so三、信创适配关键过程
1. 国产化适配清单
| 组件 | 银河麒麟解决方案 | 龙芯LoongArch解决方案 |
|---|---|---|
| 字体渲染 | 预装中标楷体GB2312 | 使用开源思源字体模拟 |
| PDF解析 | 统信商店安装wps-libs | 源码编译xpdf-4.04 |
| Office解析 | 金仓数据库JDBC驱动 | 定制修改POI的字节码处理逻辑 |
2. IE8兼容方案
// 使用document.selection模拟Clipboard APIfunctiongetIE8Clipboard(){if(window.clipboardData){returnclipboardData.getData("Text");}elseif(document.selection){constrange=document.selection.createRange();returnrange.htmlText;}}四、商务合作与风险管理
1. 供应商资质验证
- 已收集5家候选厂商材料（示例）：
1. **北京XX科技** - 合同案例：国家税务总局金税三期项目 - 信创认证：银河麒麟/KOS双认证 - 著作权编号：2023SR1234567 - 转账凭证：2023年6月工行尾号3345转账120万元
2. 价格谈判策略
- 买断制报价对比：
厂商 初始报价 谈判目标价 附加条件 A公司 68万 55万 免费适配龙芯新架构 B公司 75万 58万 包含5年维保
3. 法律风险防控
- 合同特别条款：
第七条 价格锁定：本合同约定的买断价格适用于甲方及关联公司所有项目， 乙方不得以任何理由（包括但不限于功能升级、信创适配）要求追加费用
五、实施路线图
- 第1-2周：完成CKEditor插件原型开发（优先Word粘贴功能）
- 第3周：华为OBS图片上传模块联调
- 第4周：银河麒麟/统信UOS测试环境搭建
- 第5-6周：龙芯架构性能优化（目标：20MB文档解析<3秒）
- 第7周：IE8兼容性测试+政府公文样式验证
后续重点：
- 联系工信部电子标准院做信创软著联合认证
- 测试WPS Linux版与解析模块的兼容性
技术负责人签字：
张XX（集团信息化部总监）
日期：2023年XX月XX日
（注：完整代码包及测试报告已同步至集团GitLab仓库）
复制插件目录
引入插件文件
UEditor 1.4.3.3示例注意：不要重复引入jquery，如果您的项目已经引入了jq，则不用再引入jq-1.4
在工具栏中增加插件按钮
//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义toolbars:[["fullscreen","source","|","zycapture","|","wordpaster","importwordtoimg","netpaster","wordimport","excelimport","pptimport","pdfimport","|","importword","exportword","importpdf"]]初始化控件
varpos=window.location.href.lastIndexOf("/");varapi=[window.location.href.substr(0,pos+1),"asp/upload.asp"].join("");WordPaster.getInstance({//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936ImageUrl:"",//设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:"file",//提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1ImageMatch:''});//加载控件注意
如果接口字段名称不是file，请配置FileFieldName。ueditor接口中使用的upfile字段
点击查看详细教程
配置ImageMatch
匹配图片地址，如果服务器返回的是JSON则需要通过正则匹配
ImageMatch:'',点击参考链接
配置ImageUrl
为图片地址增加域名，如果服务器返回的图片地址是相对路径，可通过此属性添加自定义域名。
ImageUrl:"",点击查看详细教程
配置SESSION
如果接口有权限验证（登陆验证，SESSION验证），请配置COOKIE。或取消权限验证。
参考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3
效果
编辑器界面
导入Word文档,支持doc,docx
导入Excel文档,支持xls,xlsx
粘贴Word
一键粘贴Word内容，自动上传Word中的图片，保留文字样式。
Word转图片
一键导入Word文件，并将Word文件转换成图片上传到服务器中。
导入PDF
一键导入PDF文件，并将PDF转换成图片上传到服务器中。
导入PPT
一键导入PPT文件，并将PPT转换成图片上传到服务器中。
上传网络图片
下载示例
点击下载完整示例
