做芯片制造企业信息化八成会遇到一个非常拧巴的需求工艺工程师要把CAD图纸贴进协同平台的TinyMCE编辑器里但贴进去之后不能是一张放大就花的图片必须是矢量随时能看清楚尺寸、层叠关系。今天我把这个问题彻底拆一遍从剪贴板原理到CAD转SVG再到TinyMCE插件的实现最后附上我在实际项目里踩过的坑给正在被这鬼需求折磨的同行一个可直接复制的答案。1. 问题拆解为什么CAD图纸不能直接“粘贴”成矢量1.1 剪贴板里到底装的是什么当你在AutoCAD或中望CAD里选中图形按CtrlCWindows剪贴板里并不只有一份数据而是一堆格式同时堆在里面CF_BITMAP位图、CF_ENHMETAFILE增强型图元矢量、CF_DIB甚至还有CAD自定义的内部对象格式。浏览器和TinyMCE对这些格式的“口味”完全不同。TinyMCE在监听到粘贴事件时最优先取的是text/html其次是image/png。你从CAD复制出来的位图格式会被当作图片贴进来而那个真正携带矢量信息的EMF格式浏览器根本不认直接被丢弃。也就是说不是TinyMCE故意不给你矢量而是标准的浏览器剪贴板协议里矢量被“降级”成了位图。剪贴板的这种多格式并行机制很多人都没意识到。日常在微信、Word里复制粘贴图片系统会自动选一个“最合适”的格式呈现出来操作者根本感觉不到。但到了CAD和Web编辑器这种跨域场景格式差异就赤裸裸暴露了。你以为复制的是“矢量图纸”浏览器拿到的却只是CAD软件顺手渲染的一张图片快照。这张快照虽然看起来和CAD界面一致但内在的数据结构和坐标信息已经全部丢失。1.2 TinyMCE拿到的只是“照片”当我们看到编辑框里“成功”出现一张图纸图片时别高兴太早。这张图往往是PNG或JPEG是CAD在复制时渲染的一张快照。快照有个致命问题它不保留图纸的智能结构。你用放大镜工具放大到200%没问题放大到500%就开始模糊矢量图纸量测还能带毫米单位精度图片里量出来的永远是像素。更麻烦的是这张图是扁平的看不到图层改不了颜色也没法关联原始的图号信息。对芯片制造这种以微米、纳米为单位的行业来说位图方案基本上等于不可用。我见到很多企业内部流程里工程师为了把图纸放进某个系统只能导出图片再上传结果评审会上一放大关键尺寸标注全是马赛克。有人退一步想那我导出超高分辨率PDF吧可PDF转成图片后依然是位图PDF的矢量优势在富文本编辑器里根本发挥不出来。TinyMCE接收到的就是一个普通图片对象后端存档也只是存了这张图片原始CAD数据和坐标关系彻底断开了后续想按图层检索、按图号追溯完全没有入口。1.3 芯片制造场景为什么不能接受位图芯片制造企业的图纸不只是给工程师自己看它要经过设计评审、工艺会签、供应商协同、质量追溯等一串环节。图纸里最关键的往往是尺寸标注、公差、层叠结构、焊盘位置。位图在传输和缩放过程中一旦失真可能直接造成产线工艺参数填错。这不是“图好不好看”的问题是质量问题、进度问题、甚至产品可靠性问题。所以这些企业通常要求无论图纸从哪个系统流转最终落进Web页面时图形必须矢量坐标必须可解析。这也是“CAD图纸粘贴到TinyMCE要保留矢量输出”这个需求的核心背景。芯片制造里的版图、封装图、掩模图每一层都对应不同的设计数据。如果丢掉了矢量结构等于把多层叠加工艺的图纸拍扁成一张图后面不管是做DFM检查还是查线宽都无从下手。更直接的是这种图纸通常涉及跨团队协作Fab厂、封装厂、设计公司之间要通过Web系统传递信息如果传递过程中矢量丢失责任界定也成了问题。所以这不是一个技术洁癖是业务刚需。2. 方案选型四种“矢量化”路径怎么选2.1 SVG浏览器里的通用矢量格式要解决TinyMCE的矢量输出我上手就只考虑一种格式SVG。原因很简单SVG是W3C的开放标准所有现代浏览器原生支持它本质上是XML文本能直接嵌进HTML也能以图片形式引用它还保留了坐标、路径、图层、颜色这些矢量信息。在TinyMCE里插入一段SVG其实和你插入一段HTML没有本质区别只要配置得当编辑器能把它当作文档的一部分来保存和编辑。而且SVG里每个元素都是DOM节点后续要做量测、高亮、批注都能用JS直接操作坐标这个能力是PNG给不了的。为了让你对SVG有直观认识我把一段最简单的SVG贴在这里svg xmlnshttp://www.w3.org/2000/svg width800 height600 viewBox0 0 800 600 rect x100 y80 width400 height300 fillnone stroke#000 stroke-width0.5 / line x1100 y1380 x2500 y2380 stroke#f00 stroke-width0.3 / /svg这段代码放到任意浏览器里就是两条清晰线条不管你怎么放大边缘都是顺滑的。转换工具把CAD图导成这样的SVG文件后TinyMCE才有“吃”下去的前提。SVG对图形结构的表达能力比PNG强太多它能把CAD里的图层分组、线型、颜色、文字都映射成对应的XML节点这样Web前端就能做到很多CAD软件才有的操作。2.2 为什么不考虑PDF或DXF有人会问PDF也是矢量为什么不用PDF在浏览器里能显示但TinyMCE这样的富文本编辑器没办法把PDF当作可编辑内容嵌入通常只能作为附件链接。如果强行用PDF.js渲染那等于在编辑器里再嵌一个查看器用户无法把图纸和周围文字排版在同一篇文档里协同评审的体验会很割裂。DXF/DWG更不用说了浏览器原生不解析必须靠插件或后端转换如果你要走这条路最后还是得把它渲染成SVG或位图。既然最终都绕回SVG不如一开始就统一。很多团队在选型时会把PDF列进候选主要原因是PDF在打印和签章场景里很成熟。但回到TinyMCE这个具体环境PDF的“不可编辑”属性反而成了大问题用户想在图旁边写一行审批意见或者把旧图替换成新图PDF连基本的插入、删除操作都绕不过重做。SVG作为DOM元素嵌入天然可以被编辑器管理可以随文档一起复制、剪切、替换甚至能被搜索引擎索引其中的文本。这个灵活性在信息化系统里非常宝贵。2.3 原生控件与第三方组件的取舍我也调研过直接用CAD厂商的Web控件方案比如Autodesk的在线查看器、开源组件等。这类组件确实能给你接近原生的CAD交互体验旋转、图层开关、测量都很好。但代价也明显需要单独部署服务、License成本高、页面体积大而且很难把它塞进TinyMCE的富文本世界中——用户在一个编辑框里既要写文字又要嵌入CAD窗口时组件之间的数据协同反而成了新的坑。相较之下转成SVG嵌入是“轻量但够用”的路线。对大多数文档协同、评审、归档场景已经足够如果以后需要更复杂的浏览能力可以把标题链接到专门的CAD看图器各司其职。我见过一个极端案例某厂为了在门户网站里展示图纸引入了一套重型CAD Web控件光前端加载脚本就有三兆打开页面要等五秒最后只是为了给领导看一张版图。这其实是用大炮打蚊子。在TinyMCE这种通用富文本编辑器里用户需要的是“图纸能出现在文档里、能缩放、能追溯源文件”而不是一个完整的CAD工作站。SVG方案已经覆盖了95%的需求剩下那部分交互交给专用查看器通过链接跳转反而让整个系统边界更清晰。2.4 推荐架构转换服务编辑器插件综合来看我最终在项目里落地的架构是后端做一个“图档转换服务”负责把DWG/DXF解析成SVG前端在TinyMCE里加一个自定义插件提供“插入CAD图纸”按钮用户选文件后上传到转换服务服务端返回SVG片段插件把它插到编辑器中。这套架构好处是把“矢量输出”变成了一个标准服务不管编辑器是TinyMCE还是别的富文本只要会调HTTP接口就能用。而且转换逻辑集中在后端后期换了绘图软件或改了CAD标准只改服务端不用动每个前端页面。这个架构在整个项目落地后我从两个方向验证过它的可扩展性一是转PDF、转PNG都可以并行挂在这个服务下满足不同消费端的需求二是转换任务可以异步化用户提交大图纸后先做文件校验和队列排队处理完成后再回调通知避免前端长时间等待。整个链路下来用户从上传到看到矢量SVG的时间控制在两三秒内。3. 实操CAD图纸转SVG并嵌入TinyMCE3.1 第一步把DWG/DXF转成干净的SVGCAD图纸转SVG不能直接“另存为”完事这里有几个非常关键的处理点。先说转换工具我试过好几条路线用AutoCAD自带的“另存为”功能在“文件类型”里找SVG部分版本支持但导出的SVG经常带一堆冗余命名空间和无关对象文件偏大。你可以先导出成PDF再用Inkscape或PDF转SVG的工具效果反而更干净。用开源库Ezdxf处理DXF格式脚本控制性强适合批量转换。芯片企业如果图纸是DXF格式强烈推荐。Ezdxf可以对实体逐一过滤、炸开块、设置图层颜色转换质量比很多图形界面工具都稳定。用商业转换服务或自行封装Cloud API。如果你内部有几十万张历史图纸建议优先调研市面上的转换引擎不要自己从头解析DWGDWG格式太封闭做出来维护成本极高。不管用哪条路你都必须在转换时处理三件事尺寸单位。CAD图纸的单位可能是毫米、英寸而SVG是基于像素坐标系。不换算就出乱子。通常做法是先读取图纸的单位设置再乘以统一比例系数比如1毫米3.7795275591像素96DPI。文本。最好把单行文字、多行文字转成SVG的text节点并嵌入字体子集否则中文可能变方块。更稳妥的方案是把文本转成路径曲线但这会让文件变大而且后期无法搜索、无法编辑按需取舍。图层颜色。CAD里红黄蓝各有含义很多图纸用颜色区分工序、区分层别。转换时保留stroke/fill颜色否则工艺评审时总有人问“这条线是多高层”。保留线型也一样虚线、点划线在SVG里对应stroke-dasharray别省略。转换完成后最好用浏览器打开SVG看一下外观要和CAD渲染一致。这里先确认一个底线SVG的viewBox不能随意丢。viewBox记录了图纸的坐标系范围后续如果要做测量所有坐标都靠它来映射。没有viewBox的SVG就像一个没有标尺的工程图看着对其实是废的。尺寸换算这个点我单独提醒一句。假设一张芯片封装图在CAD里标注的是毫米单位图框范围是100mm宽、80mm高。转成96DPI下的SVG时宽高就应该分别是100×3.7795377.9580×3.7795302.36。如果转换工具忘了换算直接按CAD内部数值输出在浏览器里这个图就会显示得很小或很大。这个问题光看SVG本身不容易发现必须拿一个已知尺寸的图做回归验证。3.2 第二步配置TinyMCE允许SVGTinyMCE默认的schema不允许SVG标签出现在内容里。如果你直接把SVG源码贴进“编辑HTML”里它会自作主张把标签过滤掉留下一堆路径数字或者空行。解决办法是在初始化配置里放开SVG相关元素。我用的配置大致是这样tinymce.init({ selector: #editor, height: 640, schema: html5, extended_valid_elements: [ svg[*], g[*], path[*], polyline[*], polygon[*], rect[*], circle[*], ellipse[*], line[*], text[*], tspan[*], defs[*], marker[*], use[*], pattern[*] ].join(,), valid_children: body[svg],div[svg],figure[svg], paste_data_images: true });这里每个配置都有讲究。schema: html5是基础HTML5标准里面SVG是合法的内嵌元素这样TinyMCE才愿意把SVG当作“正常内容”看待。extended_valid_elements逐项列出我要保留的SVG元素因为我不想在转换端把一次性标签都转成极简路径后续要做测量就必须保留g分组、text文本这类结构。valid_children允许SVG出现在body、div、figure等容器里如果你已经把SVG包在figure里这个配置能防止保存时被移出来变成孤儿节点。paste_data_images是告诉TinyMCE接受剪贴板里的图片数据虽然它不管矢量但如果你也允许位图兜底就把它开着。需要注意的是这个配置只对TinyMCE的“合法元素过滤器”生效。如果你项目里还接入了其他脏数据清洗工具比如后端的安全消毒库另一头也要同步放行SVG标签否则保存回显时还是会被砍掉。我在实际项目里曾经遇到一个情况TinyMCE配置已经放开了SVG编辑状态下一切正常但只要表单提交后端一个Java的过滤组件就把SVG当非法标签删除掉了。调试到后半夜才想起看服务端日志最后在后端白名单里补上svg、path、g这几个标签才彻底解决。3.3 第三步做“插入CAD图纸”插件配置好SVG后用户仍然不会满足于“手动把SVG代码粘贴进HTML源码”。我们要做的是在工具栏放一个按钮让工业工程师像点“插入图片”一样点一下。我实现的是一个TinyMCE插件核心逻辑分三步点击按钮后弹出一个文件选择器只允许选DWG/DXF文件。文件以multipart/form-data形式POST到后端转换服务服务端返回SVG字符串以及图纸的宽高比例。插件拿到SVG字符串和比例插入到编辑器内部。我选择用editor.insertContent()来插入SVG代码而不是先转blob再插img因为内联SVG保存后还能在文章里继续编辑也方便后续做测量标注。插件最小化代码可以是tinymce.PluginManager.add(cadinsert, function(editor, url) { var openDialog function () { var input document.createElement(input); input.type file; input.accept .dwg,.dxf; input.onchange function () { var file input.files[0]; if (!file) return; var fd new FormData(); fd.append(file, file); fetch(/api/cad/to-svg, { method: POST, body: fd }) .then(function (res) { return res.json(); }) .then(function (data) { if (data.code ! 0) { editor.notificationManager.open({ type: error, text: data.message }); return; } var svg data.svg; editor.insertContent(figure contenteditablefalse svg figcaption file.name /figcaption/figure); }) .catch(function () { editor.notificationManager.open({ type: error, text: 转换服务异常 }); }); }; input.click(); }; editor.ui.registry.addButton(cadinsert, { text: 插入CAD图纸, onAction: openDialog }); return { getMetadata: function () { return { name: CAD Insert Plugin, url: https://example.local }; } }; });这段代码直接放在初始化脚本前面然后在toolbar里加上cadinsert按钮就行了。我特意用contenteditablefalse把整个SVG包成不可编辑块这样做的好处是用户在编辑文字时不会不小心拖拽或改坏SVG内部的路径坐标需要调整大小时用户在图标上看到的还是一个整体符合图形对象的使用直觉。当然缺点也有就是用户不能再双击SVG里某个圆去改颜色因为默认的编辑交互不希望深入图元级别这个取舍在工作项目中完全合理。在实际使用中我发现这个插件还要考虑两个边界情况一是用户重复点击按钮上传同名文件最好做去重提示防止同页里出现两张重复图二是转换服务返回的SVG可能是经过后端压缩的前端要在插入前检查> CAD图纸如何矢量化嵌入TinyMCE编辑器？从剪贴板到SVG插件全解析
做芯片制造企业信息化八成会遇到一个非常拧巴的需求工艺工程师要把CAD图纸贴进协同平台的TinyMCE编辑器里但贴进去之后不能是一张放大就花的图片必须是矢量随时能看清楚尺寸、层叠关系。今天我把这个问题彻底拆一遍从剪贴板原理到CAD转SVG再到TinyMCE插件的实现最后附上我在实际项目里踩过的坑给正在被这鬼需求折磨的同行一个可直接复制的答案。1. 问题拆解为什么CAD图纸不能直接“粘贴”成矢量1.1 剪贴板里到底装的是什么当你在AutoCAD或中望CAD里选中图形按CtrlCWindows剪贴板里并不只有一份数据而是一堆格式同时堆在里面CF_BITMAP位图、CF_ENHMETAFILE增强型图元矢量、CF_DIB甚至还有CAD自定义的内部对象格式。浏览器和TinyMCE对这些格式的“口味”完全不同。TinyMCE在监听到粘贴事件时最优先取的是text/html其次是image/png。你从CAD复制出来的位图格式会被当作图片贴进来而那个真正携带矢量信息的EMF格式浏览器根本不认直接被丢弃。也就是说不是TinyMCE故意不给你矢量而是标准的浏览器剪贴板协议里矢量被“降级”成了位图。剪贴板的这种多格式并行机制很多人都没意识到。日常在微信、Word里复制粘贴图片系统会自动选一个“最合适”的格式呈现出来操作者根本感觉不到。但到了CAD和Web编辑器这种跨域场景格式差异就赤裸裸暴露了。你以为复制的是“矢量图纸”浏览器拿到的却只是CAD软件顺手渲染的一张图片快照。这张快照虽然看起来和CAD界面一致但内在的数据结构和坐标信息已经全部丢失。1.2 TinyMCE拿到的只是“照片”当我们看到编辑框里“成功”出现一张图纸图片时别高兴太早。这张图往往是PNG或JPEG是CAD在复制时渲染的一张快照。快照有个致命问题它不保留图纸的智能结构。你用放大镜工具放大到200%没问题放大到500%就开始模糊矢量图纸量测还能带毫米单位精度图片里量出来的永远是像素。更麻烦的是这张图是扁平的看不到图层改不了颜色也没法关联原始的图号信息。对芯片制造这种以微米、纳米为单位的行业来说位图方案基本上等于不可用。我见到很多企业内部流程里工程师为了把图纸放进某个系统只能导出图片再上传结果评审会上一放大关键尺寸标注全是马赛克。有人退一步想那我导出超高分辨率PDF吧可PDF转成图片后依然是位图PDF的矢量优势在富文本编辑器里根本发挥不出来。TinyMCE接收到的就是一个普通图片对象后端存档也只是存了这张图片原始CAD数据和坐标关系彻底断开了后续想按图层检索、按图号追溯完全没有入口。1.3 芯片制造场景为什么不能接受位图芯片制造企业的图纸不只是给工程师自己看它要经过设计评审、工艺会签、供应商协同、质量追溯等一串环节。图纸里最关键的往往是尺寸标注、公差、层叠结构、焊盘位置。位图在传输和缩放过程中一旦失真可能直接造成产线工艺参数填错。这不是“图好不好看”的问题是质量问题、进度问题、甚至产品可靠性问题。所以这些企业通常要求无论图纸从哪个系统流转最终落进Web页面时图形必须矢量坐标必须可解析。这也是“CAD图纸粘贴到TinyMCE要保留矢量输出”这个需求的核心背景。芯片制造里的版图、封装图、掩模图每一层都对应不同的设计数据。如果丢掉了矢量结构等于把多层叠加工艺的图纸拍扁成一张图后面不管是做DFM检查还是查线宽都无从下手。更直接的是这种图纸通常涉及跨团队协作Fab厂、封装厂、设计公司之间要通过Web系统传递信息如果传递过程中矢量丢失责任界定也成了问题。所以这不是一个技术洁癖是业务刚需。2. 方案选型四种“矢量化”路径怎么选2.1 SVG浏览器里的通用矢量格式要解决TinyMCE的矢量输出我上手就只考虑一种格式SVG。原因很简单SVG是W3C的开放标准所有现代浏览器原生支持它本质上是XML文本能直接嵌进HTML也能以图片形式引用它还保留了坐标、路径、图层、颜色这些矢量信息。在TinyMCE里插入一段SVG其实和你插入一段HTML没有本质区别只要配置得当编辑器能把它当作文档的一部分来保存和编辑。而且SVG里每个元素都是DOM节点后续要做量测、高亮、批注都能用JS直接操作坐标这个能力是PNG给不了的。为了让你对SVG有直观认识我把一段最简单的SVG贴在这里svg xmlnshttp://www.w3.org/2000/svg width800 height600 viewBox0 0 800 600 rect x100 y80 width400 height300 fillnone stroke#000 stroke-width0.5 / line x1100 y1380 x2500 y2380 stroke#f00 stroke-width0.3 / /svg这段代码放到任意浏览器里就是两条清晰线条不管你怎么放大边缘都是顺滑的。转换工具把CAD图导成这样的SVG文件后TinyMCE才有“吃”下去的前提。SVG对图形结构的表达能力比PNG强太多它能把CAD里的图层分组、线型、颜色、文字都映射成对应的XML节点这样Web前端就能做到很多CAD软件才有的操作。2.2 为什么不考虑PDF或DXF有人会问PDF也是矢量为什么不用PDF在浏览器里能显示但TinyMCE这样的富文本编辑器没办法把PDF当作可编辑内容嵌入通常只能作为附件链接。如果强行用PDF.js渲染那等于在编辑器里再嵌一个查看器用户无法把图纸和周围文字排版在同一篇文档里协同评审的体验会很割裂。DXF/DWG更不用说了浏览器原生不解析必须靠插件或后端转换如果你要走这条路最后还是得把它渲染成SVG或位图。既然最终都绕回SVG不如一开始就统一。很多团队在选型时会把PDF列进候选主要原因是PDF在打印和签章场景里很成熟。但回到TinyMCE这个具体环境PDF的“不可编辑”属性反而成了大问题用户想在图旁边写一行审批意见或者把旧图替换成新图PDF连基本的插入、删除操作都绕不过重做。SVG作为DOM元素嵌入天然可以被编辑器管理可以随文档一起复制、剪切、替换甚至能被搜索引擎索引其中的文本。这个灵活性在信息化系统里非常宝贵。2.3 原生控件与第三方组件的取舍我也调研过直接用CAD厂商的Web控件方案比如Autodesk的在线查看器、开源组件等。这类组件确实能给你接近原生的CAD交互体验旋转、图层开关、测量都很好。但代价也明显需要单独部署服务、License成本高、页面体积大而且很难把它塞进TinyMCE的富文本世界中——用户在一个编辑框里既要写文字又要嵌入CAD窗口时组件之间的数据协同反而成了新的坑。相较之下转成SVG嵌入是“轻量但够用”的路线。对大多数文档协同、评审、归档场景已经足够如果以后需要更复杂的浏览能力可以把标题链接到专门的CAD看图器各司其职。我见过一个极端案例某厂为了在门户网站里展示图纸引入了一套重型CAD Web控件光前端加载脚本就有三兆打开页面要等五秒最后只是为了给领导看一张版图。这其实是用大炮打蚊子。在TinyMCE这种通用富文本编辑器里用户需要的是“图纸能出现在文档里、能缩放、能追溯源文件”而不是一个完整的CAD工作站。SVG方案已经覆盖了95%的需求剩下那部分交互交给专用查看器通过链接跳转反而让整个系统边界更清晰。2.4 推荐架构转换服务编辑器插件综合来看我最终在项目里落地的架构是后端做一个“图档转换服务”负责把DWG/DXF解析成SVG前端在TinyMCE里加一个自定义插件提供“插入CAD图纸”按钮用户选文件后上传到转换服务服务端返回SVG片段插件把它插到编辑器中。这套架构好处是把“矢量输出”变成了一个标准服务不管编辑器是TinyMCE还是别的富文本只要会调HTTP接口就能用。而且转换逻辑集中在后端后期换了绘图软件或改了CAD标准只改服务端不用动每个前端页面。这个架构在整个项目落地后我从两个方向验证过它的可扩展性一是转PDF、转PNG都可以并行挂在这个服务下满足不同消费端的需求二是转换任务可以异步化用户提交大图纸后先做文件校验和队列排队处理完成后再回调通知避免前端长时间等待。整个链路下来用户从上传到看到矢量SVG的时间控制在两三秒内。3. 实操CAD图纸转SVG并嵌入TinyMCE3.1 第一步把DWG/DXF转成干净的SVGCAD图纸转SVG不能直接“另存为”完事这里有几个非常关键的处理点。先说转换工具我试过好几条路线用AutoCAD自带的“另存为”功能在“文件类型”里找SVG部分版本支持但导出的SVG经常带一堆冗余命名空间和无关对象文件偏大。你可以先导出成PDF再用Inkscape或PDF转SVG的工具效果反而更干净。用开源库Ezdxf处理DXF格式脚本控制性强适合批量转换。芯片企业如果图纸是DXF格式强烈推荐。Ezdxf可以对实体逐一过滤、炸开块、设置图层颜色转换质量比很多图形界面工具都稳定。用商业转换服务或自行封装Cloud API。如果你内部有几十万张历史图纸建议优先调研市面上的转换引擎不要自己从头解析DWGDWG格式太封闭做出来维护成本极高。不管用哪条路你都必须在转换时处理三件事尺寸单位。CAD图纸的单位可能是毫米、英寸而SVG是基于像素坐标系。不换算就出乱子。通常做法是先读取图纸的单位设置再乘以统一比例系数比如1毫米3.7795275591像素96DPI。文本。最好把单行文字、多行文字转成SVG的text节点并嵌入字体子集否则中文可能变方块。更稳妥的方案是把文本转成路径曲线但这会让文件变大而且后期无法搜索、无法编辑按需取舍。图层颜色。CAD里红黄蓝各有含义很多图纸用颜色区分工序、区分层别。转换时保留stroke/fill颜色否则工艺评审时总有人问“这条线是多高层”。保留线型也一样虚线、点划线在SVG里对应stroke-dasharray别省略。转换完成后最好用浏览器打开SVG看一下外观要和CAD渲染一致。这里先确认一个底线SVG的viewBox不能随意丢。viewBox记录了图纸的坐标系范围后续如果要做测量所有坐标都靠它来映射。没有viewBox的SVG就像一个没有标尺的工程图看着对其实是废的。尺寸换算这个点我单独提醒一句。假设一张芯片封装图在CAD里标注的是毫米单位图框范围是100mm宽、80mm高。转成96DPI下的SVG时宽高就应该分别是100×3.7795377.9580×3.7795302.36。如果转换工具忘了换算直接按CAD内部数值输出在浏览器里这个图就会显示得很小或很大。这个问题光看SVG本身不容易发现必须拿一个已知尺寸的图做回归验证。3.2 第二步配置TinyMCE允许SVGTinyMCE默认的schema不允许SVG标签出现在内容里。如果你直接把SVG源码贴进“编辑HTML”里它会自作主张把标签过滤掉留下一堆路径数字或者空行。解决办法是在初始化配置里放开SVG相关元素。我用的配置大致是这样tinymce.init({ selector: #editor, height: 640, schema: html5, extended_valid_elements: [ svg[*], g[*], path[*], polyline[*], polygon[*], rect[*], circle[*], ellipse[*], line[*], text[*], tspan[*], defs[*], marker[*], use[*], pattern[*] ].join(,), valid_children: body[svg],div[svg],figure[svg], paste_data_images: true });这里每个配置都有讲究。schema: html5是基础HTML5标准里面SVG是合法的内嵌元素这样TinyMCE才愿意把SVG当作“正常内容”看待。extended_valid_elements逐项列出我要保留的SVG元素因为我不想在转换端把一次性标签都转成极简路径后续要做测量就必须保留g分组、text文本这类结构。valid_children允许SVG出现在body、div、figure等容器里如果你已经把SVG包在figure里这个配置能防止保存时被移出来变成孤儿节点。paste_data_images是告诉TinyMCE接受剪贴板里的图片数据虽然它不管矢量但如果你也允许位图兜底就把它开着。需要注意的是这个配置只对TinyMCE的“合法元素过滤器”生效。如果你项目里还接入了其他脏数据清洗工具比如后端的安全消毒库另一头也要同步放行SVG标签否则保存回显时还是会被砍掉。我在实际项目里曾经遇到一个情况TinyMCE配置已经放开了SVG编辑状态下一切正常但只要表单提交后端一个Java的过滤组件就把SVG当非法标签删除掉了。调试到后半夜才想起看服务端日志最后在后端白名单里补上svg、path、g这几个标签才彻底解决。3.3 第三步做“插入CAD图纸”插件配置好SVG后用户仍然不会满足于“手动把SVG代码粘贴进HTML源码”。我们要做的是在工具栏放一个按钮让工业工程师像点“插入图片”一样点一下。我实现的是一个TinyMCE插件核心逻辑分三步点击按钮后弹出一个文件选择器只允许选DWG/DXF文件。文件以multipart/form-data形式POST到后端转换服务服务端返回SVG字符串以及图纸的宽高比例。插件拿到SVG字符串和比例插入到编辑器内部。我选择用editor.insertContent()来插入SVG代码而不是先转blob再插img因为内联SVG保存后还能在文章里继续编辑也方便后续做测量标注。插件最小化代码可以是tinymce.PluginManager.add(cadinsert, function(editor, url) { var openDialog function () { var input document.createElement(input); input.type file; input.accept .dwg,.dxf; input.onchange function () { var file input.files[0]; if (!file) return; var fd new FormData(); fd.append(file, file); fetch(/api/cad/to-svg, { method: POST, body: fd }) .then(function (res) { return res.json(); }) .then(function (data) { if (data.code ! 0) { editor.notificationManager.open({ type: error, text: data.message }); return; } var svg data.svg; editor.insertContent(figure contenteditablefalse svg figcaption file.name /figcaption/figure); }) .catch(function () { editor.notificationManager.open({ type: error, text: 转换服务异常 }); }); }; input.click(); }; editor.ui.registry.addButton(cadinsert, { text: 插入CAD图纸, onAction: openDialog }); return { getMetadata: function () { return { name: CAD Insert Plugin, url: https://example.local }; } }; });这段代码直接放在初始化脚本前面然后在toolbar里加上cadinsert按钮就行了。我特意用contenteditablefalse把整个SVG包成不可编辑块这样做的好处是用户在编辑文字时不会不小心拖拽或改坏SVG内部的路径坐标需要调整大小时用户在图标上看到的还是一个整体符合图形对象的使用直觉。当然缺点也有就是用户不能再双击SVG里某个圆去改颜色因为默认的编辑交互不希望深入图元级别这个取舍在工作项目中完全合理。在实际使用中我发现这个插件还要考虑两个边界情况一是用户重复点击按钮上传同名文件最好做去重提示防止同页里出现两张重复图二是转换服务返回的SVG可能是经过后端压缩的前端要在插入前检查>