EnglishDeutschFrançais

Migrate to edit-on Pro 5 from previous edit-on Pro versions

The following instructions should help integrators to update their integration of  edit-on Pro 3.x/2.x  to the latest edit-on Pro 5. The steps below are required for using edit-on Pro 5.

 

Step 1: Remove the <applet> tag

The <applet></applet> tag which was used by edit-on Pro 3.x and 2.x to integrate the editor into webpages should not be used for integrating edit-on Pro 5. Instead edit-on Pro 5 should be integrated using a JavaScript setup which dynamically creates the according applet/object tag. This makes the integration much easier and eliminates the need of a manual  browser detection.

At first, you must reference to the editonpro.js JavaScript file using the HTML <script>  tag within the <head> section  of the webpage that should contain the applet. This file includes all functions necessary for loading edit-on Pro 5. Please note: never edit this file directly.

After creating the editOnPro object in the <head> section of your webpage, you must set the applet preferences, which are necessary to load the applet, like CodeBase, UIConfigURL, etc. using the JavaScript methods of the object. A complete list of all settings which can be set using JavaScript methods can be found in chapter 3.2.1 JavaScript configuration API. Other parameters have been moved to the config.xml file, which is described in Step 2.

Finally, you must call the "loadEditor()" method, where the applet should appear in your webpage. Following, an example of the integration of edit-on Pro 5:

<html>

  <head>

   <title>edit-on Pro 5 integration sample</title>

 <script type="text/javascript" language="javascript" src="eopro/editonpro.js"></script>

  ....

 <script type="text/javascript" language="javascript">

            //-------------------------------------------------

            // Applet settings

            //-------------------------------------------------

            //Basic Settings

            eop = new editOnPro(898, 400, "myEditor", "myId", "eop");

            eop.setCodebase("eopro");

            eop.setUIConfigURL("uiconfig.xml");

            eop.setConfigURL("config.xml");

            eop.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");

  </script>

  ...

</head>

<body>

RealObjects edit-on Pro 5 integration sample page



....

 <script type="text/javascript" language="javascript">

  // the editor will be inserted here:

  eop.loadEditor();

</script>

...

Please also review the readme.txt file.



</body>

</html>

 

Step 2: Adjust the config.xml file

Most configuration settings which were set up as applet params in edit-on Pro 2.x and 3.x have been moved to XML definitions within the config.xml file for edit-on Pro 5. E.g. settings like the "encoding which was previously defined as applet param, so you must move your current applet parameter configuration to the config.xml file.

Please refer to chapter 1.2 Configuring edit-on Pro in the Integration Manual for a detailed list of all definitions which can  be set in the config.xml file.

 

Step 3: Set up the uiconfig.xml file

In edit-on Pro 2.x and 3.x the toolbar has been configured using the toolbar.xml file. edit-on Pro 5 now introduces a new configuration file (uiconfig.xml) for adjusting the editor's user interface, as it is possible to not only define a toolbar, but also a menu and a context menu.  "actions" have been introduced for each toolbar, menubar and context menu element to assign functions to the according elements. 

Following, an overview of the settings, that can be done in the uiconfig.xml:

  • Menu bar
  • Toolbar Buttons
  • Keyboard shortcuts
  • Context Menu (on right-click)

You must move your current toolbar.xml into the uiconfig file and adjust the menu bar and context menu accordingly. Of course, it is possible to only have a toolbar without a menu bar and a context menu.

Detailed information can be found in chapter 1.3 Adjusting the user interface.

Custom buttons, such as buttons to call a JavaScript function are also defined in the uiconfig.xml file. You must define a custom action and assign it to the according button or menuitem.

Further information can be found in chapter 2.1 Custom actions.

Please note: The actions defined for the context menu are working together with special CSS settings, which can be found in the integration manual chapter 2.2.3. Dynamically populating the context menu using CSS.

 

Step 4: Adjusting the JavaScript API functions

In contrast to previous edit-on Pro versions, some JavaScript API functions are not executed immediately after they are called due to their asynchronous nature. These functions will be queued internally and only be executed when the method pumpEvents() is called manually. This applies to the functions described in the chapter 3.2.2. JavaScript API / Java API excepted all get functions which are always executed immediately.

    <script type="text/JavaScript">

     // The functions called below aren't directly executed, they are queued

     // To execute the queued functions the pumpEvents() method must be called manually

     function setContent(){

          eop.setHTMLData("

some HTML data

");

          eop.setStyleSheet("p {color: red}");

          eop.pumpEvents();

      }

    </script>

Copyright © 2000-2008 RealObjects GmbH