Documentation Center

javascript

Use the javascript element in your configuration to execute a script with the Content Editor fully initialized.

The javascript element points to a JavaScript file that is executed when activating an Xopus Canvas. The script is executed by Content Editor after the configuration is loaded but before any associated files are loaded. This script has full access to the Content Editor API.

<x:config version="1.0" xmlns:x="http://www.xopus.com/xmlns/config">
  <x:javascript src="js/editing-helpers.js"/>
  <x:pipeline xml="xml/doc.xml" xsd="xsd/schema.xsd">
    <x:view name="WYSIWYG view">
      <x:transform xsl="xsl/presentation.xsl"/>
    </x:view>
  </x:pipeline>
</x:config>

The main advantage over using a <script> element in the HTML is that the Content Editor API is fully initialized when the <javascript> is executed.

Rule of thumb:

  1. When the script contains references to global API properties like Editor or IO, use the <javascript> tag.
  2. When not using the Content Editor API as with external librairies such as Dojo and jQuery, then your should use a <script> element outside of the Content Editor configuration for better performance.

Using the API outside the editor's iframe

When Content Editor is used in an iframe within a Content Management System (CMS), you'd probably want to access the API for loading documents. The easiest way to enable access from outside the iframe is to use a callback function. Outside Content Editor , use the following script, we'll call xopusproxy.js:
var XopusProxy = (function () {

if (typeof Editor !== "undefined")
{
  // This part of the script is run within Xopus,
  try
  {
    for (var parent; parent !== window.parent && (parent = window.parent);)
      if (typeof parent.XopusProxy !== "undefined")
        parent.XopusProxy.setEditor(Editor);
  }
  catch (e)
  {
    // Access denied to a parent window
  }
}

return {
  setEditor: function (editor) { this.editor = editor },
  getEditor: function () { return this.editor || null },
  setIO:     function (io) { this.io = io },
  getIO:     function () { return this.io || null },
  setURL:    function (uri) {
               if (this.getEditor() === null)
                 alert("Xopus is not started yet");
               else
                 this.getEditor().setURL(uri);
             }
};

})();

Now use the following line in your Content Editor configuration:

<x:javascript src="xopusproxy.js"/>

You could use the following code outside of Content Editor :

<script type="text/javascript" src="xopusproxy.js"></script>
…
<table>
  <tr>
    <th><a href="XopusProxy.setURL('manuals/m800.xml')">Microwave M800 manual</a></th>
    <td>24th January, 2006</td>
  </tr>
</table>

Namespace

http://www.xopus.com/xmlns/config

Attributes

NameDescription and useType & Values
srcOptional.

The URI of a JavaScript file on the server.

Fixed value- must be 1.0
phaseOptional.

The phase in which this JavaScript should be loaded when loading Content Editor .

Values include BOOT or Xopus.

Parent element

config