Introduction
"A rich text editor is an interface for editing rich text within web browsers, which presents the user a ‘what you see is what you get‘ editing area." (Source: Wikipedia http://en.wikipedia.org/wiki/Online_rich-text_editor)
A rich text editor can be useful when you want the user to be able to write formatted text. An example is an application that lets the user compose and send emails.
The IFML model
In IFML it’s possible to represent the rich text editor with a "Form" View Component containing a View Component Part of the type “SimpleField”. The “SimpleField” has a "Type" property set to "Text".
The WebRatio model
In WebRatio you can design the same model using the IFML Web Extensions. You need to create a Page, a Form View Component and a Field.
To specify that the field should be rendered as a rich text editor, you have to set additional properties: the Type "text" and the "text/html" Content Type. The "Text" type allows the user to enter text that is longer than 255 characters. The "text/html" Content Type allows you to change the field rendering from the default text area to a rich text editor. These properties can be set in the "General" tab of the Properties View of the field. To see the Properties View, select the field from the Outline View.
Configuring the Rich Text Editor
WebRatio uses the default rich text editor CKEditor widget, which is open source. The included version is 3.5.2. You can find further information on the official website http://ckeditor.com/. The rich text editor comes with a default configuration, which is why you see the editor using a specific toolbar. You may want to change the default settings. To do this you need to reach the property allowing the configuration by following these steps:
- Move to the Layout View.
- Select the Form Component.
- Move to the Outline View.
- Expand the layout Form Component.
- Select the Field.
- Move to the Properties View.
The widget configuration is associated to the "Field Layout" property. To see the available configuration options, press on the "Layout Parameters" button, which is represented by a blue circle next to the property.
The many options that you see in this dialog are related to all available field types, not only the text one. The parameters affecting the rich text editor are:
- "CKEditor toolbar" defines the toolbar the CKEditor should use. A toolbar is the set of actions and buttons you make available to the user for writing formatted text.
- "Textarea width" corresponds to the number of columns in the text area, in pixels (value = defined number * 10).
- "Textarea height" corresponds to the number of rows in the text area, in pixels (value = defined number * 10 + 120).
By default WebRatio provides two toolbars that you can use:
- "WebRatioDefault", which corresponds to the default toolbar set. It is composed of only the main formatting buttons: styling fonts, creating bulleted lists, and adding anchors.
- "Default" toolbar, also called "Full". It is composed by all the actions and buttons you may need to write a rich text. Refer to the official documentation for further information.
Suppose that you want to change the "Textarea height" option. Write a value (e.g., 25) in the dialog and press the OK button to confirm. Notice that once you customize a parameter, the "Layout Parameters" button changes color from blue to green. Notice also that the field icon in the Outline View changes to show a green circle that reminds you about the personalization.
To see the change on your page, right-click on the page in the site view and select the Generate -> Generate Layout Pages option from the context menu. In the web browser, check the result by refreshing the page; the result should be something like the following figure.
Adding a custom toolbar to the editor
If you want to use a different toolbar you need to modify the toolbar configuration. Let’s suppose you want to add to the “WebRatioDefault” toolbar the buttons that allow the user to justify text. The toolbar configuration is stored in a specific file of the widget named “config.js”, which you can find in the WRDefault/WRResources/CKEditor folder. To add your own toolbar definition, you must copy the “config.js” file in your Web project and then modify it, because the original file cannot be changed. The destination folder must be WebContent/WRResources/CKEditor inside your Web project. If you don’t have this folder, you can add it by selecting your project in the WebRatio Explorer, then right-click and choose New -> Folder.
Once you have copied the file, you can open it and add the new toolbar:
- Under the definitions of the toolbar already defined and before the File Manager configuration, you define the name of your toolbar "NewToolbar".
- Between brackets […] define the buttons that you want display:
...
config.toolbar_Default = config.toolbar_Full;
config.toolbar_NewToolbar = [
['Bold','Italic','-','NumberedList','BulletedList',' ','Link','Unlink','-','About'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']
];
/* File Manager configuration */
...
In the Layout Parameters, write "NewToolbar" in "CKEditor Toolbar", generate the Layout Pages, and check the result on the web browser by refreshing the page. The result should look like the following figure:
