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

TinyMCE4支持word粘贴超链接和锚点

news 2026/6/3 22:29:27

一、需求分析与技术选型（学生版）

“导师说CMS要支持Word一键粘贴，还要保留Latex公式和表格样式？这比让我 debug 隔壁宿舍的WiFi还刺激！”

核心需求拆解：
  1. 前端：TinyMCE5 编辑器增加 Word 粘贴按钮，支持样式保留
  2. 后端：JSP 处理上传的 Word 文件，解析内容并返回结构化数据
  3. 存储：阿里云 OSS 存储图片，MySQL 存文章数据
  4. 公式渲染：Latex → MathML 转换，多终端适配
  5. 预算：99元（能白嫖绝不付费）
技术栈：
  • 前端：Vue3 + TinyMCE5 + KaTeX（公式渲染）
  • 后端：JSP + Apache POI（解析 Word） + 阿里云 OSS SDK
  • 开发工具：Eclipse JEE（别问，问就是学校要求）
  • 服务器：阿里云 ECS（本地测试先用localhost）

二、前端实现（Vue3 + TinyMCE5）

1. 安装 TinyMCE 和插件
npminstall@tinymce/tinymce-vue tinymce --save
2. 编辑器组件代码
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 class="word-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 POI）

1. Word 解析接口
// WordParserServlet.java@WebServlet("/api/parseWord")@MultipartConfigpublicclassWordParserServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{// 1. 读取前端传来的HTML（模拟Word粘贴）StringBuildersb=newStringBuilder();Stringline;while((line=request.getReader().readLine())!=null){sb.append(line);}Stringhtml=sb.toString();// 2. 提取图片并上传OSS（伪代码，需配置阿里云SDK）PatternimgPattern=Pattern.compile("]+src=\"data:image/(.*?);base64,([^\"]+)\"");Matchermatcher=imgPattern.matcher(html);while(matcher.find()){Stringbase64Data=matcher.group(2);byte[]imgBytes=Base64.getDecoder().decode(base64Data);StringossUrl=OSSUploader.upload(imgBytes,"word-images/"+UUID.randomUUID()+".png");html=html.replace(matcher.group(0),"");}// 3. 处理Latex公式（调用Node服务或本地转换）html=html.replaceAll("\\$\\$(.+?)\\$\\$","$1");// 4. 返回处理后的HTMLresponse.setContentType("application/json");response.getWriter().write("{\"processedHtml\": \""+html.replace("\"","\\\"")+"\"}");}}
2. 图片上传接口
// ImageUploadServlet.java@WebServlet("/api/uploadImage")@MultipartConfigpublicclassImageUploadServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{PartfilePart=request.getPart("file");InputStreamfileContent=filePart.getInputStream();StringossUrl=OSSUploader.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{privatestaticfinalStringENDPOINT="your-oss-endpoint";privatestaticfinalStringACCESS_KEY="your-access-key";privatestaticfinalStringSECRET_KEY="your-secret-key";privatestaticfinalStringBUCKET="your-bucket";publicstaticStringupload(byte[]data,StringobjectName){OSSossClient=newOSSClientBuilder().build(ENDPOINT,ACCESS_KEY,SECRET_KEY);ossClient.putObject(BUCKET,objectName,newByteArrayInputStream(data));ossClient.shutdown();return"https://"+BUCKET+"."+ENDPOINT+"/"+objectName;}publicstaticStringupload(InputStreaminputStream,StringobjectName){OSSossClient=newOSSClientBuilder().build(ENDPOINT,ACCESS_KEY,SECRET_KEY);ossClient.putObject(BUCKET,objectName,inputStream);ossClient.shutdown();return"https://"+BUCKET+"."+ENDPOINT+"/"+objectName;}}

五、公式渲染方案（KaTeX）

在前端引入 KaTeX，处理 Latex 公式：

在 TinyMCE 初始化后动态渲染公式：
// 在 mounted 或编辑器初始化后调用functionrenderMath(){document.querySelectorAll('.mathml').forEach(el=>{katex.render(el.textContent,el,{throwOnError:false});});}
六、生存指南与求职彩蛋
  1. 白嫖资源：
    • 阿里云 OSS 学生套餐（6元/月）
    • GitHub Student Pack（免费域名+JetBrains）
    • TinyMCE 免费版（无PowerPaste，但可用开源替代）
  2. 求职暗号：
    • 群内喊“内推+学校”触发师哥师姐雷达
    • 简历亮点：
      # 技术栈 - 精通用99元预算完成企业级需求 - 擅长在JSP和Vue3之间搭建“跨世代”桥梁
  3. 赚钱攻略：
    • 群内推荐会员机制（实测日赚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算提成）
