农业大数据CKEDITOR如何兼容微信公众号图文的图片上传？

企业网站后台Word/公众号内容导入功能集成项目报告

一、需求分析与技术调研

我作为项目负责人，近期针对企业网站后台管理系统新增的Word粘贴、Word文档导入及微信公众号内容粘贴功能需求展开了全面调研。经过详细分析，总结了以下关键需求点：

1. 核心功能需求：

   • Web编辑器插件形式集成（基于CKEditor + Vue2）
   • Word内容粘贴保留完整样式（含表格、公式、特殊字体等）
   • 公众号内容抓取及图片自动上传
   • 多格式文档导入（Word/Excel/PPT/PDF）
   • 图片二进制存储（华为云OBS）

2. 特殊要求：

   • 全信创环境兼容（OS/CPU/浏览器）
   • IE8兼容支持
   • 58万预算内买断授权
   • 需验证厂商资质（5+央企案例）

二、市场产品调研记录

1. 候选产品筛选

经过一周市场调研，筛选出5个符合基础要求的产品：

产品名称	厂商	技术架构	信创认证	买断价格	IE8支持
网际Word助手	北京网际	Java+JS	全系列	45万/年	是
金格iWebOffice	江西金格	ActiveX+JS	部分	38万/年	需插件
金山WPS	金山软件	Java+JS	全系列	62万/年	否
永中WebOffice	无锡永中	Java+JS	全系列	59万/年	否
腾讯文档	腾讯	Java+JS	全系列	68万/年	否
钉钉文档	钉钉	Java+JS	全系列	67万/年	否
飞书	字节跳动	Java+JS	全系列	66万/年	否
石墨文档	石墨	Java+JS	全系列	59万/年	否
点聚WebOffice	北京点聚	.NET+JS	部分	48万/年	是
超时代Office控件	深圳超时代	纯JS	全系列	55万/年	是
泽优WordPaster控件	荆门泽优	多平台构架	全系列	55万	是

2. 深度技术验证

测试环境：

• 麒麟V10 + 飞腾2000
• Windows 7 + IE8
• 统信UOS + 龙芯3A5000

验证重点：

1. 样式保留能力：

   • 测试包含GB2312字体的政府公文
   • 复杂表格（合并单元格、边框样式）
   • MathType公式和LaTeX公式
   • 形状组合图形

2. 图片处理：

   // 示例：检查图片处理方式
   editor.on('paste', function(evt) {
       var html = evt.data.dataValue;
       // 验证图片是否转为二进制上传
       console.log(html.match(/]+src=["']([^"']+)["']/g)); 
   });
   

3. 信创环境兼容性：

   • 检查各产品在MIPS/LoongArch架构下的运行情况
   • 验证与华为云OBS的对接能力

3. 厂商资质审查

要求各厂商提供的资质文件：

• 软件著作权证书
• 信创环境兼容性测试报告
• 5个以上央企/政府项目合同（脱敏）
• 银行转账凭证

特别关注：荆门泽优软件提供的某部委项目案例中，包含完整的IE8兼容解决方案。

三、技术方案选型

最终选择：泽优WordPaster控件

决策依据：

1. 唯一通过全信创环境认证（含LoongArch）
2. 提供ActiveX控件方案，适合IE8+
3. 提供完整的SDK和API文档
4. 55万买断价在预算内
5. 图片直传OBS功能成熟

合同关键条款：

• 永久授权（不限项目数）
• 免费升级维护3年
• 提供产品源代码（单独付费，防厂商倒闭）
• 性能保证（支持100并发）

四、系统集成方案

前端集成（Vue2 + CKEditor）

1. 安装插件包：

npm install @supertime/office-embed --save

2. 配置CKEditor：

// ckeditor.config.js
import SuperOffice from '@supertime/office-embed';

ClassicEditor.create(document.querySelector('#editor'), {
    plugins: [SuperOffice, /* 其他插件 */],
    toolbar: {
        items: [
            'superOfficeImport', 
            'superOfficePaste',
            'wechatImport',
            // ...原有工具项
        ]
    },
    superOffice: {
        obsConfig: {
            bucket: 'your-bucket',
            endpoint: 'obs.cn-south-1.myhuaweicloud.com',
            getTokenUrl: '/api/obs-token' // 后端签发临时token
        },
        wechatProxy: '/api/wechat-proxy' // 公众号图片代理
    }
});

后端对接（SpringBoot）

1. OBS临时token接口：

@RestController
@RequestMapping("/api")
public class ObsController {
    
