如何通过JavaScript获取mxGraph编辑器中的XML数据？

嘿，我来帮你搞定这个问题！你之前写的代码里有个关键问题：你自己新建了一个new Graph()实例，但这是个全新的空图，根本不是编辑器里你正在编辑的那个图，所以自然拿不到数据。下面给你两种可行的实现方式：

方式一：通过编辑器实例直接获取（最简便） #

官方编辑器已经提供了直接获取XML节点的方法，你只需要把它转成字符串就行：

// 获取编辑器生成的XML节点，转成字符串
var xmlString = mxUtils.getXml(EditorUi.editor.getGraphXml());
// 打印结果
console.log("当前图的XML数据：");
console.log(xmlString);
// 如果需要URL编码用于网络传输，再加一步
var encodedXml = encodeURIComponent(xmlString);
console.log("URL编码后的XML：");
console.log(encodedXml);

方式二：通过graph模型编码获取（更灵活） #

如果你需要更灵活地控制编码过程，可以直接操作graph的模型：

// 获取编辑器中当前正在使用的graph实例（重点！不要自己new Graph）
var graph = EditorUi.editor.graph;
// 创建编码工具
var encoder = new mxCodec();
// 编码graph的数据模型
var xmlNode = encoder.encode(graph.getModel());
// 把XML节点转成字符串
var xmlString = mxUtils.getXml(xmlNode);
// 输出结果
console.log("原始XML字符串：");
console.log(xmlString);

为啥你的代码不行？ #

你之前写的var graph = new Graph();是创建了一个全新的空画布，和编辑器里你正在编辑的图完全没关系，所以编码出来的自然是空数据。一定要用编辑器已有的EditorUi.editor.graph实例，这才是当前编辑的图对象～

内容的提问来源于stack exchange，提问作者Simon