复制插件
安装jquery
npm install jquery
在组件中引入
// 引入tinymce-vueimportEditorfrom'@tinymce/tinymce-vue'import{WordPaster}from'../../static/WordPaster/js/w'import{zyOffice}from'../../static/zyOffice/js/o'import{zyCapture}from'../../static/zyCapture/z'
添加工具栏
//添加导入excel工具栏按钮(function(){'use strict';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importExcel()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importWordToImg()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().UploadNetImg()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().ImportPDF()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importPPT()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importWord()}varregister$1=function(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';varglobal=tinymce.util.Tools.resolve('tinymce.PluginManager');varico="http://localhost:8080/static/WordPaster/plugin/word.png"functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).PasteManual()}varregister$1=function(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 visualchars'default:'autoresize code autolink autosave image imagetools paste preview table powertables'},
点击查看在线代码
初始化组件
// 初始化WordPaster.getInstance({// 上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203edPostUrl:'http://localhost:8891/upload.aspx',// 为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936ImageUrl:'http://localhost:8891{url}',// 设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:'file',// 提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1ImageMatch:''})
在页面中引入组件
功能演示
编辑器
在编辑器中增加功能按钮
导入Word文档,支持doc,docx
导入Excel文档,支持xls,xlsx
粘贴Word
一键粘贴Word内容，自动上传Word中的图片，保留文字样式。
Word转图片
一键导入Word文件，并将Word文件转换成图片上传到服务器中。
导入PDF
一键导入PDF文件，并将PDF转换成图片上传到服务器中。
导入PPT
一键导入PPT文件，并将PPT转换成图片上传到服务器中。
上传网络图片
一键自动上传网络图片。
下载示例
点击下载完整示例





http://www.cnnetsun.cn/news/3367.html






相关文章：


  • 
TinyMCE6粘贴ppt幻灯片转存到网页

    • 

  • 
TinyMCE5粘贴Latex公式到html富文本

    • 

  • 
TinyMCE4支持跨平台ppt音频视频嵌入

    • 

  • 
TinyMCE4支持政府公文word图片转存

    • 

  • 
TinyMCE6处理ppt幻灯片图文混排转存

    • 

  • 
TinyMCE4粘贴微信公众号内容自动排版

    • 

  • 
中小企也怕 DDoS？低成本高防护的实战攻略来了

    • 

  • 
从原理到实战：一文读懂 DDoS 防御的核心逻辑

    • 

  • 
如何建设一个真正高效的智能制造工厂？从零到落地的完整路径

    • 

  • 
制造智能体如何帮助企业降低废品率？

    • 

  • 
windows录屏软件在精不在多，2025年8个录屏神器有你用过的吗

    • 

  • 
7 款热门录屏软件深度对比分享：覆盖全场景录制需求

    • 

  • 
Wan2.2-T2V-A14B在农业科技推广视频中的可视化应用

    • 

  • 
计算机毕业设计|基于springboot + vue健身房管理系统(源码+数据库+文档)

    • 

  • 
计算机毕业设计|基于springboot + vue非遗传承文化管理系统(源码+数据库+文档)

    • 

  • 
微信双设备同时登录终极教程：告别单一设备限制

    • 

  • 
Holo1.5开源：AI代理交互能力再突破，38.5%年增长市场迎新引擎

    • 

  • 
QuantConnect量化交易教程：3天掌握专业级算法交易技能

    • 

  • 
掌握OpenPNM孔隙网络模拟：从入门到精通的多孔介质分析指南

    • 

  • 
YouCompleteMe智能补全插件：让Vim拥有IDE级别的代码补全体验

    • 

  • 
小兔鲜儿微信小程序开发全攻略：基于uniapp和Vue3的电商项目实战

    • 

  • 
Patroni高可用性部署完整指南：从零构建PostgreSQL集群

    • 

  • 
为什么你需要立即卸载OneDrive？5分钟完成彻底清理的完整方案

    • 

  • 
TradingView数据提取神器：3分钟搞定金融数据收集的完整攻略

    • 

  • 
终极手机投屏解决方案：3步实现跨设备无缝控制

    • 

  • 
downkyicore下载路径终极指南：快速定位你的视频文件

    • 

  • 
分布式训练终极指南：架构演进与性能突破深度解析

    • 

  • 
网易云音乐NCM文件格式转换工具完全使用手册

    • 

  • 
Sketch MeaXure终极指南：从零开始掌握设计标注神器

    • 

  • 
10分钟学会自动化创建Minecraft服务器包：新手完全指南

    •