通过 urlParam 在 MxGraph 中打开本地文件

Question

如何在 grapheditor 中通过 urlParam 传递名称打开本地文件？我在 index.html 中尝试使用此代码，但它不起作用。

      var editor = new EditorUi(new Editor(urlParams['chrome'] == '0', themes));

        try
        {
          editor.open(encodeURI(urlParams['xml']));
        }
        catch (e)
        {
          mxUtils.error('Cannot open ' + urlParams['xml'] +
            ': ' + e.message, 280, true);
        }

提前致谢。

Answer 1

我也不得不这样做。如果您在本地有一个服务器运行来提供您的文件，这将很有帮助。例如：

python -m SimpleHTTPServer 8000

此命令将启动一个简单的服务器，以便您的浏览器可以发送 AJAX 请求以从您的文件系统加载文件。

我必须假设以下设置：您在文件 index.html 的一个文件夹中有 mxGraph 运行，并且同一文件夹包含另一个包含您的 xml 的文件夹。像这样：

index.html
/xmls/1.xml
/xmls/2.xml
...

这是您执行启动服务器的命令。现在您可以在此处访问您的应用程序：localhost:8000/index.html

您通过添加 GET 参数来识别硬盘驱动器上的文件是正确的。

例如：localhost:8000/index.html?xml=1.xml

要使该示例正常工作，结构应与 GraphEditor (https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html) 相当。克隆这个项目并使用它是个好主意。

现在，在您的 index.html 中，您可以添加如下内容：

function open_xml_on_init(editorUi) {
var xml_file_path = 'xml/' + urlParams['xml'];
if (urlParams['xml'] != null && urlParams['xml'].length > 0) {
    var splitted = xml_file_path.split('/');
    var only_name = splitted[splitted.length - 1];
    editorUi.editor.filename = only_name;
    var req = mxUtils.get(xml_file_path, mxUtils.bind(this, function (req) {
        if (req.request.status >= 200 && req.request.status <= 299) {
            if (req.request.response.length > 0) {
                editorUi.editor.graph.model.beginUpdate();
                try {
                    var xmlElem = mxUtils.parseXml(req.request.response).documentElement;
                    editorUi.editor.setGraphXml(xmlElem);

                }
                catch (e) {
                    console.error(e);
                }
                finally {
                    editorUi.editor.graph.model.endUpdate();
                }
            }
        }
    }));
}
}

运行这个方法在你的某个地方 index.html 你可以开始了！

open_xml_on_init(editor_ui);

通过 urlParam 在 MxGraph 中打开本地文件

Opening local files in MxGraph via urlParam

file

local

mxgraph