CAD图纸进TinyMCE？服务端转SVG实现无损矢量显示

1. 问题拆解：CAD图纸进TinyMCE，为什么会“糊”？

1.1 芯片制造场景下的CAD图纸到底长什么样

很多非制造业的同行一听“CAD图纸”，第一反应是机械加工图、建筑平面图。但在芯片制造企业里，工程师日常打交道的“CAD图纸”要复杂得多——有封装基板的设计图、引线框架的零件图、晶圆测试探针卡的机械结构图、光刻掩模版图，甚至还有厂务系统的动力管道图、洁净室设备布局图。

这些图的共同点是：精度要求极高，线宽往往以微米或毫米小数计，标注尺寸、公差、材料信息密密麻麻。工程师写完一份失效分析报告或者工艺变更说明，往往需要引用两三张关键图纸。过去大家习惯的做法是“截图再贴”，但截图本质上是把矢量图变成位图，一张高精度图纸到了Word或网页里就变成了低分辨率照片，缩放一多就发虚，打印出来更是没法看。

我接手企业知识库系统时，编辑器选型用的就是TinyMCE。前端的同事抱怨最多的问题就是：工程师从AutoCAD里复制一个图形，Ctrl+V直接粘到编辑器里，看起来是“图”，但实际上TinyMCE只拿到了一张位图，图纸里所有矢量信息、图层信息、坐标数据，全都丢干净了。这个问题的根源，不只是前端编辑器能力不足，而是从“剪贴板”到“网页DOM”这条链路上，矢量信息根本无处安放。

1.2 TinyMCE对粘贴内容的处理机制

要理解为什么CAD图纸粘贴进来会糊，需要先搞清楚TinyMCE对粘贴事件做了什么。

浏览器给Web应用提供剪贴板数据时，读取到的内容是由操作系统剪贴板决定的。当你在AutoCAD里选了一堆图形按Ctrl+C时，AutoCAD会往剪贴板里塞很多种格式：EMF（增强型图元文件）、WMF、DIB（设备无关位图）、文本，以及内部的自定义格式。但浏览器能识别的通常只有几种：text/plain、text/html、image/png、image/jpeg、image/bmp、image/svg+xml、application/pdf等。

问题就出在这里：AutoCAD默认放在剪贴板里的“最优格式”往往是DIB位图或者EMF，而TinyMCE的粘贴处理器拿到它最熟悉的image/png后，会直接把图片转成base64编码的<img>标签塞进编辑器。在大型图纸场景下，这个base64字符串可能动辄几MB，编辑器卡顿不说，图片本身也已经退化成位图了。

TinyMCE官方其实知道这个痛点，所以提供了paste_preprocess、paste_postprocess、paste_insert等回调，允许接管粘贴行为。但默认配置下，你拿到的依然是位图数据。换句话说，如果不做任何二次开发，把CAD图纸粘进TinyMCE，从一开始就注定只能得到低精度的图片。

1.3 为什么不能依赖“复制粘贴”这条老路

问了好几个半导体厂的工程师，发现大家早期都尝试过各种“曲线救国”方案——比如先在CAD里导出高清PNG，再把PNG贴进去；或者用微信公众号编辑器那种“先复制到Word再复制过来”的方法。这些办法看起来能显示，但都绕不开三个致命问题。

第一是精度丢失。位图的清晰度上限由像素密度决定，CAD图纸里一条0.05mm的细线，截图后可能只剩几个像素宽，放到网页上还能凑合看，一旦打印或者投屏放大，全是锯齿。

第二是信息孤岛。图纸不只是“一个图”，它包含图层、尺寸标注、块引用、线型、材质等工程语义。这些语义一旦被拍扁成像素，就再也无法被检索、统计、关联。对芯片企业来说，设计图纸往往要通过流程审批、版本归档，你不可能归档一张没有语义的截图。

第三是协作障碍。工程师在编辑器里写完报告，还要走企业OA流程，最后存到PLM或者EDMS系统里做长期归档。如果图纸是位图，后续做图号搜索、尺寸复核、变更对比，全部无从谈起。

所以结论很明确：要让CAD图纸在TinyMCE里实现真正的矢量输出，不能靠“粘贴”，必须靠“转换导入”——从源头把图纸解析成Web能原生支持的矢量格式，再让编辑器插入这个矢量格式。

