当前位置：首页 > news >正文

医院病历从WORD导入CKEDITOR为何出现乱码？

news 2026/5/11 21:38:07

Word一键转存CMS升级大冒险

📅 开发日志：2023年11月15日

大家好！我是广西某高校软件工程专业的"码农小白"，正在为我的CMS新闻管理系统做一个超酷的升级——让Word内容能一键粘贴并自动上传图片！下面记录我的开发历程和踩坑经验。

🧐 需求分析

我需要实现：

Word内容粘贴保留所有样式
图片自动上传到阿里云OSS
支持LaTeX转MathML
多终端公式高清显示
支持Office全家桶导入

预算：99元（穷学生的倔强）

🔍 技术选型过程

第一步：编辑器插件调研

CKEditor虽然有Paste from Word插件，但功能有限，于是我开始全网搜索：

TinyMCE：强大的Word粘贴功能，但商业版超预算
WangEditor：国产优秀，但Word支持一般
UEditor：百度出品，已停止维护
KindEditor：太老旧
CKEditor + 自定义插件：最终选择！因为：
- 已有基础
- 插件系统完善
- 社区活跃

发现宝藏：GitHub上找到ckeditor5-paste-from-office开源插件！🎉

💻 技术方案

前端方案：

Vue2 + CKEditor5 + paste-from-office插件
自定义图片上传适配器

后端方案：

PHP处理文件上传
阿里云OSS SDK
MathJax处理公式转换

🛠️ 开发实录

第一步：安装CKEditor5

npminstall--save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classicnpminstall--save @ckeditor/ckeditor5-paste-from-office

第二步：自定义Vue组件

importClassicEditorfrom'@ckeditor/ckeditor5-build-classic';importPasteFromOfficefrom'@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';classMyUploadAdapter{constructor(loader){this.loader=loader;}upload(){returnthis.loader.file.then(file=>{returnnewPromise((resolve,reject)=>{// 这里调用你的PHP上传接口constformData=newFormData();formData.append('file',file);axios.post('/api/upload',formData).then(response=>{resolve({default:response.data.url});}).catch(error=>{reject('上传失败: '+error);});});});}}exportdefault{data(){return{editor:ClassicEditor,editorData:'',editorConfig:{extraPlugins:[PasteFromOffice],pasteFromOffice:{styles:true,formatting:true},image:{toolbar:['imageTextAlternative','|','imageStyle:alignLeft','imageStyle:full','imageStyle:alignRight'],styles:['full','alignLeft','alignRight']},math:{engine:'mathjax',outputType:'script',forceOutputType:false}}}},methods:{onEditorReady(editor){editor.plugins.get('FileRepository').createUploadAdapter=(loader)=>{returnnewMyUploadAdapter(loader);};}}}

第三步：PHP后端处理

uploadFile($bucket,$object,$file['tmp_name']);$signedUrl=$ossClient->signUrl($bucket,$object,3600);echojson_encode(['url'=>$signedUrl,'status'=>'success']);}catch(OssException$e){echojson_encode(['error'=>$e->getMessage(),'status'=>'error']);}}

🌟 公式处理方案

为了支持LaTeX公式，我找到了MathJax：

MathJax = { tex: { inlineMath: [['$', '$'], ['\$', '\$']] }, svg: { fontCache: 'global' } };

🐛 踩坑记录

Word表格样式丢失：
- 解决：添加CSS样式强制继承
```
.ck-content table{border-collapse:collapse;width:100%;}
```
图片上传失败：
- 原因：阿里云OSS跨域问题
- 解决：在OSS控制台设置CORS规则
公式显示异常：
- 解决：使用MathJax渲染后手动触发重新渲染
```
if(window.MathJax){MathJax.typesetPromise();}
```

📦 插件打包

由于项目需要，我整理了一个完整的插件包结构：

word-paste-plugin/ ├── ckeditor.js # 自定义构建的CKEditor ├── paste-from-office/ # 官方插件 ├── image-upload/ # 自定义图片上传适配器 ├── mathml-support/ # 公式支持插件 └── demo/ # 示例代码

💰 99元预算分配

CKEditor商业插件授权：0元（使用开源方案）
MathJax服务：0元（使用CDN）
阿里云OSS：已包含在现有服务中
咖啡：99元（开发必备燃料）☕

🤝 求同行交流

欢迎加入我们的技术交流群：

QQ群：223813913
福利：新人红包1-99元
内容：技术讨论、项目合作、工作内推

🏆 最终效果

现在我的CMS可以：

完美粘贴Word内容
自动上传图片到OSS
高清显示公式
支持多平台查看

整个开发耗时2周，喝了7杯咖啡，掉了若干头发，但成就感爆棚！

给同行的建议：

先尝试开源方案
仔细阅读文档
加入社区讨论
做好备份（血泪教训）

希望我的经验对你有帮助！如果有问题，欢迎加群交流~ 🚀

复制插件

说明：此教程以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='});//加载控件