如何在TinyMCE中输出CAD矢量图？后端转换与插件定制实践

前阵子有个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图纸可能包含上百个图层：轮廓层、尺寸层、中心线层、隐藏线层、技术要求文字层。位图会把所有图层揉成一张静态画面，读者无法关闭某个图层去单独看轮廓或者尺寸，评审效率大打折扣。

第三是涉密。芯片制造企业的内网通常与外网物理隔离，文档系统里流转的图纸都属于敏感资产。任何依赖云端转换、公网预览的方案，在信息安全评审这一关就被直接否决。这意味着你必须自己搭建一套完整的离线转换链路。

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内网的终端根本访问不了外部服务；二是数据出域，图纸文件传到第三方服务器，哪怕只是临时预览，也过不了文件外发审计。除非你的文档系统部署在完全隔离的公网环境里、处理的是非涉密图纸，否则这条路线可以直接跳过。

2.3 路线三：自建转换服务+编辑器扩展（推荐）

真正适合制造企业长期运转的，是这条路线：在服务器端部署一个图纸转换微服务，支持上传DWG/DXF，转换后返回SVG；在前端TinyMCE里扩展一个"插入CAD图纸"按钮，点击后弹窗上传图纸文件，服务端转完SVG自动插入编辑器正文。

这条路线看起来开发量比前两条大，但它解决的是真问题：用户不需要改变任何习惯，在编辑器里点一下按钮就能完成操作；图纸数据全程留在内网；转换结果天然是矢量格式，放大不糊。而且转换服务是独立的，以后其他系统（IM通知、质量问题跟踪、工艺变更单）也能复用。

我做这个方案时，后端转换服务大概花了两个工作日，TinyMCE插件半天，整体投入并不夸张。下面几节详细拆解具体实现。

3. 服务端DWG/DXF转SVG：选型与参数全是细节

3.1 转换链路设计：DWG先转DXF再转SVG

服务端直接把DWG转SVG的工具选择范围很窄。DWG是闭源格式，Autodesk官方没有提供Linux下的免费转换SDK，开源的LibreCAD、QCAD对DWG原生支持也不够好。更稳妥的做法是拆成两步走：

第一步，用ODA File Converter（Open Design Alliance提供，免费注册后可用）把DWG转成DXF。ODA是行业里公认的DWG兼容格式实现方，转换精度和图层保留程度比大多数开源工具高一个量级。它支持命令行批量处理，适合在后端编排调用。需要说明的是，ODA File Converter是Windows桌面程序，在Linux服务器上跑需要配Wine或者换Windows容器，部署时要提前规划。

第二步，把DXF转成SVG。这一步的选择就多了，我实测下来有三个相对靠谱的方向：

• Python的ezdxf库加matplotlib后端。ezdxf是解析DXF的利器，它的ezdxf.addons.drawing模块支持把DXF渲染成SVG、PNG、PDF。优点是灵活，你可以在渲染前对图层做过滤、对颜色做映射，完全掌握输出结果；缺点是matplotlib渲染出来的图在复杂标注场景下偶尔会有字体错位，需要调参数。
• LibreCAD/QCAD的命令行导出。LibreCAD安装后可以用命令行把DXF批量导出为SVG，胜在原生解析DXF的渲染逻辑，图形的几何准确性比matplotlib更接近原图；但命令行的可定制化程度低，很难做图层级别的精细控制。
• Aspose.CAD商业库。如果你用的是.NET或Java后端，Aspose.CAD可以直接把DWG/DXF转成SVG，一步到位，不需要先转DXF。它对CAD字体、线型、标注样式的还原度是几套方案里最高的，缺点是要花钱买授权，对于涉密内网系统来说，采购流程比技术问题复杂得多。

3.2 转换参数里最容易翻车的几个点

DWG转DXF这一步通常不需要太多干预，但DXF转SVG时，有四个参数如果不处理，输出的SVG基本是废的。

单位换算。CAD图纸中一个单位可能代表毫米、英寸、微米，而SVG使用的是无单位用户坐标。你需要读取DXF头部的$INSUNITS变量，拿到单位信息，然后在SVG根节点上设置对应的viewBox和坐标缩放。比如微米单位的版图类图纸，视图范围可能动辄几十万坐标值，不处理viewBox，前端渲染时会直接溢出。

图层与颜色映射。DXF里每个实体都挂在某个图层下，图层有颜色、线型、线宽属性。转换时最好把图层映射成SVG的<g>组，并保留data-layer属性。这样后续前端做图层开关、按层搜索甚至按层变色，都有数据基础。很多转换工具默认会合并所有图层成一个平面，这是大忌。

