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.

YAML Definition 

- name: detailed_description
  type: rich_text
  display_name: "Detailed Description"
  guidance: "Provide a comprehensive description using the formatting tools."
  required: true
  default_value: "<p>Enter your text here...</p>"
  toolbar_options:
    - bold
    - italic
    - underline
    - list
    - link

Attributes

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

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

  • 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_value (string): Optional.
    The default HTML content displayed when the form is first loaded.

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

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

  • toolbar_options (array): Optional.
    An array specifying the formatting options available in the editor toolbar. Common options include bold, italic, underline, list, link, etc.

Example 

- name: project_notes
  type: rich_text
  display_name: "Project Notes"
  guidance: "Use this space to record any notes or observations about the project."
  required: false
  default_value: "<p>Start typing your notes here...</p>"
  toolbar_options:
    - bold
    - italic
    - underline
    - strikethrough
    - ordered_list
    - unordered_list
    - link
    - image

In this example:

  • project_notes: The field captures detailed notes with rich formatting.
  • toolbar_options: Specifies the formatting tools available to the user.
  • default_value: Provides initial placeholder content in the editor.

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.
  • 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.
  • 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.
  • Toolbar Customization:
    • The toolbar_options attribute allows you to control which formatting tools are available to the user.
    • Common options include:
      • bold
      • italic
      • underline
      • strikethrough
      • ordered_list
      • unordered_list
      • link
      • image
      • blockquote
      • code
    • Limiting toolbar options can simplify the editor and guide users toward consistent formatting.
  • 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.
  • 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 © 2024 Caseblocks Limited.