Skip to end of metadata
Go to start of metadata

This wiki page contains ONLY the modifications to customize the styles drop-down menu (css property), and how to read the styles from a WCM component. To check the full list of options go to: How to customize Ephox Textbox.io

The css property

In the default configuration, Textbox.io have the following styles drop-down menu:

 

2-1

And it is possible to customize the editor to show the default options plus your own custom styles:

1- Create a copy of the configuration file

To customize the Textbox.io editor for WCM is necessary to modify a copy of the tbio_config.jsp configuration file, located at the directory:

[PortalServer root]/wcm/prereq.wcm/wcm/config/templates/shared/app/config/textboxio

My recommendation is to keep an original version of this file and generate a new copy, so you can work with this file without any worry.

This file has Java and JavaScript code, all the modifications we are going to do are on the JavaScript section. If you open this file, the JavaScript section should looks like the next screenshot:

2- css property customization

If you read the official guide (How to customize Ephox Textbox.io) it says that to change the style menu by inserting our own styles, you need use two sub-properties, documentStyles (to apply our styles to the editor content) and styles (to show the style list in the drop-down menu).


And the corresponding code, in the tbio_config.jsp file, should looks likes:

var config = {
    css : {
        documentStyles : 'p.Red{color: #FF0000;} span.SuperScript{vertical-align: super; font-size: 80%;} \
                    span.SubScript{vertical-align: sub; font-size: 80%;}',
        styles : [
        {rule: 'p.Red', text: 'Red text'}, 
        {rule: 'h1', text: 'Header 1'}, 
        {rule: '.SuperScript', text: 'Superscript'}, 
        {rule: '.SubScript', text: 'Subscript'} 
        ]
    }
};

So, the result will be:

4-1

And  content source will be:

<h1>Header 1</h1>
<p class="Red">Red text</p>
<p>This is <span class="SuperScript">Superscript</span></p>
<p>This other is <span class="SubScript">Subscript</span></p>

IMPORTANT

This approach works, but, it has one BIGGER limitation:

  • Every time you need edit or add a new style it is necessary to modify this file (directly on the file system) and run a command so Portal/WCM can get the modifications - this is not always the quick and best way to do a simple change on a style.

 

So, there is another way to do this customization, and instead of defining the css rules on the tbio_config.jsp file, it is possible to tell the config object, that is defined on tbio_config.jsp, to get the styles from a file resource located on a WCM component, following this approach allows that any modification can be done quickly on WCM and the changes will be applied directly. All you need to do is following the next steps.

2.1 - Create a WCM style-sheet component

On WCM, create a Style-sheet component and attach the css file that contains all the css rules.

Your CSS file should looks like:

2.2 Get the path of the file attached to the Style-sheet component

The next step is get the relative path of the css file attached to the style-sheet component previously created, NOT the path of the style-sheet component, this path is going to be used inside the config object on the tbio_config.jsp file.

 

2.3 Configure tbio_config.jsp to read the path of the file resource

On your copy of the tbio_config.jsp file, see step 1, scroll down to the section where the config object is defined, by default the config object doesn´t have the documentStyles (to apply our styles to the editor content) and styles (to show the style list in the drop-down menu). We are not going to use this options. Instead, we will change the value of the variable stylesheets.

 var config = {
    css: {
      stylesheets: stylesheets
    },
    images: images,
    ui: {
      locale: locale,
      toolbar: {
        items : items
      }
    },
    codeview: {
      enabled: isCodeViewEnabled
    },
    spelling: {
      url: '<%= spellingServiceUrl %>'
    }
  };

Scroll up until you find the declaration of the stylesheets variable, there you will see that this variable use another variable, called styleSheetUrl:

var stylesheets = typeof styleSheetUrl === "string" ? [styleSheetUrl] : [];

Scroll up until you find the declaration of the styleSheetUrl variable, there you will see that it is filled based on a path that is obtained from a call of some Java functions:

var styleSheetUrl = <%= undefinedOrQuotedString(editorBean.getStyleSheetURL()) %>;

Replace all the Java code and instead, add the relative path that was obtained on the step 2.2, leave only from "/wps" to "?MOD=AJPERES" as you can see on the next example:

