sspxml: Javascript XML-Editor (web-based)

Demo

Get XMLExtract Textnodes

Special keys:

Ctrl-A : select all
Ctrl-M at start-element name: select element
Ctrl-U : make selected text lower-case
Ctrl-Shift-U : make selected text upper-case.

<script src="/js/sspxml-1.min.js" ></script>
<div id="id_demo"></div> 
<p>
  <button id="buttondemosspxml" >Get XML</button>
  <button id="buttondemosspxmltn" >Extract Textnodes</button>
</p>

// initialize sspxml-control
$('#id_demo').sspxml({ 
  xml: $.parseXML('<plants>...</plants>'),
  edit: true 
});

// handle button click-events
$("#buttondemosspxml").click(function () {
  try{
    alert($('#id_demo').sspxml('get', { formatted: true }));
  }
  catch (e) { alert(e.message) }
});

$("#buttondemosspxmltn").click(function () {
  try {
    alert($('#id_demo').sspxml('get', { sepTextNodes: true }));
  }
  catch (e) { alert(e.message) }
}); 

$('#id_demo').sspxml({
  xml: $.parseXML('<dummy><a/><b/></dummy>'),
  edit: true,
  childrenOnly: true 
}); 

// as text (without validation): 
var txt = $('#id_demo').sspxml('get'); 

// as formatted text (with validation):
var txt = $('#id_demo').sspxml(
            'get', { formatted: true });

// as XML-DOM-object (with validation): 
var doc = $('#id_demo').sspxml(
            'get', { asDocument: true }); 

// fragment as XML-DOM-object with root-element "myroot": 
var doc = $('#id_demo').sspxml(
            'get', { asDocument: true, root: 'myroot' }); 

/* Separated textnodes (with validation); all in the document
   contained textnodes are extracted to a string, where the
   textnodes are separated by the character '|' (or a character
   passed in property "separator"), newline-characters are replaced 
   with ' '. Double entries are avoided.
   This can help to implement search-operations with XML-formatted
   informations, where structure (like element-names) shall be ignored. 
   Another property "includeCDATA" controls, whether
   content of CDATA-sections shall be also processed (default: false).
*/
var txt = $('#id_demo').sspxml('get', { getSepTextNodes: true }); 

As input an XML-DOM-object is passed (or a string with a valid XML-document, which is parsed during initialization).

If no XML (or no parameter at all) is passed, sspxml will try to parse the content of the HTML-placeholder. If this is a textnode with valid XML, the textnode is removed and the control is initialized with the parsed XML:

<script src="/js/sspxml-1.min.js" ></script>
<h3>Sample 1</h3>
<div class="xmlsample">
  &lt;demo&gt;
    &lt;sample&gt;
      Test with textnode
    &lt;/sample&gt;
  &lt;/demo&gt;
</div>

<h3>Sample 2</h3>
<div class="xmlsample">
  &lt;animals&gt;
    &lt;cats color="black" /&gt;
    &lt;dogs color="white" /&gt;
  &lt;/animals&gt;
</div>

<script>
  // Initialization with defaults (read-only)
  $(".xmlsample").sspxml();
</script> 

Features and Restrictions

sspxml is an XML-node-editor with syntax-highlighting.

• An arbitrary formatting by the user is not possible, the XML is always rendered standard formatted. However, line breaks in textnodes are preserved.
• From clipboard, only such XML-snippets can be pasted, which would be syntactically valid at the insert position in principle.
• Input is being analyzed during typing to a large extend and will be formatted and completed, or blocked where appropriate. A final validation can be performed when edited XML is retrieved (by parsing with the browser's XML-parser; parser-Exception, if not "well-formed"). A validation beyond that must be done elsewhere (e.g. server-side or explicitly with Javascript).
• Elements can be collapsed and renamed at their start-tags.
• Navigation and selection by keyboard is widely supported (cursor keys, tab, navigation keys, Ctrl-A, etc.).
• The required CSS and the images for the expand buttons are already contained in the js-file.
• sspxml is a jQuery-plugin and requires a current version of the library  jQuery at runtime.

The following XML-node-types are not supported by sspxml, because they a rarely required and most often avoidable:

• Document Type Nodes
• Notation Nodes
• Entity Nodes
• Entity Reference Nodes

These node types were not implemented deliberately to keep the editor's code small.

Do not use sspxml, if you are required to support at least one of these node types.

"sspxml" is provided for download as test-version in the protected area of our website at tab "Media" (exclusively for testing purposes!).