Tuesday, October 30, 2012

How To Customize the Default Text Editor of Liferay in Custom Portlet

Ever wanted to use a rich text editor (RTE) such as the CK Editor in your custom portlet?
Implementing an RTE in your view is (almost) as simple as using a jsp-tag:

<aui:field-wrapper label="description">
    <liferay-ui:input-editor name="descriptionEditor" toolbarSet="liferay-article" initMethod="initEditor" width="200" />
    <script type="text/javascript">
        function <portlet:namespace />initEditor() { return "<%= UnicodeFormatter.toString("default content") %>"; }
    </script>
</aui:field-wrapper>


The liferay-ui:input-editor tag does not have a label attribute. To include a label for the RTE, wrap the tag in a aui:field-wrapper tag as shown above.
Also, the liferay-ui:input-editor needs an initMethod defined in javascript that sets the initial value of the RTE. In my example above, the RTE will be initialized with the value "default content". In your own view, obviously you would want to exchange "default value" for a bean value.

Editor toolbar

Now, the code above works great and will provide you with a toolbar (the set of actions/operations in the editor) that looks like the one used when editing wcm-articles.
Liferay comes with four different predefined toolbar sets:
  • liferay
  • liferay-article
  • email
  • edit-in-place
Each toolbar sports its own set of actions/operations. The most slimmed one being the email toolbar set.
The toolbar sets are defined in a file called ckconfig.jsp which you'll find in /webapps/ROOT/html/js/editor/ckeditor/ in your Liferay bundle.

Changing a predefined toolbar

The toolbar set called "liferay-article" is defined in ckconfig.jsp like this:
CKEDITOR.config.toolbar_liferayArticle = [
    ['Styles', 'FontSize', '-', 'TextColor', 'BGColor'],
    ['Bold', 'Italic', 'Underline', 'Strike'],
    ['Subscript', 'Superscript'],
    '/',
    ['Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'SelectAll', 'RemoveFormat'],
    ['Find', 'Replace', 'SpellChecker', 'Scayt'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
    '/',
    ['Source'],
    ['Link', 'Unlink', 'Anchor'],
    ['Image', 'Flash', 'Table', '-', 'Smiley', 'SpecialChar', 'LiferayPageBreak']
];

Thus, if we would like to remove the option for TextColor, we would need to remove this entry in the definition. This can be done by replacing the ckconfig.jsp file with a custom-jsp hook. If you don't know how to implement a custom jsp hook, you can check this wiki page.

Adding a new toolbar

Similar to the procedure above, you may add a new custom toolbar by adding a toolbar definition to the ckconfig.jsp file with a custom-jsp hook. Let's create one called "slimmed" that is just a simple editor with the option to make text bold, italic and underline. Also let's add the option to insert links:
CKEDITOR.config.toolbar_slimmed = [
    ['Bold', 'Italic', 'Underline'],
    ['Link', 'Unlink']
];

Deploy your custom jsp hook. Now change your liferay-ui:input-editor to use the slimmed toolbar set:
<aui:field-wrapper label="description">
    <liferay-ui:input-editor name="descriptionEditor" toolbarSet="slimmed" initMethod="initEditor" width="200" />
    <script type="text/javascript">
        function <portlet:namespace />initEditor() { return "<%= UnicodeFormatter.toString("default content") %>"; }
    </script>
</aui:field-wrapper>

No comments:

Liferay DXP JNDI Data Source Cofiguration

 This Blog will help us to learn about the JNDI Data Source Configuration in Liferay DXP. We have tested this with Liferay 7.3 with Tomcat. ...