- Pointed index.html from mxGraph diagram sample
- Able to draw the diagrams using editor
- Enabled local storage
- Able to get the XML from local storage
Editor.useLocalStorage = true;
var temp = localStorage['testing.xml'];
console.log(temp);But, I want to get the XML dynamically without using local storage, So I used the code from mxGraph -Save functionality not working locally but it's throwing graph is not defined
let encoder = new mxCodec();
let result = encoder.encode(graph.getModel());
let xml = mxUtils.getXml(result);
Code:
<!--[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>
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/lWrwR.png', '推荐 我命由我不由天 的文章《How to get the XML from mxGrpah diagram?》','https://www.manongdao.com/article-1837353.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}