-
Notifications
You must be signed in to change notification settings - Fork 5
/
xml-editor.html
167 lines (165 loc) · 10.3 KB
/
xml-editor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Online XML Editor, XML Viewer - create, edit, format, view XML Online</title>
<link rel="stylesheet" href="files/css/style-xml-editor.css">
</head>
<body class="container-body" onload="load()">
<div id="container-advertisement-right" class="container-advertisement-right">
</div>
<div id='help-overlay' class='help-overlay'>
<div id='help-overlay-outer-div' class='help-overlay-outer-div'>
<div class="overlay-title-bar">
<span class="overlay-title">Help</span> <img
src='files/images/delete.png' class="close-overlay" title='close'
alt="Close" onclick="closeHelpOverlay('help-overlay','help-overlay-outer-div')" />
</div>
<div class="help-text">
XML stands for Extensible Markup Language. It is an open source, language independent,
human readable, data-interchange format. It was designed to store and transport data.
It is most commonly used for communication between two application running on different servers.
These application can be written on same technology or can be written on different technology.
It is comprise of tags ( start tag and end tag ) and data is stored inside those tags.
<h3>XML Editor :-</h3>
XML editor ( XML Viewer ) is an online web-based tool, designed to create, view, format, edit, save and share xml file.
This tool provides multiple features which will help you, to create simple and complex xml easily.
A list of all its features and functionality are as follows :-
<h4>Add Element :-</h4>
To add new element, first select the element node under which you like to add new element,
then click the Add Element icon on a right side of the bar,
once you click this icon, new element will be added to the selected node.
<h4>Add Text :-</h4>
To add new text, first select the element node under which you like to add new text,
then click the Add Text icon on the right side of the bar,
once you click this icon, new text will be added to the selected node.
<h4>Tree View :-</h4>
Tree view will show your working xml in a hierarchical model, you can select any node in the model to view or edit it's value.
It can be expanded by clicking expand image button on a right hand side of bar.
<h4>Text View :-</h4>
Text view is like a code editor, this will show your working xml in the text format.
You can edit your work in the code editor and can also load this to xml editor ( xml viewer ) by clicking load image button.
It can be expanded by clicking expand image button on a right hand side of the bar.
<h4>Download :-</h4>
You can download your existing work, which you have created using xml editor ( xml viewer ) tool.
To use this functionality, click download button on a navigation bar, this will download a file onto your system.
<h4>Load :-</h4>
To load any of your xml file into the tool, first copy and paste your existing work into the text view and then
click load image button on the bar.
<h4>New :-</h4>
Click the new button on the navigation bar to remove your existing work from the xml editor ( xml viewer ) tool,
So that you can start you development from the scratch.
<h4>Copy & Paste :-</h4>
You can copy and paste any node into another based on following two rules :-
<ol>
<li>Text cannot have a child node.</li>
<li>Element can have Text or Element as a child.</li>
</ol>
To use Copy & Paste functionality, first select the node which you like to copy,
then click the copy and paste icon on its bar and finally select the node inside
which you want to copy your previous selection. This will copy your previously selected
node inside new one. This Copy & Paste functionality is very useful, when you want add a new node,
which is similar to one of the existing node.
<h4>Delete :-</h4>
You can delete any node ( element or text ) from xml viewer.
To use this delete functionality, first select the node which you want to delete,
then click the delete icon on the right side of the bar,
once you click a delete icon an confirm dialog will be displayed, asking your confirmation for delete.
Confirm dialog will contain two buttons <strong>Ok</strong> and <strong>Cancel</strong>,
click <strong>OK</strong> to delete or click <strong>Cancel</strong> to leave it.
<h4>Save Online :-</h4>
You can use save online functionality to save and share your work.
To use this save functionality, click a save online button on the navigation bar.
This will save your work on a server and provide you a url with unique id,
this url can be used to view, edit and share your saved work with your colleagues.
<h4>Minify :-</h4>
Minify feature is used to minify your existing work present in the text view.
This feature can be used as a standalone, when your requirement is just to minify your work.
To use this feature, copy and paste your work in the code editor and click a minify image button on the bar.
<h4>Pretty Print :-</h4>
Pretty Print feature is used to pretty print your existing work in text view.
This feature can be used as a standalone, when your requirement is just to pretty print your work.
To use this feature, copy and paste your work in the code editor and click the pretty print image button on the bar.
</div>
</div>
</div>
<div id="container-main" class="container-main">
<div id="container-advertisement-top" class="container-advertisement-top">
<ul class="top-nav" id="top-nav">
<li><a onclick="openHelpOverlay('help-overlay','help-overlay-outer-div')">Help</a></li>
<li><a onclick='saveToCloud()'>Save Online</a></li>
<li><a onclick='saveToDisk()'>Download</a></li>
<li><a onclick='newXml()'>New</a></li>
</ul>
<div class='adv'>
</div>
<div>
<h1 class="header">XML Editor</h1>
</div>
</div>
<div id="container-toolbox" class="container-toolbox">
<div id="title-property-box" class="title-property-box">Property Box</div>
<div id="property-box" ></div>
</div>
<div id="container-tree-view" class="tab-tree-view">
<div class="title-tree-view">
<div class="title-text">Tree View</div>
<div class="title-image-div">
<img class="title-image" src="files/images/expand_all.png" alt='Expand Tree View' title='Expand Tree View'
onclick="expandTreeView('tree-view-table','large-tree','large-overlay')" />
<img id="delete-element" class="title-image" title='Delete' alt='Delete'
src="files/images/dustbin.png" onclick="deleteElement()"/>
<img id="copy-element" class="title-image" alt='Copy/Paste' title='Copy/Paste'
src="files/images/copy.png" onclick="copy()" />
<img id="add-element" class="title-image" alt='Add New Element Node' title='Add New Element Node'
src="files/images/addElement.png" onclick="addElementNode('element')" />
<img id="add-text" class="title-image" alt='Add New Text Node' title='Add New Text Node'
src="files/images/addText.png" onclick="addElementNode('text')" />
</div>
</div>
<div id="tree-view" class="tree-view">
<table id="tree-view-table">
<tbody>
<tr>
<td>
<img id='rootElement-div-img' alt='Collapse' title='Collapse' src="files/images/collapse.png"
class="collapse-indent"
onclick="treeCollapseImageOnClick('rootElement-div-table','rootElement-div-img','rootElement-div')" />
<div id="rootElement-div" class="tree-main-element"
onclick="treeDivOnClick('rootElement-div')">Root</div>
<br/>
<table id="rootElement-div-table" class="tree-table"><tbody></tbody></table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="container-text-view" class="tab-text-view">
<div class="title-text-view">
<div class="title-text">Text View</div>
<div class="title-image-div">
<img class="title-image" src="files/images/expand_all.png" alt="Expand Text View" title='Expand Text View'
onclick="expandTextView('xml-text','large-text','large-overlay')" />
<img class="title-image" src="files/images/load.png" alt="Load" title='Load'
onclick="loadXML()" />
<img class="title-image" src="files/images/minify.png" alt="Minify" title='Minify'
onclick="minifyXML()" />
<img class="title-image" src="files/images/format.png" alt="Pretty" title='Pretty'
onclick="prettyXML()" />
</div>
</div>
<textarea id="xml-text" class="xml-text"></textarea>
</div>
</div>
<div id='large-overlay' class='large-overlay' ></div>
<div id='loading-overlay' class='loading-overlay' >
<img id='loading' class="loading-image-overlay" src="files/images/loading.gif" alt="Loading"
title='Loading' />
</div>
</body>
<script type="text/javascript" src="files/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="files/js/vkbeautify.js"></script>
<script src="files/js/js-xml-editor.js" type="text/javascript"></script>
</html>