项目需求分析与解决方案设计

作为新疆能源行业集团项目负责人，针对企业网站后台管理系统富文本编辑器升级需求，需解决以下核心问题：信创兼容性、全浏览器支持、跨框架集成、高性价比授权、安全可靠的文档处理能力。基于UEditor现有架构，结合集团技术栈特点，我提出以下技术方案：

---

一、技术选型与架构设计

1. 编辑器核心
   采用 UEditor + uEditor-plus 信创增强版（开源协议允许二次开发），通过插件机制实现：

   • Word粘贴解析（基于paste-from-office协议）
   • 文档导入（集成Apache POI + Aspose.Words商业版混合模式）
   • 图片异步上传（华为云OBS SDK直传）

2. 跨框架适配器

   // vue3-adapter.js 示例
   export default {
     install(app, options) {
       app.config.globalProperties.$ueditor = (domId, config) => {
         return new Promise(resolve => {
           const editor = UE.getEditor(domId, {
             ...config,
             UEDITOR_HOME_URL: '/static/ueditor/',
             serverUrl: '/api/ueditor/upload'
           });
           resolve(editor);
         });
       };
     }
   };
   
   // React适配通过ref转发实现类似封装
   

3. 后端服务
   SpringBoot实现双模式接口：

   // 文件上传控制器（兼容JSP传统模式）
   @RestController
   @RequestMapping("/api/ueditor")
   public class UEditorController {
       
       @PostMapping("/upload")
       public ResponseEntity> upload(
           @RequestParam("upfile") MultipartFile file,
           HttpServletRequest request) {
           
           // 1. 信创环境检测
           String os = System.getProperty("os.name").toLowerCase();
           boolean isKylin = os.contains("kylin");
           
           // 2. 华为云OBS直传（使用临时AK/SK）
           String endpoint = isKylin ? "obs.cn-south-1.myhuaweicloud.com" : "obs.internal";
           ObsClient obsClient = new ObsClient(
               "AK_TEMP", "SK_TEMP", endpoint);
           
           // 3. 图片处理（保留EXIF信息）
           String objectKey = "ueditor/images/" + UUID.randomUUID() + 
                             FileNameUtils.getExtension(file.getOriginalFilename());
           obsClient.putObject("group-bucket", objectKey, file.getInputStream());
           
           // 4. 返回UEditor标准响应
           Map result = new HashMap<>();
           result.put("state", "SUCCESS");
           result.put("url", "https://obs." + (isKylin ? "public" : "internal") + 
                     ".com/group-bucket/" + objectKey);
           return ResponseEntity.ok(result);
       }
   }
   

---

二、核心功能实现

1. Word粘贴增强（保留复杂格式）

// 扩展ueditor.parse.js
UE.plugins['pastefromword'] = function() {
    var me = this;
    
    // 监听粘贴事件
    me.addListener('ready', function() {
        me.command(event, {
            execCommand: function() {
                // 1. 触发隐藏的contenteditable区域接收粘贴
                const hiddenDiv = document.getElementById('ueditor-paste-catcher');
                hiddenDiv.focus();
                
                // 2. 异步处理粘贴内容（IE8兼容）
                setTimeout(function() {
                    const html = hiddenDiv.innerHTML;
                    
                    // 3. 使用Turndown服务转换Office标签（兼容GB2312字体）
                    const converter = new TurndownService({
                        headingStyle: 'atx',
                        codeBlockStyle: 'fenced',
                        emDelimiter: '_',
                        strongDelimiter: '**',
                        br: ' '
                    });
                    
                    // 4. 图片处理（正则匹配并替换为OBS URL）
                    const processedHtml = html.replace(/]+src="([^"]+)"/gi, function(match, src) {
                        if (src.startsWith('blob:') || src.startsWith('data:')) {
                            return uploadPasteImage(src); // 调用上传方法
                        }
                        return match;
                    });
                    
                    me.execCommand('insertHTML', processedHtml);
                }, 100);
            }
        });
    });
};

2. 文档导入服务（SpringBoot实现）

// DocumentImportService.java
@Service
public class DocumentImportService {
    
    @Autowired
    private ObsTemplate obsTemplate;
    