2. 整体方案设计：从“粘贴”变为“转换导入”

2.1 方案选型对比

我把市面上常见思路都过了一遍，按工程可行性排列如下：

我最后敲定的是C为主、E为辅的组合：日常高频使用走“上传DWG→服务端转换→回填SVG”这条链路；如果遇到服务端转换工具解不了的特殊图纸，就让工程师用CAD端的布局导出PDF，再走PDF转换通道兜底。

为什么选C作为主线？核心原因是DWG/DXF才是图纸的“源数据格式”，从源数据转到SVG，能保留图层、线型、文字、块定义等结构化信息，后面做图纸对比、批注、检索都有基础。而PDF虽然也能转SVG，但PDF里已经是一张“纸”，工程语义已经丢了一部分。

2.2 我推荐的主链路

整个链路分五段：

1. 用户在TinyMCE编辑器里点“导入CAD”按钮，选择本地DWG或DXF文件；
2. 前端把文件上传到企业内部的转换服务；
3. 转换服务调用CAD转换中间件，把DWG/DXF解析并输出SVG；
4. 服务端对SVG做安全清洗（移除脚本、外部实体引用），返回给前端；
5. TinyMCE通过自定义插件把SVG作为内联内容插入编辑区，用户可调整显示尺寸，底层保持矢量。

这套链路里最容易被低估的是第4步——“SVG安全清洗”。很多人以为转出SVG就能直接插入编辑器，但SVG本身是可以内嵌JavaScript的。如果某个DWG里被埋了一个含有恶意脚本的图层属性，清理不干净，整个系统都可能被攻破。半导体企业信息安全要求高，这一步绝对不能省。

3. 核心实现细节与实操要点

3.1 CAD侧的准备：图纸命名、单位和图层规范

在做技术方案之前，我强烈建议先在流程上约束CAD图纸的出图规范。很多转换失败的问题，根子不在转换工具，而在源文件太混乱。

第一是单位和比例。AutoCAD的图纸单位可能是毫米、英寸、微米，同一张图里也可能混用。转换服务读SVG时是按“图形单位”来的，如果图里一条线画的是1个单位，到底是1mm还是1μm，直接影响下游所有尺寸标注。建议在导出DXF时统一通过UNITS命令把插入单位设置成毫米，并在图纸标题栏里写明比例。

第二是图层管理。芯片企业的封装图纸动辄几十个图层，很多图层里塞满了辅助线、草稿线、杂散文本。转换到SVG后，这些图层如果没有被关闭，用户看到的页面就像一团乱麻。我建议在DWG里设置好“打印图层状态”，只有需要出图显示的层才打开，其余层一律冻结。

第三是高版本DWG的兼容。AutoCAD每年都在升级版本，DWG文件格式越新，第三方解析库的支持就越滞后。给工程师定一个规矩：对外流转的图纸统一另存为AutoCAD 2013 DXF或者AutoCAD 2018 DWG格式，不要直接用2024/2025格式到处发。这一步能省掉无数售后问题。

3.2 服务端转换工具链怎么搭

服务端把DWG/DXF转成SVG，常见有三条技术路线，我逐一验证过，效果差别很大。

路线一：ODA File Converter（免费，命令行）

ODA（Open Design Alliance）提供免费的文件转换器，支持DWG各版本之间的互转、DWG转DXF、DWF、PDF。它是命令行工具，可以在Linux/Windows服务器上稳定跑，适合批量处理。

用法很简单：

bash复制ODAFileConverter source_dir output_dir output_version output_type recurse audit

其中output_version填2013之类的目标版本，output_type填DXF或PDF，recurse填0或1决定是否递归子目录，audit填0或1决定是否自动修复错误。

ODA转PDF后还需要一个PDF转SVG的步骤，可以用Inkscape：

bash复制inkscape input.pdf --export-type=svg --export-filename=output.svg

这里要注意，ODA输出的PDF是基于“打印布局”的，如果DWG里没有配置布局，默认只转模型空间的可打印区域，可能会裁掉部分图形。

路线二：商用SDK（Aspose.CAD / GroupDocs / CADSoftTools）

如果公司预算充足，想直接集成到Java或.NET服务里，用商用SDK是最省心的。比如Aspose.CAD支持DWG/DXF转SVG一行代码搞定：

