神秘巨星z先说一个我实际碰到的场景：芯片厂内部的工艺文档系统升级，工艺部门提了一个需求，要求工程师在 TinyMCE 里贴 CAD 图纸时，保存后放大看依然要清晰，放大多少倍线宽和标注都不能虚。最初很多人觉得这不就是截图吗，等真正做了才发现，CAD 的 Ctrl+C 和网页的 Ctrl+V 根本不在一个语言体系里。这篇文章围绕这个场景，把 CAD 图纸如何才能以矢量格式进入 TinyMCE 的完整思路、代码和踩坑记录都摊开来聊。如果你是芯片制造企业的系统工程师、知识库负责人，或者正在被“富文本编辑器贴大图变糊”困扰，这篇应该能给你几条能直接落地的路线。
1. 需求场景拆解：芯片厂的知识库为什么非要矢量 CAD 不可
1.1 哪些人真的需要在 TinyMCE 里贴 CAD 图纸
很多做 Web 应用的人第一次听到这个需求会觉得奇怪，一个基于浏览器的富文本编辑器，为什么要处理 CAD 这种专业格式？但放到芯片制造企业内部就特别合理。晶圆厂、封装厂里面存在大量过程文档、质量评审、变更申请单、设备维护记录，底层都是一个带富文本编辑框的业务系统。TinyMCE 因为集成简单、插件成熟，在不少企业的知识库、QMS、PLM 配套系统中都是首选编辑器。
真正会在编辑器里粘贴 CAD 图纸的人，通常不是图形工程师，而是工艺整合工程师、设备工程师、质量工程师。他们手里有掩模版图、封装基板的走线布局、厂务改造的管线图，甚至光刻区域的黄光机台布局图。写评审意见时，需要用图纸把问题位置圈出来；出变更单时，要引用当前版本的版图；做故障复盘时，还要把 SEM 照片和对应的 CAD 区域放在同一份报告里。对这些用户来说，最顺畅的操作就是“截图下来再贴”的反面：希望把 CAD 直接贴进 TinyMCE，保留可放大、可检索、可打印的矢量数据。
1.2 截图粘贴为什么不行：精度、缩放和追溯全在流失
用截图的方式把 CAD 图纸塞进编辑器，单看操作确实快。但图纸不是普通照片，芯片制造场景下，图纸里的信息密度高到离谱。一个掩模版图可以有几万条多边形和孔洞，一段金属走线的宽度在源文件里是带精确小数位的数值，截图之后这些信息直接变成像素颜色块。系统里存档的图纸如果是一张静态图片，未来有人拿放大镜去核对线宽和间距，根本无从下手。
更麻烦的是，网页编辑器对图片默认会压缩或者限制尺寸。工程师明明贴了一张 4000 像素宽的截图，保存后再打开发现被编辑器样式表缩成 800 像素，标注文字糊成一团。这种问题在评审追溯场景里非常致命。图纸本身是变更记录的附件，如果清晰度不达标，后续审计举证时就会怀疑所贴图纸是否真实反映了当时的设计状态。所以企业内部的要求很清楚：粘贴进 TinyMCE 的内容，必须保留矢量语义，至少保证任何缩放级别下边界和文字都可读。
1.3 “粘贴”两个字背后其实是三套数据链路的协同
要实现真正的 CAD 粘贴矢量输出，要处理的不是 TinyMCE 一个问题，而是 CAD 客户端、浏览器编辑器、服务器存储三端的协同。CAD 端负责导出什么样的剪贴板格式；浏览器端决定要不要拦截、能不能接受 SVG 等矢量介质；服务器端则需要把 CAD 原生的 DWG、DXF 转换成 Web 能识别的 SVG，或者干脆维护一份轻量化预览文件。
我一开始也天真地认为 TinyMCE 的 PowerPaste 插件开了 paste_data_images 就能解决，结果试下来发现它只能识别位图 PNG 和 JPEG。方向就必须从「让编辑器直接读懂 CAD」改成「在粘贴路径里插入一个转换层」。理解了这一点，后面很多问题就顺了。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 剪贴板数据分析：CAD 复制后粘贴到网页，到底发生了什么
2.1 CAD 客户端把哪些格式放进了剪贴板
先从 Windows 剪贴板的底层讲起。AutoCAD 等主流 CAD 软件里选中图形按 Ctrl+C，系统并不会只放一张图片，而是会同时注册多个格式。至少会有设备无关位图（DIB）、增强型图元文件（EMF），如果复制来源是 AutoCAD，它还会放一份私有格式数据，方便你再次粘贴回 AutoCAD 时保持对象属性。此外，某些情况下还会带文本描述、文件路径等辅助信息。
这里面的 EMF 值得一提，它本质是一套矢量绘制指令，在 Word、PowerPoint 里粘贴时是能保持矢量效果的。问题在于浏览器端对 EMF 几乎没有原生支持，Chrome、Edge 的 paste 事件拿到剪贴板项目后，通常只能看到 text/plain、text/html、image/png 这三种通用格式。换句话说，CAD 放了很多好东西进来，但浏览器只愿意把位图递给你，矢量数据被挡在门外。
| 剪贴板格式 | CAD 是否输出 | Windows 原生软件支持 | 浏览器粘贴事件支持 |
|---|---|---|---|
| DIB/Bitmap | 是 | 全支持 | 支持，但为位图 |
| EMF | 是 | Word/PPT 等支持 | 不支持 |
| DXF/DWG 私有格式 | 是 | 仅 CAD 再粘贴 | 不支持 |
| SVG File 格式 | 依赖生成方式 | 部分支持 | 支持但少见 |
2.2 TinyMCE 的粘贴回调到底能拿到什么
TinyMCE 的粘贴流程，本质上是将浏览器吐出来的 ClipboardEvent 数据做二次处理。默认的 paste 插件能从 clipboardData 里读取纯文本和 HTML；如果配置了 paste_data_images: true，它可以把位图图片转成 base64 后插入编辑器。PowerPaste 商业插件则增加了很多从 Word、Excel 复制内容的保真清理逻辑。但不管哪个插件，都没有能力把 CAD 放在剪贴板里的 EMF 或私有格式读出来变现。
如果你想在粘贴事件里加自己的判断，通常的代码切入点是 paste_preprocess 和 paste_postprocess 钩子。前者拿到的是即将插入编辑器的字符串，适合替换内容；后者拿到的是一个 DOM 节点，适合做安全性清理。如果拿到 clipboardData.items，里面可能会有一个 image/png 的 File 对象，或者当用户从 SVG 编辑器