Rich Text Editor Component

Overview

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).

Visit End-User Rich Text Editor Component for more information.

If you have any problems installing or using the component, please see the 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
  • Hello,

    Many thanks for this plugin, it works great!

    We have found some issues with IE11 though, related to the use of flexbox when the component is used in readonly mode. We believe this issue is due to the readonly mode using display:flex on its #parent-container. If we manually remove that style using our browser tools in IE11, the readonly view displays correctly in IE11.

    Apparently there are many known issues with flexbox and IE11:

    • IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation
    • In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
    • IE 11 does not vertically align items correctly when min-height is used see bug

    Would it be possible for you to have a look at this issue to make sure that this component works correctly for IE11 when in readonly mode?

    Many thanks,

    Philip.

Comment
  • Hello,

    Many thanks for this plugin, it works great!

    We have found some issues with IE11 though, related to the use of flexbox when the component is used in readonly mode. We believe this issue is due to the readonly mode using display:flex on its #parent-container. If we manually remove that style using our browser tools in IE11, the readonly view displays correctly in IE11.

    Apparently there are many known issues with flexbox and IE11:

    • IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation
    • In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
    • IE 11 does not vertically align items correctly when min-height is used see bug

    Would it be possible for you to have a look at this issue to make sure that this component works correctly for IE11 when in readonly mode?

    Many thanks,

    Philip.

Children