java复制Image image = Image.load("drawing.dwg");
image.save("drawing.svg", new SvgOptions());

商用SDK的好处是封装了所有坐标系变换、字体解析、线型填充等底层逻辑，还支持对图层、布局进行精细控制。缺点是贵，而且转换大型图纸时内存占用高，需要单独部署转换服务进程，不能在Web应用内联调用。

路线三：Linux下的LibreCAD / LibreDWG 工具链

LibreCAD是开源CAD软件，可以脚本化操作，但LibreDWG这个库对DWG格式的兼容性一直不算完整，复杂实体（比如动态块、代理实体）经常解析失败。我的判断是，这种路线适合做临时工具，不适合做生产系统。

我最终的环境是：核心转换用ODA批量把DWG转成DXF，再用一个商用SDK（选型时测试了Aspose）做DXF到SVG的精细转换，最后接Inkscape做PDF/EMF的兜底转SVG。之所以不直接用ODA输出SVG，是因为ODA没有直接输出SVG的能力，它主要输出PDF/DXF/DWF，需要二次转换。

3.3 SVG在TinyMCE中的安全与显示

SVG插入TinyMCE有两个绕不开的问题：安全性和显示样式。

先讲安全。TinyMCE不能直接吞SVG字符串，必须做两件事。第一用DOMPurify或者类似的sanitizer清洗SVG，把所有<script>、onload、onclick、<foreignObject>、外部实体引用、javascript:协议链接全部过滤掉。第二在服务端保留一份清洗后的白名单策略，只允许path、rect、circle、line、polyline、polygon、text、g、defs、use、image这几种常见元素。

下面是一个前端接收SVG后清洗并插入编辑器的示例：

javascript复制tinymce.activeEditor.execCommand('mceInsertContent', false, cleanSvg(svgString));

如果不想走mceInsertContent，也可以在init_instance_callback里给编辑器实例加一个自定义按钮，然后通过editor.selection.setContent()把SVG插入到光标处。

再讲显示。DWG转出的SVG默认尺寸往往是几千像素宽，直接插入编辑器会把页面撑爆。解决方案是给SVG加上width="100%"和height="auto"，同时保留viewBox。因为viewBox维持了图形的坐标比例，用户拖拽缩放大小时，内部图形依然是矢量重绘，不会失真。

3.4 TinyMCE编辑器配置要点

TinyMCE初始化时，需要在extended_valid_elements里显式放行SVG相关标签，否则编辑器会自作主张把SVG过滤掉。配置类似：

javascript复制tinymce.init({
  selector: '#content-editor',
  height: 600,
  plugins: 'paste code',
  extended_valid_elements: 'svg[*],defs[*],path[*],circle[*],line[*],polyline[*],polygon[*],rect[*],g[*],text[*],image[*],use[*],desc[*]',
  paste_data_images: true,
  paste_preprocess: function(plugin, args) {
    // 这里可以拦截粘贴进来的图片，提前判断是否包含EMF/SVG
  }
});

有个细节：paste_data_images如果设为true，用户粘贴截图时TinyMCE默认也会把位图转成base64插进去。如果你们企业里上传CAD走的是“导入按钮”，建议把paste_data_images设为false，以免工程师误操作粘贴位图，破坏文档的一致性。

另外，如果用自定义对话框做“导入CAD”，建议用editor.windowManager.open创建模态框，在这个模态框里放文件选择和坐标原点调整选项。这样交互更可控，用户体验也比默认的editor.insertContent好得多。

4. 完整代码示例：一个可跑的集成方案

下面给出一套最小可复现的集成方案。技术栈是：前端 TinyMCE + 自定义按钮，后端 Python Flask + Aspose.CAD（测试时用试用版），整体逻辑可以平移到Java、Node等任何后端。

4.1 后端：接收DWG并返回清洗后的SVG

python复制import aspose.cad as cad
import re
from flask import Flask, request, jsonify

app = Flask(__name__)

def sanitize_svg(content):
    # 安全清洗：这里做一个极简过滤，生产环境建议用更严格的方案
    content = re.sub(r'<script.*?</script>', '', content, flags=re.IGNORECASE|re.DOTALL)
    content = re.sub(r' on\w+="[^"]*"', '', content)
    return content