    @GetMapping("/obs-token")
    public ObsToken getObsToken() {
        // 使用华为云SDK生成临时上传凭证
        TemporarySignatureRequest request = new TemporarySignatureRequest(
            HttpMethodEnum.PUT, 1800);
        TemporarySignatureResponse response = 
            ObsClient.createTemporarySignature(request);
        
        return new ObsToken(
            response.getSignedUrl(),
            response.getActualSignedRequestHeaders()
        );
    }
    
    @Data
    public static class ObsToken {
        private String uploadUrl;
        private Map headers;
        // 构造器省略...
    }
}

2. 微信公众号图片代理：

@PostMapping("/wechat-proxy")
public ResponseEntity proxyWechatImage(@RequestParam String url) {
    // 使用HttpClient下载图片
    CloseableHttpClient httpClient = HttpClients.createDefault();
    HttpGet httpGet = new HttpGet(url);
    
    try (CloseableHttpResponse response = httpClient.execute(httpGet)) {
        HttpEntity entity = response.getEntity();
        byte[] bytes = EntityUtils.toByteArray(entity);
        
        // 直接转发二进制数据
        return ResponseEntity.ok()
            .contentType(MediaType.parseMediaType(
                entity.getContentType().getValue()))
            .body(bytes);
    }
}

五、信创环境适配方案

针对特殊环境的兼容处理：

1. 字体兼容层：

/* 前端字体回退策略 */
.editor-content {
    font-family: "仿宋_GB2312", "方正仿宋_GBK", "FangSong", serif;
}

2. 龙芯架构适配：

// 检测CPU架构
const isLoongArch = navigator.userAgent.includes('LoongArch');

if (isLoongArch) {
    // 加载专门优化的wasm模块
    import('./office-decoder-loongarch.wasm').then(module => {
        window.decoder = module;
    });
}

3. IE8 Polyfill方案：

六、项目实施计划

1. 阶段一：集成测试（2周）

   • 开发环境集成验证
   • 信创实验室环境测试

2. 阶段二：试点运行（1周）

   • 选择3个客户站点试运行
   • 收集性能数据（平均导入时间<2s）

3. 阶段三：全面部署（1周）

   • 编写操作手册
   • 培训客服团队

风险控制：

• 保留原有编辑器作为fallback
• 每日凌晨自动备份样式映射表

七、效果验证

测试用例示例：

测试项	输入样本	验证点	结果
公文导入	红头文件.docx	仿宋GB2312保留	✔
复杂表格	统计月报.docx	合并单元格样式	✔
数学公式	数学试卷.docx	MathType渲染	✔
公众号文章	某政府公众号链接	图片自动上传	✔

八、项目总结

本项目成功在预算范围内（实际支出55万元）实现了：

1. 全信创环境兼容的Office内容导入
2. 无缝对接华为云OBS存储
3. 零改造支持IE8等老旧浏览器
4. 获得客户信息化部门好评

后续优化方向：

• 增加WPS格式支持
• 集成电子签章功能
• 对接政府公文交换系统

附：核心代码片段已通过公司内部GitLab归档，路径为：
gitlab.xxx-group.com/backend/word-import-v2

复制插件

说明：此教程以CKEditor4.x为例，使用其他编辑器的查看对应教程。
将下列文件夹复制到项目中
/WordPaster
/ckeditor/plugins/imagepaster
/ckeditor/plugins/netpaster
/ckeditor/plugins/pptpaster
/ckeditor/plugins/pdfimport

上传插件

上传插件文件夹

将imagepaster,netpaster文件夹上传到现有项目ckeditor/plugins目录中

在工具栏中增加插件按钮

引用js

初始化控件

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: '',
	Cookie: 'PHPSESSID='			
});//加载控件

配置上传接口

注意

1.如果接口字段名称不是file，请配置FileFieldName。ueditor接口中使用的upfile字段

点击查看详细教程

配置ImageMatch

用于匹配JSON数据，

点击查看详细教程

配置ImageUrl

用于为图片增加域名前缀

点击查看详细教程

配置Session

如果接口有权限验证（登陆验证，SESSION验证），请配置COOKIE。或取消权限验证。
参考：点击查看详细教程

说明

1.请先测试您的接口：点击查看详细教程

功能演示

编辑器界面

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

一键粘贴Word内容，自动上传Word中的图片，保留文字样式。

Word转图片

一键导入Word文件，并将Word文件转换成图片上传到服务器中。

导入PDF

一键导入PDF文件，并将PDF转换成图片上传到服务器中。

导入PPT

一键导入PPT文件，并将PPT转换成图片上传到服务器中。

上传网络图片

一键自动上传网络图片，自动下载远程服务器图片，自动上传远程服务器图片

下载示例

点击下载完整示例