字体处理。CAD里大量使用SHX形字体（AutoCAD专有格式），市面上没有成熟的SVG渲染引擎支持SHX。转换时如果不处理，SVG里的文本会变成一排方框。实用的做法有两种：一种是在转换服务里配置一个SHX到TTF的映射表，常见的仿宋、宋体、HZ单线体等映射到系统里已有的TTF字体；另一种更省事——让CAD导出时把文字对象炸开成路径（TXTEXP命令），转换出来就是纯粹的矢量轮廓，不依赖任何字体。后者的缺点是SVG文件体积会变大，文本也无法再编辑和搜索。

线宽与线型。CAD的线宽属性在SVG里对应stroke-width，但DXF中的线宽单位是毫米，直接塞进SVG会变成"毫米长度"的数值，在屏幕渲染下要么粗得离谱要么细到看不见。一般建议把CAD线宽按照一个合理的比例系数折算成SVG用户单位，再叠加vector-effect: non-scaling-stroke样式，避免缩放时线宽跟着变形。

3.3 大图纸的转换性能与任务队列

芯片制造企业的CAD图纸文件通常不小。设备部门发来的整机装配图动辄几十MB，DXF里的实体数量可能上百万级。这类文件如果直接在HTTP请求里同步转换，请求大概率超时。

我当时的设计是：转换服务独立部署，前端上传文件后立即返回一个任务ID，转换异步执行。前端轮询任务状态，转换完成后自动把SVG插入编辑器。任务队列用最简单的RabbitMQ或者Redis列表就能实现，不用上重型工作流引擎。服务端要设置合理的超时时间，单文件转换超过10分钟直接标记失败，并记录错误日志。

并发控制也值得注意。ODA File Converter是单进程程序，同时多个转换任务会排队；如果你用的是ezdxf，每个Python进程只能吃单核。建议用进程池限制并发数为2到3，避免大文件转换时CPU被打满、影响其他业务。

4. TinyMCE改造：放行SVG、增加入口、拦截粘贴

4.1 让TinyMCE接收SVG内容的两种方式

TinyMCE默认的schema不允许<svg>标签，直接往编辑器里插入SVG字符串会被过滤掉。解决方式有两种，各有利弊。

方式一：内联SVG。通过editor.execCommand('mceInsertContent', false, svgString)直接把SVG字符串插入正文。这样做SVG的文本可以被选中复制，样式可以被CSS控制，某些情况下还能实现分层交互。但内联SVG有个安全大坑：SVG里可以内嵌JavaScript脚本，如果服务端转换时没有做严格的脚本剥离，等于给攻击者留了个XSS后门。

方式二：SVG文件引用。转换服务把SVG保存成静态文件，返回一个URL，前端通过<img src="/files/xxx.svg">插到编辑器里。这样浏览器在<img>标签下加载SVG时不会执行任何脚本，安全问题自然消解；文件上传到内网文件服务，还可以挂独立的访问权限控制。缺点是无法在内联层面做图层交互，文本也不能在编辑器里直接编辑。

我实际做的时候选择的是方式二。理由很直接：制造企业文档系统对安全的评审极其严格，宁可牺牲一点交互性，也要保证没有安全风险。

4.2 配置放行SVG标签

要是你坚持用内联SVG，TinyMCE的extended_valid_elements配置要改成类似下面这样，把SVG相关的节点全部纳入白名单：

javascript复制tinymce.init({
  selector: '#editor',
  extended_valid_elements: 'svg[*],path[*],g[*],line[*],circle[*],rect[*],ellipse[*],polygon[*],polyline[*],text[*],tspan[*],defs[*],linearGradient[*],radialGradient[*],stop[*],marker[*],use[*],style[*]',
  content_style: 'svg{max-width:100%;height:auto;} .mce-content-body svg text{font-family:Arial,sans-serif;}'
});

注意，extended_valid_elements里的[*]表示允许任意属性，这对SVG解析是必须的，因为不同SVG节点的属性差异太大，逐一声明会写到手软。但如果你走了内联SVG的路线，后端一定要做白名单消毒，核心是不能允许script、foreignObject、onload、onclick这类危险标签和事件属性。

4.3 粘贴PNG时如何引导用户

前文说了，浏览器粘贴拿到的永远是位图，这条技术限制绕不过去。但你可以通过TinyMCE的PastePostProcess事件去拦截粘贴进来的图片，检查它的尺寸和来源，如果检测到是一张刚粘贴的大尺寸位图，就弹一个提示，引导用户走"插入CAD图纸"的规范流程。

