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
  • These will be fixed in the next release of the component plugin, hopefully this week.

  • There is a parameter on the component called maxSize which is configurable and lets you increase the allowable size. It defaults to 10,000. You can increase this to support more content.

  • Hi Team,

    We are using the richTextFieldWithTables() component to provide the better user experience in one of the application. But we have few issues while copy and paste the same table from outlook and WordPad. Please find more details below.

    1. Whenever the copy and paste the same table from outlook to component ,It is giving the the error as "Maximum content exceeded" .

    2. Whenever the copy and paste the same table from WordPad OR Excel file, It is not giving any validation error.

    3. Whenever inserted the same table from component as well not receiving the validation error about maximum text length exceeded .

    Observed the below html text from above mentioned scenarios.

    Outlook:

    <table style="margin-left:-.15pt;"> <tbody><tr style=""> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">Parameters</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">NA(1)</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">Basic (2)</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">Average(3)</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">Good(4)</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">Excellent(5)</span></b><span style=""></span></p> </td> </tr> <tr style=""> <td nowrap="" style=""> <p ><b><span style="">Introduction/ Presentation</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p ><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p ><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">3</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p ><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p ><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> </tr> <tr style=""> <td nowrap="" style=""> <p ><b><span style="">Industry background / Knowledge</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">3</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> </tr> <tr style=""> <td nowrap="" style=""> <p ><b><span style="">Knowledge about Org</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> </tr></tbody></table>

    WordPad:

    <p >&nbsp;</p><table style="margin-left:-.15pt;"> <tbody><tr style=""> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">Parameters</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">NA(1)</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">Basic (2)</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">Average(3)</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">Good(4)</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">Excellent(5)</span></b><span style=""></span></p> </td> </tr> <tr style=""> <td nowrap="" style=""> <p ><b><span style="">Introduction/ Presentation</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p ><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p ><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">3</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p ><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p ><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> </tr> <tr style=""> <td nowrap="" style=""> <p ><b><span style="">Industry background / Knowledge</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">3</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> </tr> <tr style=""> <td nowrap="" style=""> <p ><b><span style="">Knowledge about Invesco</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> <td nowrap="" style=""> <p style="text-align:center"><b><span style="">&nbsp;</span></b><span style=""></span></p> </td> </tr></tbody></table><br>

    Inserted Directly Using Component

    <p ><br></p><table ><tbody><tr><td><b><span style="font-size: 14px; background-color: rgb(255, 255, 255);">Parameters</span></b></td><td><b><span style="font-size: 14px; background-color: rgb(255, 255, 255);">NA(1)</span></b></td><td><b><span style="font-size: 14px; background-color: rgb(255, 255, 255);">Basic (2)</span></b></td><td><b><span style="font-size: 14px; background-color: rgb(255, 255, 255);">Average (3)</span></b></td><td><b><span style="font-size: 14px; background-color: rgb(255, 255, 255);">Good (4)</span></b></td><td><b><span style="font-size: 14px; background-color: rgb(255, 255, 255);">Excellence (5</span><span style="font-size: 14px; background-color: rgb(0, 0, 255);">)</span></b></td></tr><tr><td><b>Introduction/P resentation</b></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><p><b><span style="font-size:11.0pt;">Industrybackground / Knowledge</span></b><br></p></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><p><b><span style="font-size:11.0pt;">Knowledgeabout Org</span></b><br></p></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><p><b><span style="font-size:11.0pt;">Knowledgeabout his/her current role and duties</span></b><br></p></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><p><b><span style="font-size:11.0pt;">Knowledgeabout </span></b><br></p></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><p><b><span style="font-size:11.0pt;">Subject/ Technical Knowledge </span></b><br></p></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><p><b><span style="font-size:11.0pt;">Willingto work Shifts (If Applicable)</span></b><br></p></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><p><b><span style="font-size:11.0pt;">Opento Travel (If Applicable)</span></b><br></p></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table><p ><br></p>

    Whenever copy and pasted from outlook, Can see lot html attributes and due to the component exceeded. Is richtextditorwithTables() component automatically not handled to convert into plain html how it is generating using the component. Please advise and let me know, If any details required.

  • Hi Team, what is the font used in both the function could you please share the name of the both font and size by default

  • We discovered the following vulnerabilities (outlined below) utilizing OWASP dependency-check. Do you have any plans to mitigate these CVEs?

    • CVE-2021-41182
    • CVE-2021-41183
    • CVE-2021-41184
    • CVE-2022-31160
  • Hi,

    You can try to add style in html directly like this.

    substitute(
    substitute(
    "<table><tr><td></td>...</tr>...</table>",
    "<table>",
    "<table style='border:solid 1px #cccccc;border-collapse: collapse;border-spacing: 0;'>"
    ),
    "<td>",
    "<td style='border:solid 1px #cccccc;'>"
    )

  • Hi Dinesh,

    I also have this kind of requirement, I have asked to AppMarket for adding a default color option in richTextFieldWithTables, hope they will help to do the enhancement soon.

  • Hi team,

    After upgrade to 1.10.1, in richTextFieldWithTables, the default foot size is changed to 16, is there a plan to fix this to 14 like old version?

  • Hi .

    Can we explicitly provide Fonts and Font Sizes options instead of selecting the options inside the format tab? like current options like (Bold, Italic, Align, etc..). if are there any plans for supporting/addressing this in the future?

  • v1.10.1 Release Notes
    • Upgraded the bootstrap version