edit-on Pro can easily be integrated into a Web page using JavaScript only. There are two basic steps to perform when integrating edit-on Pro:
Inserting the editor into a web page
Importing and exporting content from the editor
edit-on Pro comes with a comprehensive JavaScript API designed to allow you to configure and integrate the editor into a web site. In the first step, we will demonstrate how to simply load the editor within a web page without any regards to the loading of content or more advanced integration requirements.
The JavaScript API for edit-on Pro basically allows you to create a JavaScript object containing the editor. You can manipulate the editor's configuration by adding and modifying the objects properties before it is finally loaded.
To use the JavaScript API, you should import the "editonpro.js" JavaScript library into the page that will use edit-on Pro.
Example I.1. Importing the edit-on Pro JavaScript library
<script type="text/javascript" src="editonpro.js"> </script>
First, we will create an instance of the editor by instantiating the editor's constructor class editOnPro .
Example I.2. Creating an instance of edit-on Pro
<script type="text/javascript" src="editonpro.js" /> <script type="text/javascript"> eop = new editOnPro(725, 350, "myEditor", "myId", "eop"); </script>
We just created an instance of the editor. There are only a few steps until we can load the editor with its default configuration:
Set the editor's codebase. The editor will always be loaded from the codebase. In addition, all configuration files will be loaded from the codebase or from a path relative to the codebase unless specified otherwise.
Specify the editor configuration files. The configuration of the editor will be parsed from these files.
Load the editor. Once the editor has been configured, its
loadEditormethod can be called to insert the editor at the location where it is called.
Example I.3. Setting the codebase and loading the editor
eop.setCodebase(".");
eop.setUIConfigURL("uiconfig.xml");
eop.setConfigURL("config.xml");
eop.loadEditor();We now have integrated edit-on Pro into a web page.
After we learnt how to load the editor in the last chapter, we will now see how content can be imported into or exported from edit-on Pro.
There are multiple ways to load content into the editor: it can be inserted after the editor has initialized using one of the JavaScript API functions. The applet can be configured to load content from an URL using an applet property which can either be set using the JavaScript API or by specifying it in the configuration file.
In this example we will focus on the JavaScript API, as it is used most commonly for setting content.
Example I.4. Loading content into the editor using the JavaScript API
eop.setHTMLData("<p>Some content</p>");
eop.pumpEvents();
Important:
All JavaScript set methods will not be executed immediately, but be queued until the method pumpEvents() is executed.
Calling the methods above will insert the string "<p>Some content</p>" into the editor:
 |
We just loaded our first content into the editor. Now we'll see how it can be retrieved, focusing again on the JavaScript API.
In the example above, we retrieved the editor's content using the getHTMLData method. The complete content of the editor is now stored in the variable myVar and can be passed to your application. In a later chapter we will explore how content can be passed to and from the editor using direct HTTP connections instead of the JavaScript API.