javascript复制editor.on('PastePostProcess', function (e) {
  var imgs = e.node.querySelectorAll('img');
  for (var i = 0; i < imgs.length; i++) {
    var img = imgs[i];
    if (img.src.indexOf('data:image') === 0) {
      editor.notificationManager.open({
        text: '检测到您粘贴了一张位图。CAD图纸建议使用"插入CAD图纸"功能，以保证矢量输出和清晰度。',
        type: 'info',
        timeout: 5000
      });
    }
  }
});

这个提示不会阻止用户粘贴，但会反复提醒，让用户在几次操作之后逐渐养成使用规范入口的习惯。我观察过，在配合培训的前提下，两周左右，团队里主动走"插入CAD"入口的比例能到80%以上。

4.4 自定义插件：添加"插入CAD图纸"按钮

TinyMCE的UI扩展非常简单，可以直接在setup回调里动态添加按钮，也可以用标准的tinymce.PluginManager.add写一个独立插件。下面给一个最简插件的骨架，按钮点击后弹出文件选择框，上传到转换服务，拿到SVG文件地址后插入编辑器：

javascript复制tinymce.PluginManager.add('cadinsert', function (editor) {
  editor.ui.registry.addButton('cadinsert', {
    text: '插入CAD图纸',
    icon: 'image',
    onAction: function () {
      openCadUploadDialog(editor);
    }
  });
});

function openCadUploadDialog(editor) {
  var input = document.createElement('input');
  input.type = 'file';
  input.accept = '.dwg,.dxf';
  input.onchange = function () {
    var file = input.files[0];
    if (!file) return;
    var formData = new FormData();
    formData.append('file', file);
    // 先提交上传，拿到任务ID
    fetch('/api/cad/convert', {
      method: 'POST',
      body: formData
    }).then(function (res) { return res.json(); }).then(function (data) {
      pollConvertResult(editor, data.taskId);
    });
  };
  input.click();
}

function pollConvertResult(editor, taskId) {
  var timer = setInterval(function () {
    fetch('/api/cad/result?taskId=' + taskId)
      .then(function (res) { return res.json(); })
      .then(function (data) {
        if (data.status === 'done') {
          clearInterval(timer);
          editor.execCommand('mceInsertContent', false, '<img src="' + data.svgUrl + '" style="max-width:100%;">');
        } else if (data.status === 'failed') {
          clearInterval(timer);
          alert('图纸转换失败：' + data.message);
        }
      });
  }, 2000);
}

插件记得在toolbar配置里把cadinsert按钮加进去：

javascript复制tinymce.init({
  selector: '#editor',
  plugins: 'cadinsert',
  toolbar: 'undo redo | formatselect | cadinsert'
});

5. 涉密内网下的部署与安全：和公网方案完全不同的思路

5.1 为什么在线转换服务在Fab内网直接不可用

这个问题很多外包工程师第一次接手时不太理解，觉得Autodesk Viewer文档齐全、效果又好，为什么非要自己折腾。等你真正接触到芯片制造企业的信息安全规范就明白了：Fab内网分权分域，终端出口受控，外发数据需要审批，任何把图纸内容传到外域的调用，都会触发DLP告警。

更关键的是，Autodesk Viewer这类服务需要把DWG上传到对方的云存储，哪怕对方承诺"临时解密查看"，图纸的几何数据也已经离开了你的网络边界。这在集成电路行业是不可接受的。所以，自建转换服务并不是"可选项"，而是"必须项"。

5.2 离线部署的核心组件

搭建一套不依赖外网的图纸转换服务，其实涉及的东西并不多，核心组件可以收敛成一个清单：

• ODA File Converter（Windows环境）或ODA的Linux版本（官方提供），用于DWG到DXF的转换。如果图纸以DXF为主，这一步可以省略。
• Python 3.8+环境，安装ezdxf库和matplotlib库，用于DXF到SVG的渲染。
• 一个轻量级HTTP服务（FastAPI或Flask），封装上传、任务排队、结果查询三个接口。
• 一个文件存储目录，转换前的原文件和转换后的SVG文件分开存，并挂载到内网隔离的文件服务中。
• Wine或Windows虚拟机的部署环境，因为ODA File Converter在没有Windows的服务器上跑不起来。

整个服务没有其他外部依赖，对网络的要求是零，所有资源都从内网镜像站拉取。

5.3 SVG文件的安全消毒

前面提到SVG的XSS风险，这在内网环境里同样要重视。虽然我们走的是<img>引用方式，天然屏蔽了脚本执行，但如果你未来想让SVG内联显示、支持图层交互，就必须做消毒。

我的建议是后端在上游就做处理：转换引擎输出SVG字符串后，不直接落盘，先经过一层白名单过滤。可以用Python的defusedxml库先做XML解析，遍历所有节点，剔除script、foreignObject、iframe、object、embed等标签，再剔除所有on*事件属性、javascript:协议链接。处理完再写入文件。整个过滤逻辑建议封装成独立函数，并且放在转换服务的最外层，因为它要同时保护文件落盘和后续的任何消费端。

