ckeditor示例代码解决IE粘贴word图片问题

项目需求分析与技术方案

作为西安某高新技术企业项目负责人，针对企业网站后台管理系统新增的富文本编辑器增强功能需求，结合国产化信创环境、多浏览器兼容性、成本控制及长期维护需求，提出以下技术方案：

一、技术选型与架构设计

1. 前端集成方案

   • 核心组件：CKEditor 5（Vue3/React双版本适配）
   • 插件开发：
     • Word粘贴增强：基于@ckeditor/ckeditor5-paste-from-office二次开发，实现图片二进制流上传
     • 微信文章解析：通过正则匹配公众号图片URL，使用axios下载后转存OSS
     • 文档导入：集成mammoth.js（Word）、pdf.js（PDF）、xlsx（Excel）实现结构化解析
   • 跨框架兼容：封装为独立Web Component，通过customElements实现Vue/React共用

2. 后端服务设计

   • 接口层：Spring Boot（兼容JSP环境）
   • 核心功能：
     • 图片处理：接收MultipartFile，生成唯一ID后上传OSS
     • 文档转换：调用LibreOffice Java API（支持信创环境）
     • 公式渲染：集成MathJax 3.0处理LaTeX/MathType
   • 信创适配：通过Hutool工具包实现跨Linux发行版路径处理

3. 存储方案

   // OSS上传示例（Spring Boot）@PostMapping("/upload")publicResponseEntityupload(@RequestParam("file")MultipartFilefile){StringobjectKey=UUID.randomUUID()+"."+FilenameUtils.getExtension(file.getOriginalFilename());ossClient.putObject(bucketName,objectKey,file.getInputStream());returnResponseEntity.ok("https://oss-cn-hangzhou.aliyuncs.com/"+bucketName+"/"+objectKey);}

二、国产化环境适配方案

1. 操作系统兼容矩阵

   组件	Windows	macOS	Linux(x86/ARM)	麒麟系统	统信UOS
   CKEditor	✓	✓	✓	✓	✓
   LibreOffice	✓	✓	✓	7.1+	10.4+
   JDK	8/11	8/11	OpenJDK 1.8	华为Kunpeng JDK	腾讯Kona JDK

2. 浏览器兼容策略

   • IE8：通过es5-shim+document-register-elementpolyfill
   • 信创浏览器：针对WebKit内核优化CSS前缀（-webkit-）

三、核心代码实现

1. 前端插件开发（Vue3示例）

// src/plugins/WordPaste.jsimportPluginfrom'@ckeditor/ckeditor5-core';exportdefaultclassWordPasteextendsPlugin{init(){consteditor=this.editor;editor.plugins.get('ClipboardPipeline').on('inputTransformation',(evt,data)=>{if(data.dataTransfer.getData('text/html').includes('mso-')){this._processOfficeContent(data.content);}});}async_processOfficeContent(content){constdoc=newDOMParser().parseFromString(content,'text/html');constimages=doc.querySelectorAll('img[src^="data:image"]');for(constimgofimages){constblob=awaitthis._dataUrlToBlob(img.src);constformData=newFormData();formData.append('file',blob,'pasted-image.png');constres=awaitfetch('/api/upload',{method:'POST',body:formData});img.src=awaitres.text();img.removeAttribute('style');// 清除Office生成的冗余样式}}}

2. 后端文档解析（Spring Boot）

// DocumentConverterService.java@ServicepublicclassDocumentConverterService{@Value("${libreoffice.path}")privateStringlibreOfficePath;publicbyte[]convertToHtml(MultipartFilefile)throwsIOException{PathtempDir=Files.createTempDirectory("doc-convert");PathinputPath=tempDir.resolve(file.getOriginalFilename());PathoutputPath=tempDir.resolve("output.html");try(InputStreamis=file.getInputStream()){Files.copy(is,inputPath,StandardCopyOption.REPLACE_EXISTING);}// 调用LibreOffice命令行转换ProcessBuilderpb=newProcessBuilder(libreOfficePath,"--headless","--convert-to","html","--outdir",tempDir.toString(),inputPath.toString());Processprocess=pb.start();process.waitFor();returnFiles.readAllBytes(outputPath);}}

四、信创资质保障方案

1. 供应商资质要求清单

   • 5个以上政府/央企案例（需提供：合同首页+签章页、银行回单、信创认证证书）
   • 软件著作权证书（需包含"党政机关"适用范围声明）
   • 等保三级认证（存储系统部分）
   • 源代码审计报告（奇安信或启明星辰出具）

2. 授权模式建议

   • 买断方案：98万包含：
     • 全量源代码（MIT协议授权）
     • 3年免费升级
     • 信创环境适配培训（含龙芯/飞腾架构专项）
     • 50人天定制开发额度

五、部署实施计划

1. 阶段划分

   • 第一周：完成CKEditor插件开发及Vue3集成测试
   • 第二周：信创环境适配（麒麟/统信UOS）
   • 第三周：与现有JSP系统对接（文件上传接口）
   • 第四周：全量测试（含IE8兼容性验证）

2. 应急方案

   • 保留原有TinyMCE编辑器作为降级方案
   • 图片上传失败时显示本地预览（带重新上传按钮）

该方案已通过某部委电子政务系统实际验证，在华为鲲鹏920服务器+银河麒麟V10环境下实现：

• Word文档导入耗时：<3秒/10页（含20张图片）
• 微信文章解析准确率：99.2%（含复杂公式）
• 内存占用优化：较商业产品降低47%

建议优先选择提供信创实验室环境预测试的供应商，以降低项目风险。

复制插件

说明：此教程以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=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:'',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转换成图片上传到服务器中。

上传网络图片

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

下载示例

点击下载完整示例