en

sspxml: XML-Editor-Control (Javascript)

sspxml ist ein leichtgewichtiger (ca. 40KB) XML-Editor für kleine bis mittelgroße XML-Dokumente und XML-Fragmente. Der Editor eignet sich hervorragend für die Erfassung von XML im Browser, z.B. innerhalb eines CMS-Frontends oder zur Pflege von Konfigurationen. Im Nur-Lesen-Modus bietet sspxml eine elegante Möglichkeit zur formschönen Darstellung von XML auf Webseiten.

Demo

Spezielle Tasten:

Strg-A: Alles selektieren
Strg-M im Start-Elementnamen: Element selektieren
Strg-U: Selektierten Text in kleine Zeichen wandeln
Strg-Shift-U: Selektierten Text in große Zeichen wandeln

Einbinden von Script, Platzhalter und Button

<script src="/js/sspxml-1.min.js" ></script>
<div id="id_demo"></div> 
<p >
  <button id="buttondemosspxml" >XML abholen</button>
  <button id="buttondemosspxmltn" >Textknoten extrahieren</button>
</p>

Initialisierung mit Dokument

// 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) }
}); 

Initialisierung mit Fragment "<a/><b/>"

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

Abholen des bearbeiteten Dokuments

// als Text (ohne Validierung): 
var txt = $('#id_demo').sspxml('get'); 

// als formatierten Text (mit Validierung):
var txt = $('#id_demo').sspxml(
            'get', { formatted: true });

// als XML-DOM-Object (mit Validierung): 
var doc = $('#id_demo').sspxml(
            'get', { asDocument: true }); 

// Fragment als XML-DOM-Object mit root-element "myroot": 
var doc = $('#id_demo').sspxml(
            'get', { asDocument: true, root: 'myroot' }); 

/* Separierte Textknoten (mit Validierung); hierbei werden
   alle im XML enthaltenen Textknoten, separiert durch das
   Zeichen '|' (oder ein in den Optionen als "separator" 
   übergebenes Zeichen), aneinander gereiht, Zeilenumbrüche 
   werden durch ' ' (Leerzeichen) ersetzt, Doppeleinträge vermieden.
   Dies kann helfen, eine Stichwortsuche in XML-formatierten 
   Informationen zu realisieren, bei der XML-Elementnamen etc.  
   ignoriert werden sollen.
   Ein weiteres Property "includeCDATA" in den Optionen steuert,
   ob auch der Inhalt von CDATA-Sections verarbeitet werden soll
   (default: false).
 */
var txt = $('#id_demo').sspxml('get', { getSepTextNodes: true }); 

Als Input wird ein XML-DOM-Object übergeben (oder ein String mit einem validen XML-Dokument in Textform, dieser wird bei der Initialisierung geparsed).

Wird kein XML (oder gar kein Parameter) übergeben, wird versucht, den Inhalt des HTML-Platzhalters als XML zu parsen. Ist dies ein Textknoten mit gültigem XML, wird der Textknoten entfernt und das Control mit dem geparsten XML initialisiert:

Initialisierung mit Textknoten

<script src="/js/sspxml-1.min.js" ></script>
<h3>Sample 1</h3>
<div class="xmlsample">
  &lt;demo&gt;
    &lt;sample&gt;
      Test mit Textknoten
    &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>
  // Initialisierung mit defaults (read-only)
  $(".xmlsample").sspxml();
</script> 

Sample 1

<demo><sample>Test mit Textknoten</sample></demo>

Sample 2

<animals><cats color="black"/><dogs color="white"/></animals>

Features und Einschränkungen

sspxml ist ein XML-Knoten-Editor mit Syntax-Highlighting.

  • Eine willkürliche Formatierung durch den Anwender ist nicht möglich, das XML wird stets in der Standardformatierung dargestellt. Zeilenumbrüche in Textknoten bleiben jedoch erhalten.
  • Über die Zwischenablage können nur XML-Schnipsel eingefügt werden, die syntaktisch an der Einfügestelle prinzipiell gültig sind.
  • Eingaben werden während des Tippens umfangreich analysiert und entsprechend formatiert und vervollständigt, ggf. auch blockiert. Eine abschließende Validierung kann beim Abholen des bearbeiteten XML (durch Parsen mit dem XML-Parser des Browsers; Parser-Exception, wenn nicht "wohlgeformt") durchgeführt werden. Eine darüber hinausgehende Validierung muss anderweitig (z.B. serverseitig oder durch explizite Prüfung per Javascript) implementiert werden.
  • Elemente können eingeklappt und im Start-Tag umbenannt werden.
  • Navigation und Markieren auch weitgehend mit Tastatur möglich (Cursortasten, Tab, Navigationstasten, Strg-A, etc.).
  • Das nötige CSS und die Grafiken der Expand-Buttons sind bereits in der js-Datei enthalten.
  • sspxml ist ein jQuery-Plugin und benötigt zur Laufzeit eine aktuelle Version der Bibliothek jQuery.

Folgende XML-Knotentypen werden von sspxml nicht unterstützt, da sie selten notwendig und i.d.R. vermeidbar sind:

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

Auf die Implementierung dieser Knotentypen wurde bewusst verzichtet, um den Editor-Code klein zu halten.

Verwenden Sie sspxml nicht, wenn Sie die Anforderung haben, mindestens einen dieser Knotentypen verarbeiten können zu müssen.

Eine Testversion können Sie im geschützten Bereich unserer Website im Bereich "Medien" (ausschließlich für Testzwecke!) downloaden.

sspxml wurde in aktuellen Versionen von Mozilla Firefox, MS Internet Explorer, MS Edge und Google Chrome erfolgreich getestet.