5.4 文件生命周期与审计

涉密系统对文件的生命周期有明确要求。转换服务不能只负责生成SVG就完事，原文件、临时文件、转换产物都要有清晰的保留策略和定期清理机制。

我实施时的做法是：上传的DWG原文件保存30天后自动清理，SVG转换产物保留90天，文件访问记录写入审计日志。原文件清理是为了防止预览服务成为图纸文件的非受控存储点，SVG保留90天是为了让文档系统里引用的图片URL在一段时间内持续可访问。如果文档系统本身有文件管理模块，也可以把SVG直接托管到那里，生命周期由文档模块统一管理，转换服务只做无状态转换，这样最干净。

6. 实测效果与常见坑：跑了一年之后的经验总结

6.1 系统实际运行的性能数据

这套方案在内部跑起来之后，我整理过一批实测数据，可以给准备实施的同学一个参考基准。测试样本来自厂务部门提供的三份不同规模的DXF图纸，转换服务跑在一台4核8G的虚拟机节点上。

从数据看，转换速度和实体数量大致线性相关，常规图纸性能完全够用。超过100MB的超大图纸因为涉及DWG转DXF的额外开销，单任务可能要几分钟，所以异步队列是必须的。

6.2 坑一：文字全部变成方框

这个坑我印象最深。第一次联调的时候，随便拿了一张设备零件图测试，转出来的SVG在浏览器里一切正常，正当我准备收工，工程师发来一张管路图的截图，图里的技术要求文字全成了空心的方框。

排查了半天才发现，那张管路图里的文字用的是AutoCAD的SHX形字体，转换服务里没有对应的TTF映射，ezdxf默认找不到字体就直接渲染成了方框。解决办法是安装一套和厂里CAD环境一致的TTF字体，并且在转换脚本里建立SHX字体名到TTF字体名的映射表。比如HZTXT.SHX映射到SIMHEI.TTF，txt.shx映射到arial.ttf。如果你的公司有CAD标准化管理部门，可以直接找他们要一份字体规范，照着抄就行。

6.3 坑二：图层顺序颠倒

还有一次，一个工程师反馈说转换出来的SVG里，填充色块盖住了尺寸标注线，仔细辨认图面都看不清数字。这个问题的根因是：DXF里图层的绘制顺序和你在CAD中看到的显示顺序不完全一致，CAD靠的是图形数据库中的线性顺序，而SVG的渲染顺序完全取决于节点在XML中的排列。

ezdxf转换时默认按DXF文件中的实体顺序生成SVG节点，不会智能地把标注层放到最上层。解决方法是：在转换脚本里读取图层列表，预设一个图层优先级，尺寸层、文本层、标注层强制排在最后输出。这个逻辑不复杂，但一定要写在转换服务里，靠前端CSS调z-index是管不了SVG内部顺序的。

6.4 坑三：大SVG让编辑器卡顿

超过5MB的SVG插入TinyMCE后，编辑器的编辑体验会明显下降，因为每次内容变化，TinyMCE都会对DOM做序列化和比对，大段的SVG路径节点会拖慢这个流程。

我的处理办法是给编辑器配置里加一个限制：超过3MB的转换结果，默认不直接插入编辑器正文，而是生成一个缩略图<img>，用链接方式指向SVG文件，用户点击缩略图在新窗口打开完整矢量图。这样文档正文保持轻量，矢量图本身又可以随时查看，算是在编辑体验和输出质量之间找了个平衡点。

6.5 关于图层开关的一个待办

最后说一个我还没完全解决的问题：内联SVG天然支持图层交互，也就是让阅读者在浏览器里勾选显示或隐藏图层。这对芯片制造企业的图纸评审非常有用，比如只看尺寸层，或者单独检查某条管线所在的图层。

目前我们用的<img>引用方式做不了这个交互，因为<img>不暴露DOM。如果你有精力做进阶版，建议把SVG内联插入编辑器，同时在阅读端写一个单独的渲染组件，解析data-layer属性，生成图层控制面板。这个方向我已经在验证了，效果好的话后续会再写一篇专门讲图层交互的实现。限于篇幅，这里就先不展开。

说到底，CAD图纸要在TinyMCE里保持矢量输出，并不是一个靠调整编辑器配置就能解决的小问题，它牵扯到CAD格式解析、后端转换服务、前端编辑器定制、内网安全合规这几个不同层面的工作。把这个链路摸清楚并落地之后，你会发现这套能力不光能用在TinyMCE上，其他任何需要展示CAD图纸的系统都能直接复用，性价比是很高的。