Next Steps

Suite :: Developer : Documentation | Technology | News

Basic Editing	:	Integration	:	Customization	:	XSL Support
		PHP Example
		JSP Example
		JavaScript API

Editor Integration

Description: Below are instructions on integrating Developer into a generic Web application.

Integrating Developer into an HTML Page

A simple procedure allows you to integrate Developer into a Web application or Content Management System by either attaching the editor to the text field of your HTML form, or loading DITA documents directly via an HTTP request. Basic required steps:

Include Developer libraries.

<LINK href="DITAStorm/styles.css" rel="stylesheet" type="text/css"/>
<SCRIPT src="DITAStorm/DITAStorm.js" type="text/javascript"></SCRIPT>

Render Developer. At the selected location of the HTML page place the 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 the following parameters:
1. path to the location of the Developer 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 the specified 100% of available vertical space only if the outermost element expands to the entire page (height attribute set to 100%). For example, to make an HTML element (Developer) consume the entire remaining space on the page use a 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 the stylesheet to be used by the editor (by default the editor is supplied with simple.xsl.js)

Load DITA document. 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>

Retrieve modified DITA content. Either use the call JavaScript method:

<SCRIPT>
  // Use getXml() or getFormattedXml() to retrieve content
  var xmlString = ditaStorm.getXml();
  alert('Content: '+xmlString);
</SCRIPT>

or if you previously attached Developer to the form field, you can store the value back to the field:

<SCRIPT>
  ditaStorm.updateField();
</SCRIPT>

Example: Attaching to HTML Form Field

This example uses an HTML form with a text field and modifies it using Developer. 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 Developer:

<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>

Example: Loading a DITA Document via HTTP

Developer can load XML content directly from a server via an HTTP request. JavaScript function loadXmlFile() retrieves the XML over HTTP and loads it into the editor. 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 Developer control on the Web page.

Example: Retrieving Modified XML via JavaScript

You can retrieve currently edited DITA XML as text via a JavaScript call using getXml() function. For example:

<SCRIPT>
  var xmlString = ditaStorm.getXml();
  alert('Content: '+xmlString);
</SCRIPT>

Site Map

Privacy Statement | Terms of Use