Customizing WebSphere Portal’s Ephox EditLive! Editor

I received this request from one of our digital agencies using WebSphere Portal.

I want to add a new select box with style options in it that adds classes in the HTML so they inherit styles from our stylesheets. For example, if the content manager needs to add CTA styles to a link, we could add a button or select box in the WYSIWYG tool that adds a class around their selected markup so it inherits the CTA styles.

 

It took a few re-reads to grok the request, but here’s my interpretation. You’re editing content in your WCM editor. How can we make it easier to apply custom CSS styles that we’ve already created?

Starting with Portal 8.5, Portal now OEMs Ephox’s EditLive! editor and WebRadar. The EditLive! editor can replace the traditional WCM editor with a more feature rich option. See the TECH-P21 Energize Content Creation with the New Ephox Editor and WCM Reporting Capabilities Now Included in IBM Web Content Manager session for more details. This is the default editor in use on this Portal.

I’ve not previously customized the Ephox editor, but it looked quite doable given the following articles.

I found that in the first article above that a script is used that reinstalls the WCM web application and applies the customized editlive_config.xml.jsp.v9.  You can place your modified version under source control and run the script when fixpacks are applied. But by having the script re-deploy WCM, I’d suggest you first investigate other customizations will not be overwritten before running.

Alternatively, I directly edited the config.xml located on my server inside C:\IBM\Portal\wp_profile\installedApps\portalCell\wcm.ear\editor-editlive-config.war.

I made two additions in my XML.

<editlive>
 <!-- Default content for the editor -->
 <document>
 <!-- Example of external stylesheet -->
 <html>
 <head>
 <link href="http://portal.demos.ibm.com/wps/contenthandler/!ut/p/dav/fs-type1/common-resources/ibm/css/samples/oob_samples.css" rel="stylesheet" type="text/css"/>
 </head>
 </html>
 </document>

and

<toolbarComboBox name="Style">
 <comboBoxItem name="P" />
 <comboBoxItem name="H1"/>
 <comboBoxItem name="H2"/>
 <comboBoxItem name="H3"/>
 <comboBoxItem name="H4"/>
 <comboBoxItem name="H5"/>
 <comboBoxItem name="H6"/>
 <comboBoxItem name=".oobSampleHeading" text="OOB Sample Heading"/>
 </toolbarComboBox>

The latter XML modification is actually not necessary, but I wanted to show that we can reference a class and give it a more descriptive name.

Upon server restart Ephox will show this.

Ephox EditLive! Class
Ephox will automatically consume the styles listed in the CSS and provide them in the dropdown.  Notice that I added “OOB Sample Heading” but “Oob Sample Image” is an available style.

You can then select text and apply the style.

Ephox EditLive! StyleFrom what I’ve seen, this simply edits the class attribute.  If I select multiple lines, each tag gets applied the style.  Presumably if you wanted to apply a class to a block of content, you’d create a div or span, select it in Ephox, and then apply the style.

One point, the CSS you’ve added to the Ephox configuration XML does not load it into Portal markup.  Ephox is an applet, and I bet that’s why we need to tell it what CSS to use.  You’d need to update the Portal theme to reference the stylesheet so that the markup renders as expected.

And looks like there’s more customization options than just this example if you review the Ephox documentation.  So happy coding!

Leave a Reply

Your email address will not be published.