汽车供应链平台如何通过CKEditor实现Excel数据透视表导入？

富文本编辑器Word粘贴功能集成技术日志

2023年X月X日 | 湖南某软件公司前端组
记录人：前端工程师

一、需求分析

1.1 核心需求

• Word粘贴功能：支持从Word（.doc/.docx）复制内容粘贴到CKEditor 4，保留样式（表格、公式、形状、字体等）。
• 图片自动上传：粘贴或导入的图片自动上传至阿里云OSS（未来可扩展至其他云存储）。
• 文档导入功能：支持Word、Excel、PPT、PDF文档解析，保留原始样式，并自动处理图片上传。
• 微信公众号抓取：支持粘贴公众号文章时自动下载远程图片并替换为OSS地址。
• 兼容性要求：支持GB2312字体（政府公文标准）、IE11+、现代浏览器。
• 预算限制：≤ 2万（含第三方SDK购买或自研工时）。

1.2 技术约束

二、市场方案调研

2.1 现有方案对比

结论：由于预算限制（2万内），决定采用WordPaster插件扩展方案，基于开源库增强Word粘贴支持。

三、技术实现方案

3.1 架构设计

3.2 关键技术点

1. Word粘贴：监听paste事件，解析HTML内容（使用document.execCommand兼容IE）。
2. 图片上传：检测``，转存至OSS并替换URL。
3. 文档导入：使用Apache POI（后端）解析Word/Excel/PPT，返回HTML片段。
4. 公式支持：集成MathJax渲染Latex公式。
5. GB2312字体：CSS@font-face加载本地字体包。

四、代码实现

4.1 前端集成（Vue2 + CKEditor 4）

4.1.1 主插件入口

// src/plugins/ckeditor-word-paste.jsCKEDITOR.plugins.add('wordpaste',{init:function(editor){// 注册Word粘贴处理器editor.on('paste',function(e){constclipboardData=e.data.dataTransfer;if(clipboardData.$.types.includes('text/html')){e.data.preventDefault();this._processWordPaste(clipboardData.getData('text/html'));}}.bind(this));// 添加文档导入按钮editor.ui.addButton('WordImport',{label:'导入文档',command:'importWord',icon:'/plugins/wordpaste/icons/word.png'});editor.addCommand('importWord',{exec:function(){this._openFileDialog();}.bind(this)});},_processWordPaste:function(html){// 清理Word冗余样式，保留有效结构constcleanedHTML=this._cleanWordHTML(html);// 提取图片Blob并上传this._uploadImages(cleanedHTML).then(finalHTML=>{this.insertHtml(finalHTML);});},_openFileDialog:function(){constinput=document.createElement('input');input.type='file';input.accept='.doc,.docx,.xlsx,.pptx,.pdf';input.onchange=(e)=>{constfile=e.target.files[0];constformData=newFormData();formData.append('file',file);axios.post('/api/uploadDoc',formData).then(res=>this.insertHtml(res.data.html));};input.click();}});

4.1.2 图片上传逻辑

_uploadImages:function(html){constparser=newDOMParser();constdoc=parser.parseFromString(html,'text/html');constimages=doc.querySelectorAll('img[src^="blob:"]');constuploadPromises=Array.from(images).map(img=>{returnfetch(img.src).then(res=>res.blob()).then(blob=>{constformData=newFormData();formData.append('image',blob,`word_${Date.now()}.png`);returnaxios.post('/api/uploadImage',formData);}).then(res=>{img.src=res.data.url;// 替换为OSS URL});});returnPromise.all(uploadPromises).then(()=>doc.documentElement.innerHTML);}

4.2 后端实现（ASP.NET WebForm）

4.2.1 图片上传接口

// UploadImage.aspx.csprotectedvoidPage_Load(objectsender,EventArgse){if(Request.Files.Count>0){varfile=Request.Files[0];stringfileName=$"word_{DateTime.Now.Ticks}{Path.GetExtension(file.FileName)}";// 上传至阿里云OSSvarossClient=newOssClient("","","");varresult=ossClient.PutObject("",fileName,file.InputStream);Response.Write($"{{\"url\":\"https://oss.example.com/{fileName}\"}}");Response.ContentType="application/json";}}

4.2.2 Word文档解析接口

// UploadDoc.aspx.csprotectedvoidPage_Load(objectsender,EventArgse){if(Request.Files.Count>0){varfile=Request.Files[0];stringhtmlContent="";switch(Path.GetExtension(file.FileName).ToLower()){case".docx":using(vardoc=newXWPFDocument(file.InputStream)){htmlContent=newWordToHtmlConverter().Convert(doc);}break;case".pdf":using(vardoc=PDDocument.Load(file.InputStream)){htmlContent=newPdfToHtmlConverter().Convert(doc);}break;}// 处理图片上传（略）Response.Write($"{{\"html\":\"{HttpUtility.JavaScriptStringEncode(htmlContent)}\"}}");Response.ContentType="application/json";}}

五、部署与测试

5.1 兼容性验证

5.2 性能测试

• Word粘贴（含5张图）：平均耗时1.2秒（OSS上传优化后）。
• 10MB PDF导入：解析耗时3.8秒（服务器4核8G配置）。

六、成本核算

七、后续优化

1. 公式编辑增强：集成MathType Web版（需额外预算）。
2. 微信公众号API对接：自动抓取文章内容+图片。
3. 云存储多供应商支持：动态切换阿里云/腾讯云OSS。

备注：今日测试发现IE11下公式渲染需加载es5-shim，已提交补丁。客户验收后，建议升级至CKEditor 5以获得更好的Word兼容性，但需评估Vue2迁移成本。

复制插件

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

上传网络图片

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

下载示例

点击下载完整示例