白云高端网站建设案例杭州制作网站的公司简介

白云高端网站建设案例,杭州制作网站的公司简介,肇庆cms建站系统,嵌入式开发软件一、需求分析与技术选型#xff08;学生版#xff09; “导师说CMS要支持Word一键粘贴#xff0c;还要保留Latex公式和表格样式#xff1f;这比让我 debug 隔壁宿舍的WiFi还刺激#xff01;” 核心需求拆解#xff1a; 前端#xff1a;TinyMCE5 编辑器增加 Word 粘贴…一、需求分析与技术选型学生版“导师说CMS要支持Word一键粘贴还要保留Latex公式和表格样式这比让我 debug 隔壁宿舍的WiFi还刺激”核心需求拆解前端TinyMCE5 编辑器增加 Word 粘贴按钮支持样式保留后端JSP 处理上传的 Word 文件解析内容并返回结构化数据存储阿里云 OSS 存储图片MySQL 存文章数据公式渲染Latex → MathML 转换多终端适配预算99元能白嫖绝不付费技术栈前端Vue3 TinyMCE5 KaTeX公式渲染后端JSP Apache POI解析 Word 阿里云 OSS SDK开发工具Eclipse JEE别问问就是学校要求服务器阿里云 ECS本地测试先用localhost二、前端实现Vue3 TinyMCE51. 安装 TinyMCE 和插件npminstalltinymce/tinymce-vue tinymce --save2. 编辑器组件代码import { ref } from vue; import Editor from tinymce/tinymce-vue; import tinymce/themes/silver; import tinymce/plugins/paste; import tinymce/plugins/table; import tinymce/plugins/image; import tinymce/plugins/advlist; const content ref(); const editorInit { height: 500, plugins: paste table image advlist, toolbar: wordpaste | styleselect | bold italic | table | image, setup: (editor) { editor.ui.registry.addButton(wordpaste, { text: Word粘贴, onAction: () { editor.execCommand(mceInsertContent, false, div classword-paste-placeholder请在此粘贴Word内容/div ); } }); }, paste_data_images: true, // 允许粘贴图片 images_upload_handler: (blobInfo, success) uploadImage(blobInfo, success) }; // 处理粘贴内容 const handlePaste (e) { const wordHtml e.clipboardData.getData(text/html); if (wordHtml.includes(mso-)) { // 判断是否为Word内容 fetch(/api/parseWord, { method: POST, body: JSON.stringify({ html: wordHtml }), headers: { Content-Type: application/json } }) .then(res res.json()) .then(data { content.value data.processedHtml; }); } }; // 图片上传到OSS const uploadImage async (blobInfo, success) { const formData new FormData(); formData.append(file, blobInfo.blob(), blobInfo.filename()); const res await fetch(/api/uploadImage, { method: POST, body: formData }); const data await res.json(); success(data.url); // 返回图片URL给编辑器 };三、后端实现JSP Apache POI1. Word 解析接口// WordParserServlet.javaWebServlet(/api/parseWord)MultipartConfigpublicclassWordParserServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{// 1. 读取前端传来的HTML模拟Word粘贴StringBuildersbnewStringBuilder();Stringline;while((linerequest.getReader().readLine())!null){sb.append(line);}Stringhtmlsb.toString();// 2. 提取图片并上传OSS伪代码需配置阿里云SDKPatternimgPatternPattern.compile(]src\data:image/(.*?);base64,([^\])\);MatchermatcherimgPattern.matcher(html);while(matcher.find()){Stringbase64Datamatcher.group(2);byte[]imgBytesBase64.getDecoder().decode(base64Data);StringossUrlOSSUploader.upload(imgBytes,word-images/UUID.randomUUID().png);htmlhtml.replace(matcher.group(0),);}// 3. 处理Latex公式调用Node服务或本地转换htmlhtml.replaceAll(\\$\\$(.?)\\$\\$,$1);// 4. 返回处理后的HTMLresponse.setContentType(application/json);response.getWriter().write({\processedHtml\: \html.replace(\,\\\)\});}}2. 图片上传接口// ImageUploadServlet.javaWebServlet(/api/uploadImage)MultipartConfigpublicclassImageUploadServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{PartfilePartrequest.getPart(file);InputStreamfileContentfilePart.getInputStream();StringossUrlOSSUploader.upload(fileContent,editor-images/UUID.randomUUID().png);response.setContentType(application/json);response.getWriter().write({\url\: \ossUrl\});}}四、阿里云 OSS 上传工具类// OSSUploader.javaimportcom.aliyun.oss.OSS;importcom.aliyun.oss.OSSClientBuilder;publicclassOSSUploader{privatestaticfinalStringENDPOINTyour-oss-endpoint;privatestaticfinalStringACCESS_KEYyour-access-key;privatestaticfinalStringSECRET_KEYyour-secret-key;privatestaticfinalStringBUCKETyour-bucket;publicstaticStringupload(byte[]data,StringobjectName){OSSossClientnewOSSClientBuilder().build(ENDPOINT,ACCESS_KEY,SECRET_KEY);ossClient.putObject(BUCKET,objectName,newByteArrayInputStream(data));ossClient.shutdown();returnhttps://BUCKET.ENDPOINT/objectName;}publicstaticStringupload(InputStreaminputStream,StringobjectName){OSSossClientnewOSSClientBuilder().build(ENDPOINT,ACCESS_KEY,SECRET_KEY);ossClient.putObject(BUCKET,objectName,inputStream);ossClient.shutdown();returnhttps://BUCKET.ENDPOINT/objectName;}}五、公式渲染方案KaTeX在前端引入 KaTeX处理 Latex 公式在 TinyMCE 初始化后动态渲染公式// 在 mounted 或编辑器初始化后调用functionrenderMath(){document.querySelectorAll(.mathml).forEach(el{katex.render(el.textContent,el,{throwOnError:false});});}六、生存指南与求职彩蛋白嫖资源阿里云 OSS 学生套餐6元/月GitHub Student Pack免费域名JetBrainsTinyMCE 免费版无PowerPaste但可用开源替代求职暗号群内喊“内推学校”触发师哥师姐雷达简历亮点# 技术栈 - 精通用99元预算完成企业级需求 - 擅长在JSP和Vue3之间搭建“跨世代”桥梁赚钱攻略群内推荐会员机制实测日赚200元技巧// 伪代码计算提成publicdoublecalcCommission(doubleorderAmount){returnorderAmount*0.2;// 青铜会员// 黄金会员先拉5个下线再说}七、最终效果![示意图TinyMCE编辑器中显示Word内容包含表格、图片、公式右侧为工具栏新增的“Word粘贴”按钮]实际效果取决于你的头发浓度加入技术交流群获取完整代码QQ群223813913暗号“我要用JSP征服世界”群文件包含tinymce-word-paste-plugin.zip前端插件jsp-word-parser.war后端打包《如何用99元预算活过毕业设计.pdf》温馨提示本群不保证月入过万但保证能学会用Excel算提成复制插件安装jquerynpm install jquery在组件中引入// 引入tinymce-vueimportEditorfromtinymce/tinymce-vueimport{WordPaster}from../../static/WordPaster/js/wimport{zyOffice}from../../static/zyOffice/js/oimport{zyCapture}from../../static/zyCapture/z添加工具栏//添加导入excel工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importExcel()}varregister$1function(editor){editor.ui.registry.addButton(excelimport,{text:,tooltip:导入Excel文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(excelimport,{text:,tooltip:导入Excel文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(excelimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加word转图片工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importWordToImg()}varregister$1function(editor){editor.ui.registry.addButton(importwordtoimg,{text:,tooltip:Word转图片,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(importwordtoimg,{text:,tooltip:Word转图片,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(importwordtoimg,function(editor){Buttons.register(editor);});}Plugin();}());//添加粘贴网络图片工具栏按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().UploadNetImg()}varregister$1function(editor){editor.ui.registry.addButton(netpaster,{text:,tooltip:网络图片一键上传,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(netpaster,{text:,tooltip:网络图片一键上传,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(netpaster,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入PDF按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().ImportPDF()}varregister$1function(editor){editor.ui.registry.addButton(pdfimport,{text:,tooltip:导入pdf文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pdfimport,{text:,tooltip:导入pdf文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pdfimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入PPT按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importPPT()}varregister$1function(editor){editor.ui.registry.addButton(pptimport,{text:,tooltip:导入PowerPoint文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pptimport,{text:,tooltip:导入PowerPoint文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pptimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加导入WORD按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importWord()}varregister$1function(editor){editor.ui.registry.addButton(wordimport,{text:,tooltip:导入Word文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordimport,{text:,tooltip:导入Word文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加WORD粘贴按钮(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);varicohttp://localhost:8080/static/WordPaster/plugin/word.pngfunctionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).PasteManual()}varregister$1function(editor){editor.ui.registry.addButton(wordpaster,{text:,tooltip:Word一键粘贴,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordpaster,{text:,tooltip:Word一键粘贴,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordpaster,function(editor){Buttons.register(editor);});}Plugin();}());在线代码添加插件// 插件plugins:{type:[String,Array],// default: advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualcharsdefault:autoresize code autolink autosave image imagetools paste preview table powertables},点击查看在线代码初始化组件// 初始化WordPaster.getInstance({// 上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,// 为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:http://localhost:8891{url},// 设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,// 提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:})在页面中引入组件功能演示编辑器在编辑器中增加功能按钮导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片。下载示例点击下载完整示例