@app.route('/convert', methods=['POST'])
def convert_dwg():
    file = request.files['file']
    if not file:
        return jsonify({'error': 'no file uploaded'}), 400
    src_path = '/tmp/input.dwg'
    file.save(src_path)

    # 读取DWG
    cad_image = cad.Image.load(src_path)

    # 转SVG
    svg_options = cad.SvgOptions()
    cad_image.save('/tmp/output.svg', svg_options)

    with open('/tmp/output.svg', 'r', encoding='utf-8') as f:
        svg_content = f.read()

    safe_svg = sanitize_svg(svg_content)
    return jsonify({'svg': safe_svg})

这段代码的核心就两步：cad.Image.load读DWG，save到SVG格式。Aspose会自己处理CAD坐标到SVG viewBox的映射，不需要手动干预。但要注意，这个库本身就是比较重量级的，首次调用时JIT初始化比较慢，在生产环境中不能放在请求线程里直接同步调用，建议用异步任务队列（Celery/RQ）处理，或者预启动一个常驻转换进程。

4.2 前端：TinyMCE自定义“导入CAD”按钮

javascript复制tinymce.init({
  selector: '#editor',
  plugins: 'code paste',
  toolbar: 'impcad',
  setup: function(editor) {
    editor.ui.registry.addButton('impcad', {
      text: '导入CAD',
      onAction: function() {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.dwg,.dxf';
        input.onchange = async function() {
          const fd = new FormData();
          fd.append('file', input.files[0]);
          const res = await fetch('/convert', { method: 'POST', body: fd });
          const data = await res.json();
          if (data.svg) {
            const wrapper = '<div class="cad-svg-wrap">' + data.svg + '</div>';
            editor.execCommand('mceInsertContent', false, wrapper);
          }
        };
        input.click();
      }
    });
  },
  extended_valid_elements: 'svg[*],path[*],circle[*],line[*],polyline[*],polygon[*],rect[*],g[*],text[*],image[*],use[*],desc[*]'
});

这里有个经验：插入SVG时外面套一个<div class="cad-svg-wrap">，一是方便后续给SVG统一设置CSS布局，二是防止编辑器的p标签包裹把SVG文本节点打散导致渲染异常。

4.3 SVG显示尺寸的动态处理

DWG转出的SVG宽度经常是几千像素，需要在前端进行统一处理。我一般会在插入前读取viewBox，然后动态设置width="100%"，同时给外层容器加overflow:auto，这样图表在编辑区自动缩放，双击查看时再考虑放大。

javascript复制function resizeSvg(svgElement) {
  const viewBox = svgElement.getAttribute('viewBox');
  if (viewBox) {
    svgElement.setAttribute('width', '100%');
    svgElement.setAttribute('height', 'auto');
  }
}

如果图纸特别复杂，SVG有几万甚至几十万个节点，浏览器渲染会比较吃力。此时可以在转换服务里做两步简化：一是通过--export-area-page之类的参数限制输出区域，二是对路径做简化（比如去掉不必要的精确小数点后多余位数），控制SVG体积。

5. 常见问题与排查技巧实录

5.1 典型问题速查表

5.2 一个折腾了我最久的坑：TinyMCE粘贴拦截与SVG冲突

有一次测试时发现，TinyMCE默认开启了paste插件后，如果用户在编辑器里粘贴一段包含SVG的HTML（比如从另一个编辑器里复制的图表），编辑器会自动把SVG过滤成一个空字符串。排查了半天，最终定位是TinyMCE内部的paste插件在process阶段会运行自己的HTML过滤规则，这个规则先于extended_valid_elements执行。

解决办法是在paste_preprocess回调里把剪贴板里的SVG先抓出来，绕过默认过滤逻辑：

javascript复制paste_preprocess: function(plugin, args) {
  if (args.content.includes('<svg')) {
    // 保留SVG，不做默认的process
    args.content = args.content;
  } else {
    args.content = tinymce.html.Serializer({}).serialize(
      tinymce.html.DomParser().parse(args.content)
    );
  }
}

后来我们干脆把SVG插入统一改成走自定义按钮+mceInsertContent，不再依赖用户从外部复制粘贴SVG，从根本上绕开了这个坑。

5.3 性能与容量：图纸转换服务要如何设计

芯片企业的图纸文件普遍较大，一张封装基板设计图可能就有几百MB，虽然日常文档引用通常只需要其中的一个局部视图。转换服务如果每次把整个DWG全量转换成SVG，几万根走线全部变成SVG节点，浏览器根本扛不住。

