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:
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:
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.
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:
So, the result will be:
And content source will be:
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.
Scroll up until you find the declaration of the stylesheets variable, there you will see that this variable use another variable, called 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:
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:
So, as you can see, there is no changes on the config section, we keep it as it is as default:
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
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:
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:
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
(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):
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