核心内容摘要
17·C7起草口：解锁未来交通新维度
【西安码农の暴富日记】嘿各位十三朝古都的技术大拿们我是老张西安回民街边撸肉夹馍边撸代码的Java程序猿。
最近接了个骚需求——给CKEditor装个Office全家桶导入微信内容一键吸星大法插件客户要求连我二舅的老年机都能用
技术方案CKEditor魔改三件套
前端Vue3插件开发肉夹馍版// src/plugins/office-ninja.jsimportClassicEditorfromckeditor/ckeditor5-build-classic;exportdefaultfunctioninstallOfficeNinja(editorConfig){//
注册阿里云OSS上传适配器classOSSUploadAdapter{constructor(loader){this.loaderloader;}asyncupload(){constfileawaitthis.loader.file;constformDatanewFormData();formData.append(file,file);// 调用后端上传接口西安肉夹馍式注释constresponseawaitfetch(/api/uploadToOSS,{method:POST,body:formData});return{default:awaitresponse.text()};// 返回图片URL}}//
注册Office导入按钮editorConfig.toolbar[...editorConfig.toolbar,officeImport];editorConfig.extraPlugins[(editor){editor.ui.componentFactory.add(officeImport,(locale){constbuttoneditor.ui.component.create(button);button.set({label:Office吸星大法,icon:...,// 放个Word图标action:(){constinputdocument.createElement(input);input.typefile;input.accept.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf;input.onchangeasync(e){constfilee.target.files[0];consthtmlawaitconvertOfficeToHtml(file);// 调用后端转换editor.setData(html);};input.click();}});returnbutton;});}];//
注册微信内容解析按钮editorConfig.extraPlugins.push((editor){editor.ui.componentFactory.add(wechatImport,(locale){constbuttoneditor.ui.component.create(button);button.set({label:微信内容吸星,icon:...,// 放个微信图标action:async(){consturlprompt(输入公众号文章URL);consthtmlawaitfetch(/api/parseWechat?url${encodeURIComponent(url)}).then(resres.text());editor.setData(html);}});returnbutton;});});//
注册LaTeX转MathML插件关键editorConfig.extraPlugins.push((editor){editor.plugins.get(MathType).then((){editor.conversion.for(upcast).elementToElement({view:{name:span,classes:latex-formula},model:(viewElement,modelWriter){constlatexviewElement.getChild(
.data;returnmodelWriter.createElement(mathml,{mathml:convertLatexToMathML(latex)// 调用转换函数});}});});});}// 西安特色函数凉皮式LaTeX转换实际要用MathJaxfunctionconvertLatexToMathML(latex){// 这里应该是调用MathJax API的简化版return${latex.replace(/\$/g,)};}
后端Java处理兵马俑版// OfficeController.java - 西安城墙根下的代码RestControllerRequestMapping(/api)publicclassOfficeController{Value(${oss.endpoint})privateStringossEndpoint;//
阿里云OSS上传接口PostMapping(/uploadToOSS)publicResponseEntityuploadToOSS(RequestParam(file)MultipartFilefile){try{StringobjectKeyoffice/UUID.randomUUID()file.getOriginalFilename();OSSossClientnewOSSClientBuilder().build(ossEndpoint,your-key,your-secret);ossClient.putObject(your-bucket,objectKey,file.getInputStream());// 返回图片URL带防盗链参数StringurlString.format(https://%s.aliyuncs.com/%s?x-oss-processstyle/thumb,your-bucket,objectKey);returnResponseEntity.ok(url);}catch(Exceptione){returnResponseEntity.badRequest().body(上传失败就像在钟楼转圈圈);}}//
Office转HTML接口简化版PostMapping(/convertOffice)publicResponseEntityconvertOffice(RequestParam(file)MultipartFilefile){try{// 实际项目要用Apache POI Aspose付费版// 这里用凉皮式伪代码代替Stringhtmlfile.getOriginalFilename();// 处理表格肉夹馍式表格if(file.getOriginalFilename().endsWith(.xlsx)){html数据1数据2;}// 处理公式兵马俑式公式htmlhtml.replaceAll(\\$\\$(.*?)\\$\\$,$$$1$$);returnResponseEntity.ok(html);}catch(Exceptione){returnResponseEntity.badRequest().body(转换失败比在回民街找车位还难);}}//
微信文章解析接口GetMapping(/parseWechat)publicResponseEntityparseWechat(RequestParamStringurl){try{// 实际要用Jsoup爬取清洗// 这里用凉皮式伪代码Stringhtml;html从微信吸来的标题;html这里是正文内容...;html;returnResponseEntity.ok(html);}catch(Exceptione){returnResponseEntity.badRequest().body(解析失败就像在曲江池捞月亮);}}}
部署方案大雁塔式三层架构前端部署npm run build生成dist扔到Nginx的/usr/share/nginx/html配置OSS跨域location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; }后端部署Eclipse导出war包扔到Tomcat的webapps/ROOT配置application.propertiesoss.endpointoss-cn-shanghai.aliyuncs.com oss.bucketyour-bucket-name数据库配置CREATETABLEreferral_records(idINTAUTO_INCREMENTPRIMARYKEY,referrer_idVARCHAR(
,customer_idVARCHAR(
,amountDECIMAL(10,
,create_timeDATETIMEDEFAULTCURRENT_TIMESTAMP);
赚钱攻略回民街式躺赚新人福利系统// QQ群红包机器人简化版RestControllerRequestMapping(/qq-group)publicclassQQGroupController{GetMapping(/redpacket)publicResponseEntitysendRedPacket(RequestParamStringqq){doubleamountMath.random()*991;// 实际要调用QQ机器人APIreturnResponseEntity.ok(String.format(恭喜%s获得%.2f元红包,qq,amount));}}提成计算系统// 每月1号自动分账西安肉夹馍式定时任务Scheduled(cron0 0 0 1 * ?)publicvoidcalculateCommission(){ListrecordsreferralRepository.findAll();records.forEach(r-{doublecommissionr.getAmount()*
2;// 调用支付宝转账APISystem.out.println(给r.getReferrerId()转账commission元);});}
技术难点突破公式转换方案前端用MathJaxMathJax.typesetPromise([document.getElementById(formula-container)]);微信内容解析用Jsoup清洗HTMLpublicStringcleanWechatHtml(Stringhtml){DocumentdocJsoup.parse(html);// 移除广告doc.select(.js_ad_content).remove();// 提取正文returndoc.select(#js_content).html();}
成本控制西安特色版阿里云费用ECS突发性能t5实例65元/月比凉皮还便宜OSS存储
12元/GB/月能存1000个Word文档总计680元/年剩下的钱够吃50碗羊肉泡馍开发成本主要时间花在公式转换上其他功能直接集成现有库现在我的QQ群223813913已经聚集了300多位技术大牛上周刚成交了一个5万的政府项目光提成就1万兄弟们这波真的可以冲悄悄说群里还有西安老乡专属福利加群报暗号冰峰汽水额外送技术文档大礼包复制插件说明此教程以CKEditor
x为例使用其他编辑器的查看对应教程。
将下列文件夹复制到项目中/WordPaster/ckeditor/plugins/imagepaster/ckeditor/plugins/netpaster/ckeditor/plugins/pptpaster/ckeditor/plugins/pdfimport上传插件上传插件文件夹将imagepaster,netpaster文件夹上传到现有项目ckeditor/plugins目录中在工具栏中增加插件按钮CKEDITOR.replace(editor1,{extraPlugins:zycapture,imagepaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,importword,exportword,importpdf,keystrokes:[[CKEDITOR.CTRL86/*V*/,imagepaster]],on:{currentInstance:function(){//多个编辑器时为控件设置当前编辑器WordPaster.getInstance().SetEditor(CKEDITOR.currentInstance);window.zyCapture.setEditor(this);window.zyOffice.SetEditor(this);}},//https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-allowedContentallowedContent:true//不过滤样式});引用js初始化控件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:,Cookie:PHPSESSID});//加载控件配置上传接口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:,Cookie:%clientCookie%,event:{dataReady:function(e){//e.word,//e.imgs:tag1,tag2,tag3console.log(e.imgs)}}});//加载控件注意
如果接口字段名称不是file请配置FileFieldName。
ueditor接口中使用的upfile字段点击查看详细教程配置ImageMatch用于匹配JSON数据点击查看详细教程配置ImageUrl用于为图片增加域名前缀点击查看详细教程配置Session如果接口有权限验证登陆验证SESSION验证请配置COOKIE。
或取消权限验证。
参考点击查看详细教程说明
请先测试您的接口点击查看详细教程功能演示编辑器界面导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。
Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。
导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。
导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。
上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例