Rich Text Editor

The Rich Text Editor provides a what-you-see-is-what-you-get (WYSIWYG) editing interface within web browsers. This allows users to edit rich text seamlessly.

How does it work?

To see how the Rich Text Editor works, follow these steps using the built-in App Expenses Claims:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click the pencil icon on the Expenses Claim to open the App Composer.
   
3. Click the Create New Form button and fill in the Form Details as follows:
   • Form ID: richTextEditor
   • Form Name: Rich Text Editor
   • Table Name: j_expense_claim
     
     
     
4. Drag and drop a Rich Text Editor element onto the canvas.
5. Fill in the Configure Rich Text Editor properties as follows and click Next:
   • Label: Message
   • ID: message
6. Click Advanced Options, tick the Full Features Toolbar?, and click the Apply Change button.
   
7. Click Preview.

Configure rich text editor

Configuring the Rich Text Editor involves setting the label, ID, editor type, mode, and advanced options to customize the toolbar features and editor behavior.

Fields to configure:

• Label: Element label to be displayed to the end-user.
• ID: Element ID. By declaring as message, a corresponding database table column c_message will be created. See Form Element for more information about defining the ID and a list of reserved IDs.
• Editor: Type of editor options include TinyMCE and Quill. For more information, see Retrieving TinyMCE rich text value with JavaScript.
  
  • TinyMCE
    
  • Quill
    
• Mode: Toolbar features:
  • Simple
    
    
  • Full
    
    
  • Inline Edit
    Available for Quill Editor Only
    
• Enable Switch Between Inline Edit:
  Available for Quill Editor Only.
  Displays as a checkbox if the Mode is Full and Simple.
  
  It displays as a Multi Select Box if the mode is Inline Edit.
  
  Example: 
  
• Placeholder: The placeholder attribute specifies a short hint describing the input field's expected value (e.g., a sample value or a short description of the expected format).

Advanced options

Advanced options provide additional settings for data handling, validation, UI customization, and permissions.

Data

The data section includes default values and validator settings to ensure data integrity and proper functionality.

Fields to configure: 

• Value: Default value.
• Validator: Attach a Validator plugin to validate the input value. See Form Validator.
  
  When will validation take place?
  Validation will occur whenever a form is submitted except when submitted as Save as Draft.
  Available Options:

• • Basic
  • BeanShell
  • Date and Time Duplicate Validator
  • Directory
  • Duplicate Value
  • Equal Value
  • Multi Form Validator
  • Password
  • Plugin Template - Validator

UI

The UI section includes settings for element visibility, label display, and read-only configurations to enhance user experience.

Fields to configure:

• Readonly: Determines if the element is editable.
• Height (px): Defines the height of the Rich Text Editor.
• Custom Settings (JSON): Custom settings for TinyMCE and Quill editors. For more information, see TinyMCE Editor Customization and Quill Editor Customization.

Image upload

Managing settings who can access the uploaded files.

Field to configure:

• Permission: Manage who can access the uploaded file. For more information, see Permission Control.
  Options include:
  • Logged In Users
  • Public
  • Custom

Additional resources

Enhance your understanding and capabilities with the Rich Text Editor by exploring the following resources:

• Add validation to Rich Text Editor
• Retrieving TinyMCE rich text value with JavaScript