Advanced Rich Text Editor (Vuram)

Overview

The Rich Text Editor Component can be used on Appian interfaces where you want to show the rich text information in readable format to the end user. We can use the component to show it as an email subject typing interface.

With this component you can add images, customize tables etc. This also has a functionality called placeholders using which you can use the same information in multiple items in the editor without retyping.
Additionally it allows uploading of images which get stored in the specified Appian folder (requires separate install of the Rich Text Editor Connected System Plug-in).

Note:

  1. It is recommended to use one ARTE Component in a Page/Interface.
  2. We do not encourage to use Short as height in the component.

Key Features & Functionality

Parameters:

  • Label : Text to display as the field label.
  • Label Position: Determines where the label appears. Valid values: “ABOVE” (default), “ADJACENT”, “JUSTIFIED”, “COLLAPSED”.
  • Height: Determines the layout height. Valid values: “SHORT”, “MEDIUM”, “TALL”, “AUTO” (default).
  • MaxSize: Maximum size of the rich text data. Default:10000
  • Placeholder : Placeholder text to display in the component wherever you want.
  • richTextValue: Rich text to display in the field.
  • richTextSaveInto: One or more variables that are updated with the richText value when the user changes it. Use a!save() to save a modified or alternative value to a variable
  • IsReadOnly: Determines if the field should display as editable or not. Valid Values : True or False
  • allowImageUpload : Determines if image upload are allowed. Default: false.
  • imageStorageConnectedSystem: The instance of the connected system used to store images from the rich text editor. This is required if allowImageUpload is set to TRUE. You can download the Connected System from the Appian App Market.
  • Show Usage Bar: Provide false to hide the usage bar at the bottom of editor. Default true
  • Enable Fullpage Output: Enabling fullpage exposes <head>, <body> and various meta tags in richText output. Default true.
  • Enable Spell Checker: Provide true to enable the spell checker. Default false.
  • Uploaded Images Doc Ids SaveInto- Document Ids of all uploaded images will be saved into this rule variable.
  • Exported PDF Id - Returns the document ID of the exported PDF.
  • Enable Export Pdf- Provide false to disable the 'Export as PDF' button. Default: True
Anonymous
  • This feature is already available with the latest version.

  • Would be nice on the insert hyperlink if you had the option of configuring if the link is opened in a new tab, new window.

  • Hi there, we have been using this plugin on a project, but noticed a bug where if you use this on a standard form and type some text in then hit submit, you won't see any text in the process variable, or in the rule input on the form. It only appears if you interact with the form in some other way first, such as entering other information on the form and then submit.

    We found this block of code in the plugin, which might be causing this:

    editor.on("change", function () { clearTimeout(timer); timer = setTimeout(function () { updatedContent = tinyMCE.get("textContent").getContent(); updateUsageBar(updatedContent.length); Appian.Component.saveValue("richText", updatedContent); }, delay); });

    saveValue occurs on change. The change event occurs when the focus is taken away from the editor: https://www.tiny.cloud/docs/advanced/events/#editorcoreevents

    Perhaps something such as this could address it?
    editor.on('keyup', function() { });
    keyup doesn't capture all key inputs such as cut/paste. but tinymce offers all of these events.
    Thanks!
  • I'm also curious if it's possible to make the content selectable to be copied after it is in read only mode (isReadOnly set to true). 

  • Hello,

    I see that the Developer's Guide pdf says that this plugin works in IE 11: "Supported Browsers - Google Chrome, Mozilla Firefox, Internet Explorer11, Edge, Safari."

    However when actually using the plugin in IE11 it doesn't work and gives this message: "This component is not available on Microsoft Internet Explorer 11."

    Was that an error in the guide or is it meant to work in IE 11? If the latter, I think adding "ie11" to the <supported-user-agents> tag of the appian-component-plugin.xml file would fix this.

    Thanks.

  • v1.0.1 Release Notes
    • Fixed issue with the Placeholder dropdown.
    • Component height will be automatically adjusted according to the content of the Rich text if the height is set to AUTO.
    • Now emoticons can be added to the editor.

  • Hi ,

    The component will accept the richTextValue before loading the editor in the interface. Once it loaded, the component won't accept any change in the richTextValue parameter. This is because to avoid a loop when developers use the same rule input for both value and saveInto. 

  • Hi Team,

    Whatever data is passed to richTextValue is not being shown on the UI. Can you explain how its working?

    Thanks in Advance