发帖
雷达卡
2023年XX月XX日 | 企业级编辑器插件选型与开发日志
一、需求背景与市场调研
1.1 核心需求痛点
在政务项目的特殊性上，我们面临几个主要的技术挑战：
- 信创环境兼容性：项目必须100%兼容国产操作系统（如麒麟/UOS）和处理器（如龙芯/鲲鹏）。
- IE8兼容性：考虑到一些政务系统仍在使用较旧的操作系统（如Windows XP+IE8），确保兼容性是必要的。
- 富文本保真度：编辑器需要支持特定的字体（如GB2312）和复杂的数学公式（如MathType），以满足政府公文的要求。
- 安全合规：所有文件的传输必须使用国产化的加密算法（如SM4）进行加密。
1.2 厂商评估结果
| 厂商 | 信创认证 | IE8支持 | 买断报价 | 央企案例 |
|---|---|---|---|---|
| Microsoft 365 | 齐全 | 不支持 | 约398~498元/人/年 | 国务院某部委 |
| WPS 365 | 齐全 | 不支持 | 约199~599元/人/年 | 国务院某部委 |
| 永中Office | 齐全 | 不支持 | 约199~599元/人/年 | 国务院某部委 |
| 腾讯文档 | 齐全 | 不支持 | 约200~600元/人/年 | 国务院某部委 |
| 钉钉文档 | 齐全 | 不支持 | 约200~600元/人/年 | 国务院某部委 |
| 飞书 | 齐全 | 不支持 | 约200~600元/人/年 | 国务院某部委 |
| 石墨 | 齐全 | 不支持 | 约200~600元/人/年 | 国务院某部委 |
| 厂商A | 齐全 | 支持 | 85万元 | 国务院某部委 |
| 厂商B | 缺少龙芯支持 | 不支持 | 45万元 | 某省政务云 |
| 厂商C | 齐全 | 支持 | 58万元 | 3家副省级政府 |
经过综合考量，最终决定选择厂商C，因其不仅符合预算和技术要求，还额外提供源代码托管服务。
二、技术实施方案
2.1 架构设计
架构设计部分将详细介绍整体的技术框架和设计思路，包括前后端的集成方式以及数据流的处理机制。
2.2 关键代码实现
前端插件核心逻辑（Vue2适配版）
// ueditor-word-plugin.js
UE.registerUI('wordpaste', function(editor) {
var btn = new UE.UI.Button({
name: 'wordpaste',
title: '公文粘贴',
onclick: function() {
editor.addListener('paste', function(type, clipboardData) {
if (clipboardData.files.length > 0) {
uploadToHuaweiOBS(clipboardData.files[0]).then(url => {
editor.execCommand('insertHtml', `
`);
});
}
});
}
});
return btn;
});
// 信创环境检测
function checkOS() {
const ua = navigator.userAgent;
if (ua.indexOf('Kylin') !== -1) return 'kylin';
if (ua.indexOf('Loongson') !== -1) return 'loongarch';
}后端文件处理（SpringBoot + 华为云OBS SDK）
@RestController
@RequestMapping("/api/upload")
public class GovFileController {
@PostMapping("/word")
public ResponseEntity handleWordUpload(
@RequestParam("file") MultipartFile file,
@RequestHeader("X-SM4-Key") String sm4Key) {
SM4Util sm4 = new SM4Util(sm4Key);
byte[] decrypted = sm4.decrypt(file.getBytes());
ObsClient obs = new ObsClient("AK", "SK", "https://obs.cn-east-3.myhuaweicloud.com");
String objectKey = "gov/" + UUID.randomUUID() + ".docx";
obs.putObject("bucket-name", objectKey, new ByteArrayInputStream(decrypted));
return ResponseEntity.ok(Map.of(
"url", "https://obs.example.com/" + objectKey,
"signature", SM3Util.hash(file.getOriginalFilename())
));
}
}三、信创适配专项
3.1 国产化测试矩阵
| 环境 | 测试结果 |
|---|---|
| 银河麒麟v10 + 龙芯 | 公式渲染异常 |
| 统信UOS + 飞腾 | 字体缺失 |
| IE8 + Windows XP | 插件加载超时 |
针对上述问题，我们提出了以下解决方案：
- 对于龙芯环境中的公式渲染问题，我们将引入WASM版本的公式渲染器。
- 针对统信UOS系统中的字体缺失问题，计划在系统镜像中预装GB2312字体包。
- 对于IE8浏览器中的插件加载超时问题，将采用ActiveX降级方案来解决。
四、商务与交付
4.1 合同关键条款
- 授权模式：88万元一次性买断，包含源代码和五年的维护服务。
- 罚则：合同中详细规定了违约责任和赔偿条款，确保双方权益得到保障。
赔偿条款
若信息技术创新适配未达到标准，将赔付合同金额的200%。
交付成果
- 通过等级保护2.0第三级测评报告
- 获得中央政府采购网入围证书
- 国资委某部门项目验收单
实施里程碑
- 第1周：完成UEditor插件核心开发
- 第3周：通过鲲鹏920平台兼容性测试
- 第6周：在XX省政务服务云环境中完成部署
风险预警与应对策略
龙芯性能限制：经实际测试，在LoongArch架构下，解析100页Word文档的时间比x86架构长三倍。
字体版权风险：需要单独购买方正GB2312字体的商业授权。
IE8内存泄漏问题：需要每隔30分钟强制刷新编辑器实例。
应对措施：设立专门的技术保障基金，预算约为15万元。
(注：上述代码需与供应商提供的SDK结合使用，敏感信息已做脱敏处理)
插件安装步骤
- 复制插件目录
- 引入插件文件
UEditor 1.4.3.3示例 - 注意：如果您的项目中已经引入了jQuery，则无需再次引入jq-1.4
- 在工具栏中添加插件按钮
// 工具栏上的所有功能按钮和下拉菜单，可以在创建编辑器实例时根据需求重新定义 toolbars: [ [ "fullscreen", "source", "|", "zycapture", "|", "wordpaster","importwordtoimg","netpaster","wordimport","excelimport","pptimport","pdfimport", "|", "importword","exportword","importpdf" ] ]
- 初始化控件
- JavaScript代码示例
var pos = window.location.href.lastIndexOf("/"); var api = [ window.location.href.substr(0, pos + 1), "asp/upload.asp" ].join(""); WordPaster.getInstance({ // 上传接口示例 PostUrl: api, // 图片地址前缀 ImageUrl: "", // 设置文件字段名称 FileFieldName: "file", // 提取图片地址 ImageMatch: '' }); // 加载控件 - 注意事项
如果接口字段名不是“file”，请配置FileFieldName。UEditor接口中使用的是“upfile”字段。
查看详细指南
- 配置ImageMatch
用于匹配图片地址，如果服务器返回的是JSON数据，则需要通过正则表达式进行匹配。
ImageMatch: ''
参考链接
- 配置ImageUrl
为图片地址添加域名前缀，如果服务器返回的图片地址是相对路径，可以通过此属性添加自定义域名。
ImageUrl: ""
查看详细教程
- 配置SESSION
如果接口需要权限验证（例如登录验证、SESSION验证），请配置COOKIE。或者取消权限验证。
参考：相关文档
功能展示
编辑器界面 
导入Word文档，支持.doc和.docx格式 
导入Excel文档，支持.xls和.xlsx格式 
粘贴Word内容，一键粘贴Word中的内容，自动上传Word中的图片并保留文字样式 
Word转图片，一键导入Word文件，并将Word文件转换成图片上传至服务器 
导入PDF文件，一键导入PDF文件，并将PDF转换成图片上传至服务器 
导入PPT文件，一键导入PPT文件，并将PPT转换成图片上传至服务器 
上传网络图片 
下载示例 [点击下载完整示例]
京公网安备 11010802022788号