我最终采用的是“局部转换+区域裁剪”策略：

• 转换服务先解析DWG基本信息，获取模型的边界范围；
• 前端打开“导入CAD”对话框时，提供一个可选的“取框范围”输入：用户可以在图纸里指定要导出的左下角坐标和右上角坐标；
• 服务端根据这个范围裁剪后再输出SVG。

这样既能保证矢量输出，又不会因为超复杂图纸把浏览器卡死。缺点是用户需要多填一次坐标，但习惯了之后效率很高。如果不想让用户手输坐标，也可以让CAD端工程师提前用WBLOCK命令把要发布的图块单独存成一个小DWG，这样转换服务处理时压力就小很多。

5.4 打印与PDF导出的注意事项

矢量SVG在屏幕上显示没问题，但到了打印环节还会有一层坑：TinyMCE默认的打印样式表不会给SVG设置合适的分辨率和线宽。如果用户在编辑器里直接点击浏览器打印，PDF输出里的SVG可能线条过细或者过粗。

建议在内容CSS里加上：

css复制.cad-svg-wrap svg {
  shape-rendering: geometricPrecision;
}
.cad-svg-wrap path {
  fill: none;
  stroke-width: 0.3mm;
}

注意stroke-width用物理单位毫米，而不是像素。这样无论浏览器缩放倍率多少，打印出来线宽始终符合CAD图纸的可读性要求。如果有些图元本身带有自定义stroke-width，这个CSS规则会被覆盖，可以在CSS里补一句stroke-width: 0.3mm !important;，但这样做会把所有线都统一成同一种粗细，丢失图层线型的层次感，具体取舍要看实际需求。

6. 经验总结与后续扩展方向

6.1 整体方案的落地体会

说实话，CAD图纸进TinyMCE这个需求，看起来是个“前端粘贴”的小问题，但深入做下去会发现它牵扯到CAD格式解析、矢量渲染、编辑器安全、企业文档归档规则等多个层面。只看前端是不行的，只看CAD也是不行的，必须有人把整条链路串起来。

我最大的体会是：不要把“粘贴”当入口。一旦依赖Ctrl+V，就默认接受了操作系统的剪贴板格式限制。剪贴板里的图纸在传给浏览器之前，已经被AutoCAD/OS转换过一轮了，天然不利于矢量保留。真正可靠的方案永远是把“源文件”提交到服务端，由服务端转换成Web友好格式。

6.2 可以继续扩展的三个方向

这个方案跑通之后，可以顺带做几件很有价值的事。

第一是SVG图幅批注。TinyMCE里的SVG既然保留了矢量结构，就可以在上面叠加批注层（比如圆圈标记、高亮线框），用于工程师之间的图文评审。这个用SVG的<g>容器加上TinyMCE的contenteditable属性就能做。

第二是图号追溯。DWG/DXF里通常有标题栏信息（图号、版本、设计者）。转换服务在输出SVG的同时，可以提取这些属性存到后台数据库里。这样以后在编辑器里看见某张CAD图，鼠标悬停就能显示图号和版本，还能跳转到PLM系统查看原始图纸。

第三是批量转换。如果企业有历史遗留的几千张老图纸，可以写一个扫描任务，把所有DWG/DXF批量转成SVG归档。这样知识库后台搜索图纸内容时，就不只是搜文件名，还能搜出图里的文本标注和尺寸信息，对芯片制造企业这种文档密集型场景来说，检索效率提升非常明显。

6.3 最后分享一个小技巧

如果你已经上了服务端转换方案，但又不想太早改动现有TinyMCE升级流程，有一个过渡办法：在编辑器初始化时注册一个paste_postprocess回调，把用户粘贴进来的DIB位图自动上传到后端，让后端尝试做一次“位图反向矢量化”。当然这个方案对线条图效果还行，对复杂实体效果不稳定，只能作为过渡期兜底，最终还是要把入口切换到“导入CAD”。

从实际使用反馈来看，工程师们对“导入CAD”这个方案的接受度很高，核心原因是转换出的SVG在文档里可以无损缩放，报告在投影仪上放大看细节也依然锐利。对一个芯片制造企业来说，光这点就值得把整条转换链路搭起来。