如何从mxGrpah图获取XML？
- 指向mxGraph diagram sample中的index.html
- 能够使用编辑器绘制图表
- 已启用本地存储
- 能够从本地存储中获取XML
Editor.useLocalStorage = true;
var temp = localStorage['testing.xml'];
console.log(temp);
但是，我想在不使用本地存储的情况下动态获取XML，所以我使用了mxGraph -Save functionality not working locally中的代码，但是它抛出了未定义图
let encoder = new mxCodec();
let result = encoder.encode(graph.getModel());
let xml = mxUtils.getXml(result);
代码：
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
<head>
<title>Grapheditor</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
<script type="text/javascript">
// Parses URL parameters. Supported parameters are:
// - lang=xy: Specifies the language of the user interface.
// - touch=1: Enables a touch-style user interface.
// - storage=local: Enables HTML5 local storage.
// - chrome=0: Chromeless mode.
var urlParams = (function(url)
{
var result = new Object();
var idx = url.lastIndexOf('?');
if (idx > 0)
{
var params = url.substring(idx + 1).split('&');
for (var i = 0; i < params.length; i++)
{
idx = params[i].indexOf('=');
if (idx > 0)
{
result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
}
}
}
return result;
})(window.location.href);
// Default resources are included in grapheditor resources
mxLoadResources = false;
</script>
<script type="text/javascript" src="js/Init.js"></script>
<script type="text/javascript" src="deflate/pako.min.js"></script>
<script type="text/javascript" src="deflate/base64.js"></script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script type="text/javascript" src="sanitizer/sanitizer.min.js"></script>
<script type="text/javascript" src="../../../src/js/mxClient.js"></script>
<script type="text/javascript" src="js/EditorUi.js"></script>
<script type="text/javascript" src="js/Editor.js"></script>
<script type="text/javascript" src="js/Sidebar.js"></script>
<script type="text/javascript" src="js/Graph.js"></script>
<script type="text/javascript" src="js/Format.js"></script>
<script type="text/javascript" src="js/Shapes.js"></script>
<script type="text/javascript" src="js/Actions.js"></script>
<script type="text/javascript" src="js/Menus.js"></script>
<script type="text/javascript" src="js/Toolbar.js"></script>
<script type="text/javascript" src="js/Dialogs.js"></script>
</head>
<body class="">
<div class="actions" style="margin-bottom:25px">
<input type="button" value="Save" onclick="getxml()" />
</div>
</br></br></br></br></br>
<div class="geEditor">
<script type="text/javascript">
function getxml(){
console.log("Show XML");
var temp = localStorage['testing.xml'];
console.log(temp);
/* var graph = new Graph();
var encoder = new mxCodec();
//var result = encoder.encode(this.graph.getModel());
//var xmlString = encodeURIComponent(mxUtils.getXml(result));
var xml = mxUtils.getXml(Editor.prototype.getGraphXml());
console.log("Direct XML");
console.log(xmlString); */
//console.log(xml);
/* var graph = new Graph();
//var encoder = new mxCodec();
var node = encoder.encode(graph.getModel());
var graphXML =mxUtils.getPrettyXml(node); */
//var graphXMLWhole = mxUtils.getPrettyXml(Editor.prototype.getGraphXml());
//mxUtils.popup(mxUtils.getPrettyXml(node), true)
//var graph = this.editorUi.editor.graph;
/* var editorui = EditorUi;
var xmlString = mxUtils.getXml(editorUi.editor.getGraphXml());
*/
//console.log(xmlString);
/* var encoder = new mxCodec();
var node = encoder.encode(graph.getModel());
var testString = mxUtils.getXml(node);
console.log(testString);
*/
/* var encoder = new mxCodec();
//let graph = new Graph();
var editor = this.editor || new Editor();
var graph = this.editor.graph || new Graph(); */
/* // var model = graph.getxml();
var result = encoder.encode(graph.getModel()); //where graph is the object you are using
var xml = mxUtils.getXml(result);
console.log(xml);
//var xml = mxUtils.getXml(result); //now the global variable 'xml' is assigned with the xml value of the graph
*/
var encoder = new mxCodec();
var node = encoder.encode(graph.getmodel());
var xml = mxutils.getxml(node); //mxutils.popup(xml, true); return xml;
// var xml = mxUtils.getXml(this.editor.getGraphXml())
console.log(xml);
}
// Extends EditorUi to update I/O action states based on availability of backend
(function()
{
var editorUiInit = EditorUi.prototype.init;
Editor.useLocalStorage = true;
EditorUi.prototype.init = function()
{
editorUiInit.apply(this, arguments);
this.actions.get('export').setEnabled(false);
// Updates action states which require a backend
if (!Editor.useLocalStorage)
{
mxUtils.post(OPEN_URL, '', mxUtils.bind(this, function(req)
{
var enabled = req.getStatus() != 404;
this.actions.get('open').setEnabled(enabled || Graph.fileSupport);
this.actions.get('import').setEnabled(enabled || Graph.fileSupport);
this.actions.get('save').setEnabled(true)
this.actions.get('saveAs').setEnabled(true);
this.actions.get('export').setEnabled(enabled);
}));
}
};
console.log("on init");
// Adds required resources (disables loading of fallback properties, this can only
// be used if we know that all keys are defined in the language specific file)
mxResources.loadDefaultBundle = false;
var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) ||
mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);
// Fixes possible asynchronous requests
mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function(xhr)
{
// Adds bundle text to resources
mxResources.parse(xhr[0].getText());
// Configures the default graph theme
var themes = new Object();
themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();
// Main
new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
}, function()
{
document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
});
})();
</script>
</div>
</body>
</html>
3 个答案:
答案 0 :(得分：1)
好吧，在www/index.html那里似乎要仿效您的示例，我对Graph的存在并不十分清楚，因此可以检索它，但我建议您采用以下解决方法来解决您的问题问题：
1）添加一个额外的变量，该变量保持图形的“ xml”状态，您可以随时检索
在/examples/grapheditor/www/js/Graph.js中添加以下变量
Graph.xml = "";
2）在Graph.js的this.graph.click事件上，添加代码以进行检索，以在每次更改时更新保存图的xml状态的Graph.xml变量，因此的
this.graph.click = mxUtils.bind(this, function(me)
{
graphClick.apply(this.graph, arguments);
if (this.currentState != null && !this.graph.isCellSelected(this.currentState.cell) &&
mxEvent.isTouchEvent(me.getEvent()) && !this.graph.model.isVertex(me.getCell()))
{
this.reset();
}
});
添加以下内容：
this.graph.click = mxUtils.bind(this, function(me)
{
let encoder = new mxCodec();
let result = encoder.encode(this.graph.getModel()); //where graph is the object you are using
Graph.xml = mxUtils.getXml(result);
graphClick.apply(this.graph, arguments);
if (this.currentState != null && !this.graph.isCellSelected(this.currentState.cell) &&
mxEvent.isTouchEvent(me.getEvent()) && !this.graph.model.isVertex(me.getCell()))
{
this.reset();
}
});
因此，当您需要画布的xml状态时，应调用Graph.xml，这在本地环境中对我有用
答案 1 :(得分：0)
您尝试过吗？
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(graph.getModel());
var xmlString = mxUtils.getXml(node);
答案 2 :(得分：0)
<?php
// Includes the mxGraph library
include_once("_js/mxgraph/php/src/mxServer.php");
$xml = $_POST['xml'];
$xml = output_html($xml);
$xml = str_replace("%3C", "<", $xml);
$xml = str_replace("%3E", ">", $xml);
$xml = str_replace("%22", '"', $xml);
$xml = str_replace("%20", " ", $xml);
$xml = str_replace("%3D", "=", $xml);
$xml = str_replace("%2F", "/", $xml);
$xml = str_replace("%3B", ";", $xml);
$xml = str_replace("%23", "#", $xml);
// XML
$fh = fopen("xml.xml", "w+");
fputs($fh, stripslashes($xml));
fclose($fh);
?>
output_html：
<?php
/**
*
* File: _admin/_functions/output_html.php
* Version 2 - Updated 19:31 06.03.2015
* Copyright (c) 2008-2015 S. Ditlefsen
* License: http://opensource.org/licenses/gpl-license.php GNU Public License
*
*
*
* -----> Please also see: encode_national_letters.php <-----
* encode_national_letters.php are used when this class cannot be used, because
* this class also removes html entities. Example SQL with links, bold text etc
*
*
*/
function output_html($value){
// Stripslashes
$value = htmlentities($value);
$value = str_replace('"',""","$value");
$value = str_replace("'","'","$value");
$value = str_replace("<",">","$value"); // less than
$value = str_replace(">","<","$value"); // greater than
$value = str_replace("\n","<br />","$value");
// Trim and line space
$value = trim($value);
// Math
$value = str_replace("&#699;","'","$value");
$value = str_replace("&#3647;","฿","$value");
$value = str_replace("&#960;","π","$value"); // pi
$value = str_replace("&#966;","φ","$value"); // phi
$value = str_replace('÷', '÷', $value); // Yeah, I know. But otherwise the gap is confusing. --Kris
// Check last, if it is backslash, then replace it...
$check = substr($value, -1);
$check = "^" . $check . "^";
if($check == "^\^"){
$new_value = substr($value, 0, -1);
$value = $new_value . "\";
}
// A
$value = str_replace('æ', 'æ', $value);
$value = str_replace("æ", "æ", $value);
$value = str_replace("&aelig;", "æ", $value);
$value = str_replace('ø', 'ø', $value);
$value = str_replace('ø', 'ø', $value);
$value = str_replace('&oslash;', 'ø', $value);
$value = str_replace("å", "å", $value);
$value = str_replace("Ã¥", "å", $value);
$value = str_replace("&aring;", "å", $value);
$value = str_replace('Æ', 'Æ', $value);
$value = str_replace('Æ', 'Æ', $value);
$value = str_replace('&AElig;', 'Æ', $value);
$value = str_replace('Å', 'Å', $value);
$value = str_replace('Ã…', 'Å', $value);
$value = str_replace('&Aring;', 'Å', $value);
$value = str_replace('á', 'á', $value);
$value = str_replace('à', 'à', $value);
$value = str_replace('À', 'À', $value);
$value = str_replace('â', 'â', $value);
$value = str_replace('Â', 'Â', $value);
$value = str_replace('Á', 'Á', $value);
$value = str_replace('Ä', 'Ä', $value);
$value = str_replace('ä', 'ä', $value);
$value = str_replace('À', 'À', $value);
$value = str_replace('Á', 'Á', $value);
// $value = str_replace('Â', 'Â', $value);
// $value = str_replace('Ã', 'Ã', $value);
$value = str_replace('Ä', 'Ä', $value);
$value = str_replace('à', 'à', $value);
$value = str_replace('á', 'á', $value);
$value = str_replace('â', 'â', $value);
$value = str_replace('ã', 'ã', $value);
$value = str_replace('ä', 'ä', $value);
// C
$value = str_replace('Ç', 'Ç', $value);
$value = str_replace('ç', 'ç', $value);
// E
$value = str_replace('è', 'è', $value);
$value = str_replace('È', 'È', $value);
$value = str_replace('é', 'é', $value);
$value = str_replace('É', 'É', $value);
$value = str_replace('ê', 'ê', $value);
$value = str_replace('Ê', 'Ê', $value);
$value = str_replace('ë', 'ë', $value);
$value = str_replace('Ë', 'Ë', $value);
$value = str_replace('È', 'È', $value);
$value = str_replace('É', 'É', $value);
$value = str_replace('Ê', 'Ê', $value);
$value = str_replace('Ë', 'Ë', $value);
$value = str_replace('è', 'è', $value);
$value = str_replace('é', 'é', $value);
$value = str_replace('ê', 'ê', $value);
$value = str_replace('ë', 'ë', $value);
// I
$value = str_replace('î', 'î', $value);
$value = str_replace('Î', 'Î', $value);
$value = str_replace('ï', 'ï', $value);
$value = str_replace('Ï', 'Ï', $value);
$value = str_replace('Í', 'Í', $value);
$value = str_replace('í', 'í', $value);
$value = str_replace('¿', '¿', $value);
$value = str_replace('¡', '¡', $value);
$value = str_replace('Ì', 'Ì', $value);
$value = str_replace('Í', 'Í', $value);
$value = str_replace('Î', 'Î', $value);
$value = str_replace('Ï', 'Ï', $value);
$value = str_replace('ì', 'ì', $value);
$value = str_replace('í', 'í', $value);
$value = str_replace('î', 'î', $value);
$value = str_replace('ï', 'ï', $value);
// D
$value = str_replace('Ð', 'Ð', $value);
// N
$value = str_replace('Ñ', 'Ñ', $value);
$value = str_replace('ñ', 'ñ', $value);
$value = str_replace('Ñ', 'Ñ', $value);
// O
$value = str_replace('Ø', 'Ø', $value);
$value = str_replace('Ø', 'Ø', $value);
$value = str_replace('&Oslash;', 'Ø', $value);
$value = str_replace('ô', 'ô', $value);
$value = str_replace('Ô', 'Ô', $value);
$value = str_replace('Ó', 'Ó', $value);
$value = str_replace('ó', 'ó', $value);
$value = str_replace('º', 'º', $value);
$value = str_replace('ª', 'ª', $value);
$value = str_replace('Ö', 'Ö', $value);
$value = str_replace('ö', 'ö', $value);
$value = str_replace('Ò', 'Ò', $value);
$value = str_replace('Ó', 'Ó', $value);
$value = str_replace('Ô', 'Ô', $value);
$value = str_replace('Õ', 'Õ', $value);
$value = str_replace('Ö', 'Ö', $value);
$value = str_replace('ð', 'ð', $value);
$value = str_replace('ñ', 'ñ', $value);
$value = str_replace('ò', 'ò', $value);
$value = str_replace('ó', 'ó', $value);
$value = str_replace('ô', 'ô', $value);
$value = str_replace('õ', 'õ', $value);
$value = str_replace('ö', 'ö', $value);
// P
$value = str_replace('Þ', 'Þ', $value);
$value = str_replace('þ', 'þ', $value);
// S
$value = str_replace('ß', 'ß', $value);
// U
$value = str_replace('ù', 'ù', $value);
$value = str_replace('Ù', 'Ù', $value);
$value = str_replace('û', 'û', $value);
$value = str_replace('Û', 'Û', $value);
$value = str_replace('ü', 'ü', $value);
$value = str_replace('Ü', 'Ü', $value);
$value = str_replace('Ú', 'Ú', $value);
$value = str_replace('ú', 'ú', $value);
$value = str_replace('ü', 'ü', $value);
$value = str_replace('Ù', 'Ù', $value);
$value = str_replace('Ú', 'Ú', $value);
$value = str_replace('Û', 'Û', $value);
$value = str_replace('Ü', 'Ü', $value);
$value = str_replace('ù', 'ù', $value);
$value = str_replace('ú', 'ú', $value);
$value = str_replace('û', 'û', $value);
$value = str_replace('ü', 'ü', $value);
// Y
$value = str_replace('ÿ', 'ÿ', $value);
$value = str_replace('Ÿ', 'Ÿ', $value);
$value = str_replace('Ý', 'Ý', $value);
$value = str_replace('ý', 'ý', $value);
$value = str_replace('ÿ', 'ÿ', $value);
// X
$value = str_replace('×', '×', $value); // Yeah, I know. But otherwise the gap is confusing. --Kris
// Other
$value = str_replace('ç', 'ç', $value);
$value = str_replace('Ç', 'Ç', $value);
$value = str_replace('œ', 'œ', $value);
$value = str_replace('Œ', 'Œ', $value);
//Punctuation
$value = str_replace('«', '«', $value);
$value = str_replace('»', '»', $value);
$value = str_replace('‹', '‹', $value);
$value = str_replace('›', '›', $value);
$value = str_replace('“', '“', $value);
$value = str_replace('”', '”', $value);
$value = str_replace('‘', '‘', $value);
$value = str_replace('’', '’', $value);
$value = str_replace('—', '—', $value);
$value = str_replace('–', '–', $value);
// Money
$value = str_replace('€', '€', $value);
// Degree
$value = str_replace('°', '°', $value);
$value = str_replace('&deg;', '°', $value);
// &
$value = str_replace('&amp;', '&', $value);
// Return
return $value;
}
?>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？