The Ephox integrations into IWWCM allow developers to load different configurations of the editor based on the user.

This article outlines how to achieve this functionality in the Ephox integrations into IWWCM 2.5/5.1/5.1.0.x.

Step 1) Create the Desired Configuration Files
EditLive! configurations are specified by using an EditLive! Configuration File. Ephox provides a free of charge tool for easily creating and editing these configuration files. This tool can be downloaded from the Ephox website at http://www.ephox.com/product/editliveforjava/configuration/6.0/ConfigTool.jnlp.

Create a new configuration file for each desired user or user group. Give each configuration file a unique name (e.g. adminConfig.xml, docReviewerConfig.xml).

Step 2) Edit the Ephox Integration to Define the Current User
Open the ephoxDefineUser.jsp file located in the ephox/instantiation directory for your IWWCM installation.

For example:

IWWCM 5.1/5.1.0.x:
C:\IBM\PortalServer\installedApps\WCM_Authoring_UI__PA_1_0_CH.ear\PA_1_0_CH.war
IWWCM 2.5:
C:\IBM\PortalServer\installedApps\ilwwcm-aut_ng-portlet_UI__PA_1_0_CH.ear\PA_1_0_CH.war

Use the work.getUserProfile().getUsername() call to print the user's name.
Use the work.isMemberOfGroup("NAME") call to check if the current user belongs to the specified group.

A combination of these calls can be used to define which configuration file is called. For example, the following code would catch whether the user belonged to the "wpsadmins" user group, or failing that, whether the user's name is "wpsguest".

<%
    if(work.isMemberOfGroup("wpsadmins")) {
        // load configuration file A
    } else {
        if(work.getUserProfile().getUsername().equals("wpsguest")) {
            // load configuration file B
        } else {
            // load default configuration file
        }
    }
%>

Step 3) Define the Configuration Files
Finally, use the setConfigurationFile load-time property for EditLive! to specify your EditLive! configuration file. Use the portletResponse.encodeURI Java call to generate a reference to the ephox/editlivejava directory in your IWWCM installation in order to correctly reference the desired configuration file.

<%
if(work.isMemberOfGroup("wpsadmins")) {
    out.println(eljNamespace + "elj.setConfigurationFile(\"" +
        portletResponse.encodeURI("/ephox/editlivejava/adminConfig.xml") + "\");");
} else {
    if(work.getUserProfile().getUsername().equals("wpsguest")) {
        out.println(eljNamespace + "elj.setConfigurationFile(\"" +
            portletResponse.encodeURI("/ephox/editlivejava/docReviewerConfig.xml") + "\");");
    } else {
        out.println(eljNamespace + "elj.setXMLURL(\"" +
            portletResponse.encodeURI("/ephox/editlivejava/standard_eljconfigxml.jsp?editorName=" +
            eljNamespace + "&directoryRef=" + directoryRefString) +
            "&jspContext=" + URLEncoder.encode(URLEncoder.encode(jspContext)) +"\");");
    }
%>

This article briefly takes you through how to rapidly integrate EditLive! into your application. A textarea in a page is replaced with EditLive! (source for the starting page available here — right click and save as in IE to view the source). The name of the text field we are replacing in this example is "web_content".  The form in the page submits to a basic debugging page (source available here). To skip straight to the ending, you can see the resulting html.  To see the simple four steps, start now.

Step 1) Register and Download the EditLive! (http://www.ephox.com/products/editlive/download.html).

Step 2) Copy the editlivejava redistributables to your server to a folder called editlivejava (if you downloaded the zip package you will find this in editliveforjava/webfolder/redistributables/editlivejava)

Step 3) include the EditLive! javascript source in your html page:
<script type="JavaScript" src="editlivejava/editlivejava.js"></script>

Step 4) Create a script block to create and setup an instance of EditLive!, a simple construction would consist of:

• create an instance of edit live called web_content with a height of 600 and a width of 550 pixels:
  var editliveInstance = new EditLiveJava("web_content", 600, 550);
• set the download directory (the location where the jar file containing the applet lives)
  editliveInstance.setDownloadDirectory("editlivejava");
• set the content for the editor (encoding it so any html will carry across happily):
  editliveInstance.setBody(encodeURIComponent("text for the content"));
• set the configuration file (start with the sample one).
  editliveInstance.setConfigurationFile("editlivejava/sample_eljconfig.xml");
• display the applet
  editliveInstance.show();

This will produce a simple integration of the EditLive! editor into your web page. The contents of the body will be available in the field web_content.  It is then possible to update the configuration file to take advantage of the large number of customisation options available.

Ever wished you could quickly apply or change heading levels? We felt your pain, so while we work out how to integrate this into our configuration system properly we've provided a simple little plug-in that just provides quick keyboard shortcuts for the six standard heading levels and for normal paragraphs. Installing it is just one line of JavaScript so try it out. Head over to the Heading HotKeys page for more info.