【技术日记一个贵州大学生的JSPVue3 CMS升级之路】同学们今天又是被JSP和UEditor折磨的一天我边嗦着酸汤粉边敲下这行字屏幕上的Tomcat日志第42次报错。作为贵州山区走出来的程序猿自封的我深知在预算99元的情况下实现Word一键粘贴多端公式渲染有多刺激——这简直比用JSP写微服务还离谱当前系统装备清单️前端装备Vue3 CLI未来要升级到最新版✏️编辑器百度UEditor老当益壮后端武器JSP经典永流传️数据库MySQL关系型数据库扛把子☁️云存储阿里云OSS存图必备开发环境Eclipse Jee 自己的破电脑当服务器技术升级方案穷学生版方案一UEditor魔改版 粘贴插件零预算⭐// 前端部分 - 扩展UEditor配置UE.registerUI(wordpaste,function(editor){varbtnnewUE.ui.Button({name:wordpaste,title:粘贴Word内容,onclick:function(){// 粘贴Word内容处理editor.execCommand(insertHtml,);// 监听粘贴事件document.getElementById(word-paste-area).addEventListener(paste,function(e){handleWordPaste(e,editor);});}});returnbtn;},5);functionhandleWordPaste(e,editor){// 获取剪切板内容varitems(e.clipboardData||window.clipboardData).items;// 处理图片上传for(leti0;iitems.length;i){if(items[i].type.indexOf(image)!-1){varblobitems[i].getAsFile();uploadImage(blob,editor);}}// 保留其他格式setTimeout((){varcontentdocument.getElementById(word-paste-area).innerHTML;editor.execCommand(insertHtml,content);document.getElementById(word-paste-area).remove();},500);}functionuploadImage(blob,editor){// 这里写图片上传逻辑}// 后端JSP图片上传处理% pageimportcom.aliyun.oss.OSSClient%% pageimportcom.aliyun.oss.model.PutObjectResult%%// 获取上传的文件PartfilePartrequest.getPart(file);StringfileNameUUID.randomUUID().toString()filePart.getSubmittedFileName().substring(filePart.getSubmittedFileName().lastIndexOf(.));// 阿里云OSS配置Stringendpointyour-oss-endpoint;StringaccessKeyIdyour-access-key;StringaccessKeySecretyour-secret-key;StringbucketNameyour-bucket;// 上传到OSSOSSClientossClientnewOSSClient(endpoint,accessKeyId,accessKeySecret);try{PutObjectResultresultossClient.putObject(bucketName,images/fileName,filePart.getInputStream());out.print({\url\:\https://bucketName.endpoint/images/fileName\});}catch(Exceptione){response.setStatus(500);out.print({\error\:\e.getMessage()\});}finally{ossClient.shutdown();}%方案二MathJax公式处理免费MathJax { tex: { inlineMath: [[$, $]], displayMath: [[$$, $$]] }, svg: { fontCache: global } };Office文件导入方案穷学生版使用mammoth.js实现.docx转HTMLimportmammothfrommammoth;functionhandleFileUpload(file){constreadernewFileReader();reader.onloadfunction(event){mammoth.extractRawText({arrayBuffer:event.target.result}).then(function(result){// 处理文本内容editor.execCommand(insertHtml,result.value);}).catch(function(error){console.error(error);});};reader.readAsArrayBuffer(file);}福利时间硬核学习交友群作为即将毕业的准社畜我深刻体会到 毕业设计难导师要求越来越高 找工作难简历石沉大海 独自开发难BUG改到怀疑人生所以建了个QQ群223813913来一起 接外包赚零花钱买皮肤不香吗 组队参加比赛抱大腿必备 技术交流互助解决玄学BUG 资源共享避免重复造轮子新人福利 加群红包1-99元拼手气时间 推荐奖励20%起最高50% 等级晋升制度青铜→王者举个推荐一个1万的单子黄金会员直接拿5000比实习工资香多了吧当然技术才是王道钱只是意外收获卑微求职环节各位大佬师兄师姐小弟即将毕业求个内推机会技能点JSP后端开发老派但扎实Vue前端开发紧跟潮流CMS系统搭建毕设练手项目阿里云部署折腾出来的经验保证加班不喊累咖啡续命BUG修得快谷歌是我老师学习能力强CSDN常驻用户程序员求职秘诀“简历写得好面试少不了项目有亮点offer不会远”快来群里一起玩耍吧 QQ群223813913群内不定期掉落外包项目、学习资料、面试经验复制插件目录引入插件文件UEditor 1.4.3.3示例注意不要重复引入jquery如果您的项目已经引入了jq则不用再引入jq-1.4在工具栏中增加插件按钮//工具栏上的所有的功能按钮和下拉框可以在new编辑器的实例时选择自己需要的重新定义toolbars:[[fullscreen,source,|,zycapture,|,wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf]]初始化控件varposwindow.location.href.lastIndexOf(/);varapi[window.location.href.substr(0,pos1),asp/upload.asp].join();WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:,//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});//加载控件注意如果接口字段名称不是file请配置FileFieldName。ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch匹配图片地址如果服务器返回的是JSON则需要通过正则匹配ImageMatch:,点击参考链接配置ImageUrl为图片地址增加域名如果服务器返回的图片地址是相对路径可通过此属性添加自定义域名。ImageUrl:,点击查看详细教程配置SESSION如果接口有权限验证登陆验证SESSION验证请配置COOKIE。或取消权限验证。参考http://www.ncmem.com/doc/view.aspx?id8602DDBF62374D189725BF17367125F3效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片下载示例点击下载完整示例
百度umeditor如何支持从Word文档直接导入图文混排内容？
【技术日记一个贵州大学生的JSPVue3 CMS升级之路】同学们今天又是被JSP和UEditor折磨的一天我边嗦着酸汤粉边敲下这行字屏幕上的Tomcat日志第42次报错。作为贵州山区走出来的程序猿自封的我深知在预算99元的情况下实现Word一键粘贴多端公式渲染有多刺激——这简直比用JSP写微服务还离谱当前系统装备清单️前端装备Vue3 CLI未来要升级到最新版✏️编辑器百度UEditor老当益壮后端武器JSP经典永流传️数据库MySQL关系型数据库扛把子☁️云存储阿里云OSS存图必备开发环境Eclipse Jee 自己的破电脑当服务器技术升级方案穷学生版方案一UEditor魔改版 粘贴插件零预算⭐// 前端部分 - 扩展UEditor配置UE.registerUI(wordpaste,function(editor){varbtnnewUE.ui.Button({name:wordpaste,title:粘贴Word内容,onclick:function(){// 粘贴Word内容处理editor.execCommand(insertHtml,);// 监听粘贴事件document.getElementById(word-paste-area).addEventListener(paste,function(e){handleWordPaste(e,editor);});}});returnbtn;},5);functionhandleWordPaste(e,editor){// 获取剪切板内容varitems(e.clipboardData||window.clipboardData).items;// 处理图片上传for(leti0;iitems.length;i){if(items[i].type.indexOf(image)!-1){varblobitems[i].getAsFile();uploadImage(blob,editor);}}// 保留其他格式setTimeout((){varcontentdocument.getElementById(word-paste-area).innerHTML;editor.execCommand(insertHtml,content);document.getElementById(word-paste-area).remove();},500);}functionuploadImage(blob,editor){// 这里写图片上传逻辑}// 后端JSP图片上传处理% pageimportcom.aliyun.oss.OSSClient%% pageimportcom.aliyun.oss.model.PutObjectResult%%// 获取上传的文件PartfilePartrequest.getPart(file);StringfileNameUUID.randomUUID().toString()filePart.getSubmittedFileName().substring(filePart.getSubmittedFileName().lastIndexOf(.));// 阿里云OSS配置Stringendpointyour-oss-endpoint;StringaccessKeyIdyour-access-key;StringaccessKeySecretyour-secret-key;StringbucketNameyour-bucket;// 上传到OSSOSSClientossClientnewOSSClient(endpoint,accessKeyId,accessKeySecret);try{PutObjectResultresultossClient.putObject(bucketName,images/fileName,filePart.getInputStream());out.print({\url\:\https://bucketName.endpoint/images/fileName\});}catch(Exceptione){response.setStatus(500);out.print({\error\:\e.getMessage()\});}finally{ossClient.shutdown();}%方案二MathJax公式处理免费MathJax { tex: { inlineMath: [[$, $]], displayMath: [[$$, $$]] }, svg: { fontCache: global } };Office文件导入方案穷学生版使用mammoth.js实现.docx转HTMLimportmammothfrommammoth;functionhandleFileUpload(file){constreadernewFileReader();reader.onloadfunction(event){mammoth.extractRawText({arrayBuffer:event.target.result}).then(function(result){// 处理文本内容editor.execCommand(insertHtml,result.value);}).catch(function(error){console.error(error);});};reader.readAsArrayBuffer(file);}福利时间硬核学习交友群作为即将毕业的准社畜我深刻体会到 毕业设计难导师要求越来越高 找工作难简历石沉大海 独自开发难BUG改到怀疑人生所以建了个QQ群223813913来一起 接外包赚零花钱买皮肤不香吗 组队参加比赛抱大腿必备 技术交流互助解决玄学BUG 资源共享避免重复造轮子新人福利 加群红包1-99元拼手气时间 推荐奖励20%起最高50% 等级晋升制度青铜→王者举个推荐一个1万的单子黄金会员直接拿5000比实习工资香多了吧当然技术才是王道钱只是意外收获卑微求职环节各位大佬师兄师姐小弟即将毕业求个内推机会技能点JSP后端开发老派但扎实Vue前端开发紧跟潮流CMS系统搭建毕设练手项目阿里云部署折腾出来的经验保证加班不喊累咖啡续命BUG修得快谷歌是我老师学习能力强CSDN常驻用户程序员求职秘诀“简历写得好面试少不了项目有亮点offer不会远”快来群里一起玩耍吧 QQ群223813913群内不定期掉落外包项目、学习资料、面试经验复制插件目录引入插件文件UEditor 1.4.3.3示例注意不要重复引入jquery如果您的项目已经引入了jq则不用再引入jq-1.4在工具栏中增加插件按钮//工具栏上的所有的功能按钮和下拉框可以在new编辑器的实例时选择自己需要的重新定义toolbars:[[fullscreen,source,|,zycapture,|,wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,|,importword,exportword,importpdf]]初始化控件varposwindow.location.href.lastIndexOf(/);varapi[window.location.href.substr(0,pos1),asp/upload.asp].join();WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:api,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:,//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});//加载控件注意如果接口字段名称不是file请配置FileFieldName。ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch匹配图片地址如果服务器返回的是JSON则需要通过正则匹配ImageMatch:,点击参考链接配置ImageUrl为图片地址增加域名如果服务器返回的图片地址是相对路径可通过此属性添加自定义域名。ImageUrl:,点击查看详细教程配置SESSION如果接口有权限验证登陆验证SESSION验证请配置COOKIE。或取消权限验证。参考http://www.ncmem.com/doc/view.aspx?id8602DDBF62374D189725BF17367125F3效果编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片下载示例点击下载完整示例