    public String importDocument(MultipartFile file, String docType) throws IOException {
        // 1. 信创环境分支处理
        boolean isArm = System.getProperty("os.arch").contains("arm");
        String processor = isArm ? "arm" : "x86";
        
        // 2. 根据文件类型选择解析器
        switch (docType.toLowerCase()) {
            case "docx":
                try (XWPFDocument doc = new XWPFDocument(file.getInputStream())) {
                    return parseDocx(doc, processor);
                }
            case "pdf":
                try (PDDocument pdf = PDDocument.load(file.getInputStream())) {
                    return parsePdf(pdf);
                }
            // 其他类型处理...
            default:
                throw new IllegalArgumentException("Unsupported document type");
        }
    }
    
    private String parseDocx(XWPFDocument doc, String processor) {
        // 使用Apache POI解析（兼容性模式）
        StringBuilder html = new StringBuilder();
        
        // 处理表格（保留合并单元格）
        doc.getTables().forEach(table -> {
            html.append("");
            table.getRows().forEach(row -> {
                html.append("");
                row.getTableCells().forEach(cell -> {
                    html.append("");
                });
                html.append("");
            });
            html.append("");
                    // 处理MathType公式（通过OLE对象识别）
                    cell.getParagraphs().forEach(p -> {
                        p.getRuns().forEach(run -> {
                            if (run.getCTR().getRPr().getRFonts() != null) {
                                // 字体处理（检查GB2312支持）
                                String fontFamily = run.getCTR().getRPr().getRFonts().getAscii();
                                if (isGb2312Font(fontFamily)) {
                                    // 特殊字体处理逻辑...
                                }
                            }
                            html.append(run.text());
                        });
                    });
                    html.append("");
        });
        
        return html.toString();
    }
}

---

三、信创环境兼容方案

1. CPU架构检测

   // 启动时检测CPU架构
   public class ArchDetector {
       public static String getCpuArchitecture() {
           String arch = System.getProperty("os.arch");
           if (arch.contains("aarch64") || arch.contains("arm")) {
               return "arm";
           } else if (arch.contains("mips")) {
               return "mips";
           } else if (arch.contains("loongarch")) {
               return "loongarch";
           }
           return "x86";
       }
   }
   

2. 浏览器兼容矩阵

   浏览器	最低版本	特殊处理
   IE8	8.0	使用ES5-shim + JSON2.js
   Firefox ESR	52.0	启用WebExtensions旧版API
   360安全浏览器	7.1	强制使用Trident内核模式

---

四、采购方案建议

1. 推荐产品
   UEditor信创增强版（企业定制版）

   • 授权模式：永久买断（不限项目数）
   • 价格：88万元（含5年技术支持）
   • 交付物：
     • 完整源代码（GPLv2兼容协议）
     • 信创环境认证报告（麒麟/统信UOS/中科方德）
     • 央企合作案例（国家电网/中国石化等5个案例）

2. 成本对比

   方案	年授权费	5年总成本	风险点
   按项目采购	500万/年	2500万+	每年议价/断供风险
   本次买断方案	88万	88万	需承担5年后升级成本

---

五、实施计划

1. 阶段一（2周）

   • 完成信创环境兼容性测试
   • 搭建华为云OBS混合云存储架构

2. 阶段二（4周）

   • 开发Word粘贴增强插件
   • 实现文档导入服务API

3. 阶段三（2周）

   • 完成Vue2/Vue3/React适配器
   • 编写集成文档和培训材料

---

该方案已通过集团技术委员会初步评审，下一步将启动POC测试验证在银河麒麟V10+飞腾D2000环境下的性能表现。建议优先选择支持信创全链条的国产编辑器解决方案，避免后续技术债务积累。

复制插件目录

引入插件文件

	
	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"
      ]
    ]

初始化控件

        var pos = window.location.href.lastIndexOf("/");
        var api = [
            window.location.href.substr(0, pos + 1),
            "asp/upload.asp"
        ].join("");
        WordPaster.getInstance({
			//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
            PostUrl: api,
			//为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
            ImageUrl: "",
            //设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
            FileFieldName: "file",
            //提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
            ImageMatch: ''			
        });//加载控件

注意

如果接口字段名称不是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转换成图片上传到服务器中。

上传网络图片

下载示例

点击下载完整示例