Rich Text Field Type

Description:
The rich_text field type provides a WYSIWYG (What You See Is What You Get) editor that allows users to input and format text with rich styling options. This field is ideal for capturing content that requires more than plain text, such as detailed descriptions, comments, or formatted documents. Users can enhance their text with features like bold, italics, lists, links, and more, improving readability and presentation.

Elasticsearch Mapping: keyword (indexed)

YAML Definition 

- name: detailed_description
  type: string
  display: richtext
  display_name: "Detailed Description"
  default_value: "<p>Enter your detailed description here...</p>"
  required: false
  readonly: false
  hidden: false
  guidance: "Use the rich text editor to format your description with headings, lists, and links"
  size: large

Attributes

  • name (string): Required.
    The unique identifier for the field.

  • type (string): Required.
    Must be set to string for rich text fields.

  • display (string): Required.
    Must be set to richtext for rich text display.

  • display_name (string): Optional.
    The label displayed to the user in the interface. If not provided, a formatted version of name is used.

  • guidance (string): Optional.
    Instructions or help text for the user, explaining how to use the field.

  • required (boolean): Optional.
    If true, the field must be filled in before submission. Default: false.

  • readonly (boolean): Optional.
    If true, the field is displayed as read-only and cannot be edited by the user. Default: false.

  • hidden (boolean): Optional.
    If true, the field is not displayed in the user interface. Default: false.

  • default_value (string): Optional.
    The default HTML content displayed when the form is first loaded.

  • size (string): Optional.
    Field size specification. Options: small, medium, large. Default: medium.

Examples

Basic Rich Text Field:

- name: detailed_description
  type: string
  display: richtext
  display_name: "Detailed Description"
  default_value: "<p>Enter your detailed description here...</p>"
  required: false
  guidance: "Use the rich text editor to format your description with headings, lists, and links"
  size: large

Required Rich Text Field:

- name: project_description
  type: string
  display: richtext
  display_name: "Project Description"
  required: true
  guidance: "Provide a detailed description of the project using rich text formatting"
  size: large

Readonly Rich Text Field:

- name: formatted_notes
  type: string
  display: richtext
  display_name: "Formatted Notes"
  readonly: true
  default_value: "<p>These notes are read-only and cannot be edited.</p>"
  size: large

Usage Notes

  • User Interaction:
    • The rich text editor presents a user-friendly interface with a toolbar for text formatting.
    • Users can apply various styles to their text, such as bold, italics, underlining, and lists.
    • The editor supports HTML content, which is stored and rendered appropriately.
  • Display Type:
    • Use display: richtext to enable the rich text editor interface.
    • The field type remains string but the display determines the editor behavior.
  • Default Values:
    • Use default_value to pre-populate the editor with placeholder text or instructions.
    • The content should be valid HTML to ensure proper rendering.
  • Size Options:
    • small: Compact editor suitable for short content.
    • medium: Standard size for most use cases.
    • large: Extended editor for detailed content and longer text.
  • Validation:
    • If required is set to true, validate that the user has entered content before allowing form submission.
    • Additional validation can be implemented to check for minimum content length or the presence of certain elements.
  • Readonly Fields:
    • Setting readonly to true is useful for displaying content that should not be altered, such as terms and conditions or archived comments.
    • The editor will display the content without editing capabilities.
  • Security Considerations:
    • Ensure that user-generated content is sanitized to prevent XSS (Cross-Site Scripting) attacks.
    • Use libraries or frameworks that handle sanitization and encoding of HTML content.
  • Data Storage and Rendering:
    • The content entered in the rich text editor is typically stored as HTML.
    • When displaying the content, render it safely in the application to preserve formatting.
  • Guidance and Labels:
    • Provide clear display_name and guidance to help users understand the purpose of the field.
    • Use the guidance attribute to offer tips on how to use the formatting tools.
  • Use Cases:
    • Detailed Descriptions: Capturing product descriptions, service details, or case narratives.
    • Comments and Notes: Allowing users to leave formatted comments or observations.
    • Content Creation: Editing articles, blog posts, or emails that require rich formatting.
    • Documentation: Creating formatted documentation and guides.
  • Accessibility:
    • Ensure that the rich text editor is accessible to users with disabilities.
    • Provide keyboard shortcuts and screen reader support where possible.
  • Internationalization:
    • Support input in multiple languages and character sets.
    • Ensure that the editor handles right-to-left text if necessary.
  • Performance Considerations:
    • For large amounts of content, ensure that the editor and the application can handle the data efficiently.
    • Implement lazy loading or pagination if displaying multiple rich text fields with extensive content.

By incorporating the rich_text field type into your schema, you enable users to create richly formatted content directly within your application, enhancing the expressiveness and utility of the data collected.

Copyright © 2025 Caseblocks Limited.