DITA Storm browser-based DITA XML Editor
by Inmedius Inc.
  
Edit | Dita
Edit | Dita

Editor Integration

Description: Provides instructions how to integrate DITA Storm editor into generic web application.

Integrating DITA Storm into HTML Page

Integrating DITA Storm into web application or content management system is a relatively simple procedure. You can either attach editor to the text field of your HTML form or load DITA document directly via HTTP request. Here are basic required steps:

  1. Include DITA Storm libraries. 
    <LINK href="DITAStorm/styles.css" rel="stylesheet" type="text/css"/>
<SCRIPT src="DITAStorm/DITAStorm.js" type="text/javascript"></SCRIPT>
  2. Render DITA Storm. At the selected location of HTML page place following code: 
    <SCRIPT>
    ditaStorm.render(
        'DITAStorm','100%','300','simple.css','simple.xsl.js');
</SCRIPT>
    Function render(<path>,<width>,<height>,<css_file>,<compiled_xsl_file>) accepts following parameters:
    1. path to the location of the DITA Storm libraries
    2. editor width (pixels or percents)
    3. editor height (pixels or percents)
      Note: please remember, as on any HTML page your element will take specified 100% of available vertical space only if outermost element expands to the entire page (height attribute set to 100%). For example to make HTML element (DITA Storm) to consume entire remaining space on the page use code similar to this:
      <body>
  <table ... height='100%'>
     <tr height='10%'>...</tr>
     <tr height='90%'>...[dita editor]...</tr>
  </table>
</body>
    4. stylesheet to be used (by default the editor is supplied with simple.css)
    5. compiled version of stylesheet to be used by the editor (by default the editor is supplied with simple.xsl.js)
  3. Load DITA document. You can do it either directly from the server:
    <SCRIPT>
    ditaStorm.loadXmlFile('/cm/content/product.xml');
</SCRIPT>
    or from the pre-populated text field: 
    <INPUT name='ditaField' type='hidden'
    value='<topic><title>Lorem Ipsum</title><body><p>...</p></body></topic>'>

<SCRIPT>
    ditaStorm.attachField('myForm','ditaField');
</SCRIPT>
  4. Retrieve modified DITA content. You can do it by either calling JavaScript method:
    <SCRIPT>
    // Use getXml() or getFormattedXml() to retrieve content
    var xmlString = ditaStorm.getXml();
    alert('Content: '+xmlString);
</SCRIPT>
    or if you previously attached DITA Storm to the form field you can store value back to the field: 
    <SCRIPT>
    ditaStorm.updateField();
</SCRIPT>

top

Example: Attaching to HTML Form Field

Lets take a simple example of HTML form with text field and modify it utilize DITA Storm. Here is the original HTML form:

<HTML>
<HEAD>
  <SCRIPT>
    function verifyAndSubmit() {
      ...
    }
  </SCRIPT>
</HEAD>
<BODY onLoad='init()'>
  <FORM name='myForm' onSubmit='verifyAndSubmit()'>
   <INPUT name='ditaField'
     type='text'
     value='<topic><title>Lorem Ipsum</title><body>
             <p>Morbi et lacus nec.</p></body></topic>'>
     ...
   </FORM>
</BODY>
</HTML>

This HTML can be easily modified to enable DITA editing with DITA Storm:

<HTML>
<HEAD>
  <LINK href="DITAStorm/styles.css" rel="stylesheet" type="text/css"/>
  <SCRIPT src="DITAStorm/DITAStorm.js" type="text/javascript"></SCRIPT>
  <SCRIPT>
   function verifyAndSubmit() 
   {
      // store XML back to the field and proceed with regular form submission 
      ditaStorm.updateField(); 
      ...
    }
   </SCRIPT>
</HEAD>
<BODY>
  <FORM name='myForm' onSubmit='verifyAndSubmit()'>

    <INPUT name='ditaField' type='hidden'
        value='<topic><title>Lorem</title><body><p>...</p></body></topic>'>

     <SCRIPT>
        // Render Editor and get value from the field
        ditaStorm.render('DITAStorm','100%','300','simple.css','simple.xsl.js');
        ditaStorm.attachField('myForm','ditaField');
     </SCRIPT>

  </FORM>
</BODY>
</HTML>
top

Example: Loading DITA Document via HTTP

DITA Storm can load XML content directly from server via HTTP request. JavaScript function loadXmlFile() retrieves XML over HTTP and loads it into the editor. Here is the sample code: 
<HTML>
<HEAD>
  <LINK href="/cm/lib/DITAStorm/styles.css" rel="stylesheet" type="text/css"/>
  <SCRIPT src="/cm/lib/DITAStorm/DITAStorm.js" type="text/javascript"></SCRIPT></HEAD>
<BODY>
  <SCRIPT>
    ditaStorm.render(
      '/cm/lib/DITAStorm','100%','300','simple.css','simple.xsl.js');
    ditaStorm.loadXmlFile('/cm/content/product.xml');
  </SCRIPT>
</BODY>
</HTML>

loadXmlFile function can also be called at any time during the lifetime of DITA Storm control on the web page.

top

Example: Retrieving Modified XML via JavaScript

You can always retrieve currently edited DITA XML as text via JavaScript call using getXml() function. For example: 
<SCRIPT>
  var xmlString = ditaStorm.getXml();
  alert('Content: '+xmlString);
</SCRIPT>
top
Copyright © 2007
Inmedius Inc.