Adding rich text editors

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:

1. Create the rich text editor control.
2. Configure the toolbar for the rich text editor.
3. 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:

1. In NexJ Studio, navigate to the Presentation layer.
2. In the Controls tab, right-click in the model view sidebar and select New Control.
   The New Control dialog opens.

3. In the Name field, enter a name for the rich text editor.

   

   Info

   Name rich text editor controls using the format NameRichTextEditor.

4. Click Finish.
   The New Control dialog closes and the rich text editor control opens in the NexJ Studio editor.

5. In the Source view, specify the implementation and dependencies for the rich text editor control.
   Enter the following source code:
   
   

   SCHEME

   <Control base="Input" implementation="nexj.core.view.flat.custom.FlatWebRichTextEditorView">
      <Dependencies>
         <File name="js/ckeditor/ckeditor.js" type="flat"/>
      </Dependencies>
   </Control>

6. Click the Save button 

   

   to save the control.

The rich text editor control is created.

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.

Write configuration files using JavaScript. For more information about writing configuration files and available toolbar options, see http://docs.ckeditor.com/#!/guide/dev_configuration

To configure a rich text editor:

1. In a text editor, create a configuration file that defines the toolbar layout for the rich text editor.
2. Save the configuration file in the meta/web/js directory for your NexJ application.
3. In NexJ Studio, navigate to the Presentation layer.
4. In the Controls tab, open the rich text editor control to configure.
   The control opens in the NexJ Studio editor.

5. In the Source view, add the following source code in the rich text editor control:
   

   SCHEME

   <Configuration>
      <configFile value="<config_file_name>.js"/>
   </Configuration>

   
   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.

6. 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:

<Control base="Input" implementation="nexj.core.view.flat.custom.FlatWebRichTextEditorView">
   <Dependencies>
      <File name="js/ckeditor/ckeditor.js" type="flat"/>
   </Dependencies>
   <Configuration>
      <configFile value="batchemail_ckeditor_config.js"/>
   </Configuration>
</Control>

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:

1. In NexJ Studio, navigate to the Presentation layer.
2. In the Forms tab, select the form to add the rich text editor to.
   The form opens in the NexJ Studio editor.
3. 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.
4. 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.
5. 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.