Documentation Center

Customize behavior with the JavaScript API

Via the API developers can take control over the content beyond what an XML Schema provides.

Our event-based JavaScript API makes it possible to add additional logic to the editing process. This removes the need to resort to post-editing workflow steps. Knowledge Center validates the API call results against the schema. Using these events you can significantly improve the user experience by assisting the user actions on the document. The load event is the first step in working with the event API:
Editor.addEventListener("load", myLoadHandler);
After Knowledge Center has loaded, the JavaScript API has access to the document and you can add listeners for other events on the document:
function myLoadHandler(evt) {
	var doc = Editor.getActiveDocument();
	doc.addEventListener("XopusAfterChildInserted", myChildInsertedHandler);
}

Every event passes an argument to its handler, the event itself. The event usually gives access to:

  • The DOM node involved
  • Values of the action
  • Event methods, for example to cancel the event
Knowledge Center implements its own Document Object Model (DOM) to access and modify the document. This model provides most of the standard W3C DOM objects and methods. Note that properties are usually implemented as methods in our API:
function myChildInsertedHandler(evt) {
	var node = evt.childNode;
	var parent = node.getParentNode();
	var children = node.getChildNodes();
	// node.selectNodes("date")
	// node.getXML()
	// etc.
}

With these methods you can control, prevent or assist an event and its actions on the document. You can, for instance, prevent the property editor from popping up, by writing values for required attributes in advance

It is also possible to pass a DOM node from the XSL Stylesheet to the JavaScript code. The node argument in this example refers to the <date> element from the match. This is passed as an XopusElement DOM node to the editDate function:
<xsl:template match="date">
	<div onclick="editDate(node);">
		<xsl:value-of select="."/>
	</div>
</xsl:template>
Please refer to the API reference documentation for more information on all events and their signatures.