Will.liu前阵子有个Fab的PIE朋友跟我吐槽，说他们在内部技术文档平台里写工序改善报告，想把CAD里的工装夹具图直接Ctrl+C复制到TinyMCE编辑器里，结果粘贴进去的是一张糊掉的位图，放大几倍就看不清尺寸标注了。这个问题听起来不大，但真落到芯片制造企业头上，牵扯出的东西一点都不小——CAD图纸、TinyMCE、矢量输出，这三样凑在一起，几乎是每个要自建文档系统的半导体厂都会撞上的组合难题。
这篇文章我就围绕这个场景，从问题本质、方案对比、后端转换、编辑器改造、涉密部署五个层面，把"如何在TinyMCE里输出CAD矢量图"这件事讲透。无论你是刚接到需求的前端、被指派做内部系统的全栈，还是给制造企业做配套软件的工程师，按这个思路走，基本能少踩一半的坑。
1. 图纸粘贴进TinyMCE为什么总是"失真"？
1.1 剪贴板里实际上装了什么
先说一个很多人没意识到的现象：你在CAD里选中对象、按Ctrl+C，系统剪贴板里并不只有一份数据。Windows剪贴板会同时保留好几种格式——CAD私有实体数据、EMF/WMF矢量元文件、增强型图元格式，以及给普通程序用的位图。当你在Word里粘贴时，Word会优先读取EMF矢量数据，所以Word里的CAD图放大不糊；但在浏览器里，这套逻辑完全变了。
浏览器是个沙箱，JavaScript只能通过Clipboard API读取到少数几种白名单格式，剪贴板里的CAD私有数据和EMF文件根本拿不到。TinyMCE的paste插件在监听粘贴事件时，能拿到的只有位图（通常是PNG或JPEG）。于是流程变成了：CAD的Ctrl+C -> 浏览器只截取位图 -> 编辑器把位图转成base64嵌入HTML。最终文档里留下的，就是一张固定分辨率的静态图片。
这里有个生活化类比：这就像你拿着一份高精度工程扫描文件，却非要用拍屏的方式发给别人，对方收到的是屏幕照片而不是原文件。原文件再好，传输链路不支持也是白搭。
1.2 浏览器编辑器为什么拿不到矢量
很多人第一次遇到这个问题时的直觉是：改TinyMCE配置，让它允许"粘贴矢量图"。这个方向其实是有问题的。难点不在编辑器不肯接收矢量数据，而在于浏览器的安全模型压根不允许网页读取剪贴板中的任意格式。
Chrome、Edge这些主流浏览器，在粘贴事件里能拿到的图片数据，本质是系统把剪贴板里的内容"转码"成一张位图后的结果。除非用户明确在输入框里粘贴一个SVG文件内容，否则浏览器不会把EMF或DWG实体数据吐给你的页面。就算退一步，浏览器允许读取EMF文件，<img>标签也不支持渲染EMF，前端侧根本没有原生的EMF解码方案。
所以，想让CAD图纸在TinyMCE里保持矢量输出，唯一真正可行的路子是：改流程，让矢量数据以文件形式（SVG）进入编辑器，而不是依赖"复制粘贴"这个动作本身。后面几种方案，本质上都是围绕这个逻辑在绕路。
1.3 芯片制造场景的三重痛点
在普通制造业，图片糊一点忍忍也就过去了；但在芯片制造行业，这个问题会被放大成三个具体的痛点。
第一是精度。芯片制造企业的CAD图纸涵盖了设备定制件、气体管路布局、厂务设施、晶圆载具等等，图纸上密密麻麻的全是尺寸标注、形位公差和表面粗糙度符号。一张位图放进8D报告或者DFM评审文档里，工程师想核对一个孔径尺寸，放大两倍就全是马赛克，根本没法用。
第二是图层。一套完整的CAD图纸可能包含上百个图层：轮廓层、尺寸层、中心线层、隐藏线层、技术要求文字层。位图会把所有图层揉成一张静态画面，读者无法关闭某个图层去单独看轮廓或者尺寸，评审效率大打折扣。
第三是涉密。芯片制造企业的内网通常与外网物理隔离，文档系统里流转的图纸都属于敏感资产。任何依赖云端转换、公网预览的方案，在信息安全评审这一关就被直接否决。这意味着你必须自己搭建一套完整的离线转换链路。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 保住矢量输出的三条路线，动手前先想清楚
2.1 路线一：让用户"导出SVG再上传"
最简单粗暴的做法，是要求用户在CAD里先把图纸导出成SVG文件，然后在TinyMCE里像插入图片一样上传SVG。AutoCAD 2015以后的版本，EXPORT命令支持直接输出SVG格式；中望CAD、浩辰CAD这些国产软件也陆续支持了SVG导出。
这是成本最低、见效最快的方案。TinyMCE只要在配置里放行<img>标签引用SVG文件，或者允许内联SVG，就能正常显示。缺点是割裂感很强——用户从"在CAD里复制"变成了"导出文件、切到浏览器、上传文件"三个步骤。对于每天要写好几份报告的工艺工程师来说，这个操作体验很难被接受，推行阻力会非常大。
2.2 路线二：嵌入第三方CAD预览服务
有一种省事的方案，是利用Autodesk Viewer、ShareCAD这类在线CAD预览服务，把DWG文件传到云端，生成一个预览地址，再用iframe嵌到TinyMCE编辑器里。
这个方案做演示Demo非常快，前端几乎不用写代码。但对芯片制造企业来说，它有两个致命伤：一是依赖公网，Fab内网的终端根本访问不了外部服务；二是数据出域，图纸文件传到第三方服务器，哪怕只是临时预览，也过不了文件外发审计。除非你的文档系统部署在完全隔离的公网环境里、处理的是非涉密图纸，否则这条路线可以