龙岩网站建设设计服务,网站开发工资山东,网站开发过程中遇到的问题及解决办法,阿里巴巴做网站么#x1f468;#x1f4bb; Word图片一键转存功能开发日记
#x1f50d; 寻找解决方案的漫漫长路
作为一个即将毕业的吉林软件工程专业大三学生#xff0c;我最近在给我的CMS新闻管理系统添加一个超实用的功能 - Word文档一键粘贴并自动上传图片#xff01;这简直是内容编… Word图片一键转存功能开发日记 寻找解决方案的漫漫长路作为一个即将毕业的吉林软件工程专业大三学生我最近在给我的CMS新闻管理系统添加一个超实用的功能 - Word文档一键粘贴并自动上传图片这简直是内容编辑的福音啊~需求分析核心功能Word内容粘贴保留所有样式表格、字体、公式等图片处理自动上传到阿里云OSS公式支持LaTeX转MathML多终端高清显示文件导入支持Word/Excel/PPT/PDF跨平台Win/macOS/Linux全支持预算最好免费最多99元软妹币技术调研经过三天三夜的Google、GitHub和Stack Overflow漫游我发现了几种可能的解决方案TinyMCE PowerPaste插件功能强大但收费超预算了CKEditor PasteFromOffice插件免费但样式保留有限UEditor百度编辑器国产对Word支持不错WangEditor 自定义插件轻量但需要自己开发最终选择CKEditor 5 自定义适配考虑到我们已经在用FCKEditorCKEditor的古老版本决定升级到CKEditor 5并使用其PasteFromOffice插件作为基础再自行开发图片上传和公式转换功能。 开发实战前端部分 (Vue 2)// 在main.js中引入CKEditorimportCKEditorfromckeditor/ckeditor5-vue2;importClassicEditorfromckeditor/ckeditor5-build-classic;Vue.use(CKEditor);// 组件中使用exportdefault{data(){return{editor:ClassicEditor,editorData:,editorConfig:{pasteFromOffice:{styles:true,tables:true,images:true},extraPlugins:[uploadImagePlugin]}}},methods:{onEditorReady(editor){// 监听粘贴事件editor.plugins.get(Clipboard).on(inputTransformation,(evt,data){this.handlePaste(data.content);});},asynchandlePaste(content){// 提取图片并上传constimagesthis.extractImages(content);for(constimgofimages){constossUrlawaitthis.uploadToOSS(img);contentcontent.replace(img.src,ossUrl);}// 处理公式contentthis.convertLatexToMathML(content);returncontent;}}}后端部分 (PHP)uploadFile(getenv(OSS_BUCKET),$object,$file[tmp_name]);$signedUrl$ossClient-signUrl(getenv(OSS_BUCKET),$object,3600);echojson_encode([url$signedUrl]);}catch(OssException$e){http_response_code(500);echojson_encode([error$e-getMessage()]);}}// LaTeX转MathMLfunctionlatexToMathML($latex){$mathMLshell_exec(tex2mathml --displayblock .escapeshellarg($latex));return$mathML?:公式转换失败;}?部署到阿里云ECS安装必要的依赖sudoapt-getinstall-y texlive texlive-math-extranpminstallckeditor/ckeditor5-vue2 ckeditor/ckeditor5-build-classic配置Nginx反向代理server { listen 80; server_name yourdomain.com; location / { root /var/www/html/dist; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://localhost:8000/; proxy_set_header Host $host; } } 效果展示功能终于完成了现在可以直接从Word复制内容粘贴到编辑器图片自动上传到OSS公式完美显示表格、样式完全保留 寻求合作各位大佬们我在QQ群223813913等你来交流新人加群送1~99元红包真的发分享技术、开源项目项目合作机会工作内推资源特别推荐我们的躺赚计划推荐客户成交拿20%提成1000元单子轻松赚200月入2000不是梦比写代码轻松多了作为快要毕业的软件工程学生我深刻理解找工作的压力。如果你有内推机会或者想一起做项目欢迎加群交流我们互相帮助共同成长~ 未来计划升级到Vue 3支持Excel/PPT/PDF导入开发移动端适配优化公式渲染性能如果有大佬愿意指导或者合作小弟感激不尽让我们一起打造更好的CMS系统吧后记经过这个项目我学会了如何在有限预算下解决问题也深刻体会到开发一时爽调试火葬场的真谛。但看到功能最终实现的那一刻所有的熬夜都值得了复制插件目录复制WordPaster插件添加式具栏按钮FCKConfig.ToolbarSets[Default][[Source,DocProps,-,Save,NewPage,Preview,-,Templates],[Cut,Copy,Paste,PasteText],[zycapture],[imagepaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport],[importword,exportword,importpdf],[Undo,Redo,-,Find,Replace,-,SelectAll,RemoveFormat],[Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField],/,[Bold,Italic,Underline,StrikeThrough,-,Subscript,Superscript],[OrderedList,UnorderedList,-,Outdent,Indent,Blockquote,CreateDiv],[JustifyLeft,JustifyCenter,JustifyRight,JustifyFull],[Link,Unlink,Anchor],[Image,Flash,Table,Rule,Smiley,SpecialChar,PageBreak],/,[Style,FontFormat,FontName,FontSize],[TextColor,BGColor],[FitWindow,ShowBlocks,-,About],// No comma for the last row.];添加编辑器插件在工具栏中添加插件按钮FCKConfig.Plugins.Add(imagepaster,zh-cn);FCKConfig.Plugins.Add(importwordtoimg,zh-cn);FCKConfig.Plugins.Add(netpaster,zh-cn);FCKConfig.Plugins.Add(wordimport,zh-cn);FCKConfig.Plugins.Add(excelimport,zh-cn);FCKConfig.Plugins.Add(pptimport,zh-cn);FCKConfig.Plugins.Add(pdfimport,zh-cn);FCKConfig.Plugins.Add(zycapture,zh-cn);FCKConfig.Plugins.Add(importword,zh-cn);FCKConfig.Plugins.Add(importpdf,zh-cn);FCKConfig.Plugins.Add(exportword,zh-cn);效果编辑器导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例下载完整示例