李婧Amy有一类问题，只有真正做过企业信息化的人才会反复被折磨到：芯片制造厂里，工艺工程师好不容易从设备监控台把厂务管道布局图、机台脚位图或者封装基板的局部 CAD 图复制到剪贴板，准备贴到网页里的 TinyMCE 富文本编辑器，写一份异常报告或者变更申请单。结果按下 Ctrl+V 之后，编辑器里出现一张模糊到发虚的位图，放大一点字就看不清，标注尺寸的箭头也歪了。打印归档或者转 PDF 的时候，图更没法看，签字人在邮件里反复问“你这图到底画的是什么”。
这个场景不是偶发，而是所有用浏览器富文本承载工程图纸的企业都会碰到的痛点。TinyMCE 作为嵌入到各业务系统里最常见的编辑器之一，默认对 CAD 这种矢量图形并不友好。CAD 图纸本身是矢量数据，由直线、圆弧、标注、填充等数学图元组成，但浏览器和富文本编辑器并不理解 CAD 的原生格式。解决这个问题的关键，是让图纸从 CAD 复制出来之后，在 TinyMCE 里仍然以可缩放、打印清晰的矢量形式输出，而不是退化成基于像素的图片。
我前两年正好在一家半导体制造相关的企业做过类似的知识库与质量文档系统改造，核心就是把 CAD 图纸从粘贴到 TinyMCE 的链路全部摸了一遍，搞懂剪贴板里放了什么、浏览器到底能读什么、哪些环节可以保留矢量，哪些环节必须要做格式中转。本文把我整个思路和踩坑过程写出来，重点讲工程上可以落地的方案。这不是一篇无脑调 API 的教程，更适合已经在业务系统里被这个问题折磨过、想找一套完整解法的人参考。
1. 为什么芯片厂写文档时，总在处理“图纸粘贴”这件事
1.1 业务场景：不只是“贴一张图”这么简单
芯片制造企业的文档系统里，需要嵌入 CAD 场景的频率比很多人想象中高得多。设备异常报告要贴设备布局和管路走向的局部截图，工艺变更单要贴机台部件图纸，厂务动力系统的点检记录要贴楼层管线图，封测厂的 NPI 报告还要贴基板 layout 的局部图。这些图纸原文件通常存在专门的图档管理系统里，但写报告、发起会签、做质量分析的入口往往是一个网页表单，表单正文用的就是 TinyMCE。
业务部门对“粘贴”这件事的期待很简单：我在 CAD 里选中一块图，复制，到网页里粘贴，这张图应该保持原样，能看清楚所有尺寸标注和文字。但他们并不知道，这个简单的操作背后涉及 CAD 软件、操作系统剪贴板、浏览器安全模型、富文本编辑器内部数据表示以及最后文档导出的一条完整链路。只要链路里某一个环节放弃了矢量信息，后面再想挽回就非常麻烦。
更麻烦的是，芯片厂里的图纸往往涉及批量的工艺数据和尺寸标记。一张位图可能压缩后只有几十 KB，但缩小到特定视图里看，字号本身就很小，一旦再被位图化，字体边缘出现锯齿，关键参数字母根本没法辨认。这在流程上会直接造成质量文档“不可读”“无法审计”的争议。所以在项目规划阶段，业务方提出来的已经不是“能不能贴图”，而是“能不能贴出来的图纸放大后还是清晰的”。
1.2 TinyMCE 默认粘贴机制为什么会把矢量丢掉
TinyMCE 本身没有特殊处理 CAD 数据的能力。它依靠浏览器的粘贴事件拿到剪贴板内容，官方 PowerPaste 插件做得比较成熟的是对 Word、Excel 这类 Office 内容的转换，对 CAD 内容基本只能走默认图片通道。
当用户在 AutoCAD、中望CAD 或者 Altium Designer 这类软件里复制图形时，程序会往 Windows 剪贴板里写入多种格式的数据。以 Windows 平台为例，常见的有设备无关位图（DIB/PNG）、增强型图元文件（EMF）、WMF 甚至纯文本。浏览器读取剪贴板内容时，通常会选择它自己能处理的那一种格式。Chromium 系浏览器最方便处理的图形格式是 PNG 位图，于是最后进入 TinyMCE 的往往是一张栅格化之后的图片。
TinyMCE 收到图片后的行为很简单：如果你开启了 paste_data_images，它会把图片作为 base64 数据插入编辑器 DOM，或者按你的配置上传到后端。无论走哪条路，图片都是位图，和图纸原本的矢量坐标没有任何关系。图纸在从 CAD 复制到剪贴板的那一刻，虽然 EMF 格式里仍然保留了矢量路径，但默认粘贴流程根本不会去读它，因为浏览器没有安全接口能直接拿到 EMF 并解析成 SVG 或者 HTML5 画布图形。
1.3 “矢量输出”最终要交付给谁看
在这个项目里，我和业务方花了一些时间对齐“矢量输出”的定义。最终发现它包含两层含义。第一层是在编辑器页面上看，图纸不能模糊，插进去的内容可以随着浏览器缩放保持清晰。这层用 SVG 就能解决。第二层是文档导出环节，当报告从系统导出成 PDF 或者 Word 时，图纸不能掉回位图，尤其是要走打印签字流程的文档，图纸上的尺寸线必须清晰可辨。
这两层如果分开做，会很容易给自己挖坑。很多团队第一版只做了“插入高清 PNG”，在页面上看还行，一到打印环节发现图片精度根本不够，又被迫改成双倍尺寸上传、再压缩显示，绕了一大圈还是没有真正解决问题。所以我们在方案设计时，一开始就把目标定成：内容编辑态以 SVG 形式保存，导出 PDF 时直接渲染 SVG，导出 Word 时至少保证一个可接受的矢量兼容通道。后续所有技术选型都围绕这个目标展开。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 方案选型：先看剪贴板，再看浏览器，最后才写代码
2.1 剪贴板上的图纸不是只有一种存在形式
从 Windows 剪贴板的结构看，一个 CAD 图形被复制后，并不是只有一张图片那么简单。AutoCAD 这类软件复制图元时，会在同一个剪贴板上同时写入好几种数据格式。有的格式是 AutoC