Ephox EditLive Integration in WCM Authoring Template Customization

This article discuss approaches to include the EPhox Editlive Editor in Lotus WCM Authoring Template Element Customizations

There are situations where you need customize the element on authoring template and include rich text editor.In following two ways we can integrate the Editlive custom JSP,

Approach 1.  If you required multiple RTE instances for your customization requirement , use the Inline Editing feature of the Ephox editlive ,so that single java applet will serve multiple RTE's . (Resource Efficient, better performance)

      Step 1:  Edit Authroing Template ---> click on default content settings --> click on properties icon of the element what you want to customize.

      Step 2:  Specify you custom JSP path that handles your customization (Best practices is have all your customizations in separate Application and specify path like belo

                /CustomWebApplicationContext;/jsp/html/ATElementCustom.jsp

Note: If you want to handle the editMode and readMode separately then specify the path as below
editMode=/CustomWebApplicationContext;/jsp/html/ATElementCustom_editMode.jsp,editMode=/CustomWebApplicationContext;/jsp/html/ATElementCustom_readMode.jsp


      Step 3: In your Custom JSP ,include the following Java Script files to create the Ephox Editlive instance (These JS files are part of ephox application, you can find these files in installedapps/ephox application directory)


<script type="text/javascript" language="JavaScript" src="/wps/ephox/res/editlivejava/editlivejava.js"></script>
<script type="text/javascript" language="JavaScript" src="/wps/ephox/res/editlivejava/inlineEditing.js"></script>

      Step 4:  create the div elements as below (wherever you like to have RTE)

<div id="rte_custom_first" name="rte_custom_first" style="width:600px;height:550px">
<p>first custom RTE integration</p>
</div>


<div id="rte_custom_second" name="rte_custom_second" style="width:600px;height:550px">
<p>second custom RTE integration</p>
</div>

Note: You should specify the Size of the RTE as div height and width

      Step 5: After div elements are place on page, you can create the edit live instance


var customEditliveInstance = new EditLiveJava("CustomEditLive", "100%", "100%");
customEditliveInstance.setDownloadDirectory("/wps/ephox/res/editlivejava");
customEditliveInstance.setConfigurationFile("/wps/ephox/res/editlivejava/your_configfile_elconfig.xml");
customEditliveInstance.setDebugLevel("debug");   // to enable the debug statement in Applet control panel
customEditliveInstance.setOutputCharset("UTF-8"); //default charcter set itselt UTF-8

This will create the Ephox Edlive java applet.


      Step 6: Make above divs as editable sections by calling below statements


customEditliveInstance.addEditableSection("rte_custom_first");
customEditliveInstance.addEditableSection("rte_custom_second");


     Step 7: use the following method to get the values entered in the rich text editors

customEditliveInstance.getContentForEditableSection("rte_custom_first")
customEditliveInstance.getContentForEditableSection("rte_custom_second")

This way you can add any no of div as editable section , all will use the single Java Applet to handle.

Note: make sure to set customEditliveInstance.setAutoSubmit(false); while initializing the ephox editlive instanse. If you don't set this there were lot of issues with Buttons on Authoring Template like save..

Approach 2.  If you required single RTE instance for  your customization, this is straight forward approach create the Editlive instance wherever is required.(Setps 1-3 in approach 1 are valid here)

       Step 1: You don't need to have separate div elements , wherever you need to place the Rich Text Editor , paste following code

var customEditliveInstance = new EditLiveJava("CustomEditLive", "100%", "100%");

customEditliveInstance.setDownloadDirectory("/wps/ephox/res/editlivejava");

customEditliveInstance.setConfigurationFile("/wps/ephox/res/editlivejava/your_configfile_elconfig.xml");

customEditliveInstance.setDebugLevel("debug");   // to enable the debug statement in Applet control panel

customEditliveInstance.setOutputCharset("UTF-8"); //default charcter set itselt UTF-8

       Step 2: call below show method to display the rich text editor

customEditliveInstance.show();

       Step 3: Below method will return you get the body of the Rich Text Editor

contactUsEditliveInstance.GetBody('getRTEBodyContent'); // call the getRTEBodyContent function by passing body.


function getRTEBodyContent(body){
alert(body);
}