Rich Text Editor Component

Overview

Starting in 24.2, the Styled Text Editor Component is available directly in the product. Consider using this in place of the plug-in moving forward. For more information, review: https://docs.appian.com/suite/help/latest/Styled_Text_Editor_Component.html

  • Displays a field that allows for users to type text and format it with a variety of style options.
  • Output is saved as HTML. To get the raw character output, designers can use the Appian function fn!stripHtml() on the output.
  • HTML output can be passed into Send E-Mail node or document generation smart services. Note that not all formats supported by the Rich Text Editor component may be supported by e-mail or document generation.
  • Allows uploading of images which get stored in the specified Appian folder (requires separate install of the Rich Text Editor Connected System Plugin from https://community.appian.com/b/appmarket/posts/rich-text-editor-image-upload-connected-system).

Visit https://community.appian.com/w/the-appian-playbook/1378/end-user-rich-text-editor-component for more information. If you have any problems installing or using the component, please see the https://community.appian.com/w/the-appian-playbook/1603/rich-text-editor-component-plug-in-troubleshooting-guide

Key Features & Functionality

  • Component: fn!richTextField()
  • Allows for size validation
  • Allows for adjustable height
  • Allows for read-only / editable view
  • Supported font formats: "header", "size", "bold", "italic", "underline", "strike", "color", "background", "link", "align", "indent", "list"
  • Designer control over the allowed formats

Supported Browsers: Chrome, Firefox, Edge, Safari
Supported on Mobile

Anonymous
Parents
  • Are we able to change process bar percentage, wanted to show exact number of char inputted, instead of including html tags?

    For instance: Set maxSIze:100, inputted one alphabet char('a'), progress bar showing 12%, expected output is 1%.

    Can someone help me in this?

  • The maxSize is to validate the length of text you actually store in the database, due to your database column limitation.  If your DB column is VARCHAR(100), you can only store 100 characters, including HTML tags.

    The reason for progress bar was to avoid confusion since the actual character count is always larger than the number of visible characters due to HTML tags.

    If you want to validate to 100 non-HTML characters, just hide the progress bar and use striphtml() to calculate how many visible characters are in the field.  However, keep in mind that what's written to the database is generally much larger than the number of visible characters, so we'd always recommend setting maxSize = the size of your DB column, to avoid errors in the write to DB.

Comment
  • The maxSize is to validate the length of text you actually store in the database, due to your database column limitation.  If your DB column is VARCHAR(100), you can only store 100 characters, including HTML tags.

    The reason for progress bar was to avoid confusion since the actual character count is always larger than the number of visible characters due to HTML tags.

    If you want to validate to 100 non-HTML characters, just hide the progress bar and use striphtml() to calculate how many visible characters are in the field.  However, keep in mind that what's written to the database is generally much larger than the number of visible characters, so we'd always recommend setting maxSize = the size of your DB column, to avoid errors in the write to DB.

Children
No Data