Rich text editors are fields in which users can enter text and images using a what-you-see-is-what-you-get (WYSIWYG) editor.
Rich text editors add a formatting toolbar to a text entry area. Users use the toolbar to apply formatting such as styles and fonts to text and insert images. Rich text editors are typically used for tasks such as composing the body of an email.
Create rich text editors and add them to forms and screens in the Presentation layer in NexJ Studio.
To add a rich text editor to your NexJ application:
Create the rich text editor control.
Configure the toolbar for the rich text editor.
Add the rich text editor to the form or screen.
Creating rich text editor controls
Create a rich text editor control that you configure and add to forms and screens.
To create a new rich text editor control:
In NexJ Studio, navigate to the Presentation layer.
In the Controls tab, right-click in the model view sidebar and select New Control. The New Control dialog opens.
In the Name field, enter a name for the rich text editor.
Info
Name rich text editor controls using the format NameRichTextEditor.
Click Finish. The New Control dialog closes and the rich text editor control opens in the NexJ Studio editor.
In the Source view, specify the implementation and dependencies for the rich text editor control. Enter the following source code:
Create a configuration file for the rich text editor to specify which formatting options are available in the toolbar.
Configuring rich text editors
Specify which formatting options are available to users in the toolbar for a rich text editor.
Info
To complete this task, knowledge of JavaScript is required.
Configure a rich text editor by specifying a configuration file in the source code for the rich text editor control. You can create multiple configuration files to provide toolbar configurations for different use cases. For example, create configuration files that provide a different toolbar layout for composing an email and writing a note.
Where <config_file_name> is the name of the configuration file that you created in the meta/web/js directory. For example, the configuration file for the rich text editor associated with composing batch emails is named batchemail_ckeditor_config.
Click the Save button to save the changes to the control.
The configuration is specified for the rich text editor. The source code for the rich text editor control should now look similar to the following:
Add the rich text editor to a form or screen by specifying the control as an input field.
Adding rich text editors to forms
Add a rich text editor to a form by creating an input field and specifying the rich text editor control.
Info
You cannot use rich text editors for input fields that are bound to a persisted attribute, for example, the Notes field for a schedule item.
To add a rich text editor to a form:
In NexJ Studio, navigate to the Presentation layer.
In the Forms tab, select the form to add the rich text editor to. The form opens in the NexJ Studio editor.
In the Layout view, right-click where you want to add a rich text editor and select Insert Input. The input field is added to the layout.
Select the input field and, in the Properties view, define the following properties: control Specify the name of the rich text editor control to use for the input field, for example, BatchEmailRichTextEditor. name Give the input field a unique name, for example, inpEmailBody.
Click the Save button to save the changes to the form.
The rich text editor is added to the form.
Info
The rich text editor does not support dynamic resizing. Ensure that the height of the row that contains the input field is a fixed size, for example, 200px.
JavaScript errors detected
Please note, these errors can depend on your browser setup.
If this problem persists, please contact our support.