var styleSheetUrl = '/wps/wcm/myconnect/0000-0000-0000-000/your-file.css?MOD=AJPERES';

So, as you can see, there is no changes on the config section, we keep it as it is as default:

 var config = {
    css: {
      stylesheets: stylesheets
    },
    images: images,
    ui: {
      locale: locale,
      toolbar: {
        items : items
      }
    },
    codeview: {
      enabled: isCodeViewEnabled
    },
    spelling: {
      url: '<%= spellingServiceUrl %>'
    }
  };

Now, we still need to do one more step, right now, we just replaced the URL from were Textbox.io reads the styles, but that is not enough to allow the editor to display the new options on the drop-down.

2.4 Modify TextboxioForWCM file

IMPORTANT

It seems that It is not possible to combine on the tbio_config.jsp file the property stylesheets only with styles, after some unsuccessful tests, it seems that the property styles works only with documentStyles, but that force to declare the styles directly on this file, that is what we want to avoid.

Since it is not possible to declare the options on the tbio_config.jsp file, and after some research, I founded that textbox.io use the TextboxioForWCM.js to merge the configuration done on the tbio_config.jsp file:


This file is part of the war that is installed to add textbox.io, and is under the next path:

[wp_profile root]/installedApps/wpa85ServerCell/EphoxTextboxio.ear/editor-textboxio.war/js/

Important

You need to update this file directly, so, be sure to update it correctly.

Find the section where an anonymous function is assigned to the variable mergeTemplateStyles, there, one more time add the relative path of the file resource that contains the styles and fill the property styles with the array of ALL the options that are going to be displayed on the drop-down, NOT JUST the custom options you need, see the next example:

 function (Type, Arr, Merger, TextboxioExtensions) {
    var mergeTemplateStyles = function(config, styleURL) {
      return Merger.deepMerge(config, {
        css : {
          stylesheets : !!checkNullJSPReturn(styleURL) ? [styleURL,'/wps/wcm/myconnect/0000-0000-0000-000/your-file.css?MOD=AJPERES'] : [],
          styles: [{
              rule: 'p',
              text: 'Normal'
            }, {
              rule: 'h1',
              text: 'Heading 1'
            }, {
              rule: 'h2',
              text: 'Heading 2'
            }, {
              rule: 'h3',
              text: 'Heading 3'
            }, {
              rule: 'h4',
              text: 'Heading 4'
            }, {
              rule: 'h5',
              text: 'Heading 5'
            }, {
              rule: 'h6',
              text: 'Heading 6'
            }, {
              rule: 'a.button-link',
              text: 'a-button-link'
            }, {
              rule: 'a.button-link-secondary',
              text: 'a-button-link-secondary'
            }, {
              rule: '.address',
              text: 'Address'
            }]
        }
      });
    };

2.5 - Apply the customization

Changing the configuration file tbio_config.jsp and TextboxioForWCM.js isn’t enough to see our customizations on the Textbox.io editor; whenever we need to apply a new customization to WCM, it is necessary to go through the following steps:

Copy our customized version of the tbio_config.jsp file to the directory

[wp_profile root]/PortalServer/wcm/shared/app/config/textboxio

(if the directory doesn’t exist, create it before).

From the directory [wp_profile root]/ConfigEngine, run the command

ConfigEngine.sh configure-wcm-ephox-editor-custom-configuration -DWasPassword=password -DPortalAdminId=wpsadmin -DPortalAdminPwd=password

This may take several minutes to complete. At the end, we should verify that everything went properly (we must see the text BUILD SUCCESSFUL and not BUILD FAILED):

 

8-1

In the case of BUILD FAILED, verify the command’s syntax, the command’s parameters and the presence of the configuration file in the correct directory, then relaunch the command, even if you haven’t found any error.

Restart WebSphere Portal.

And now you will see the new options on the drop-down

About the author

Enterprise Web Developer
Joaquin is an Enterprise Web Developer at Base22 with over seven years of experience designing and developing web solutions for enterprise clients. He is a well rounded web developer with skills building interfaces in IBM WebSphere Portal and WCM, IBM Connections, and many others. He is an Oracle Certified Java Developer and a Microsoft Certified Visual Studio Developer. He blogs at http://j-arellano.com

 

  • No labels