Rich Text Editor

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

The Rich Text Editor element allows you to compose, edit, and store the formatted text, in addition to images, fonts, and other elements. The vDesigner incoprorated rich text editor contains all features of a WYSIWYG (what you see is what you get) editor.

It provides you all word processing features to write and compose the rich content. It includes the following:

  • Bold, Italic, and other styles
  • Alignment to align the content
  • Undo, redo features
  • Different font types (Serif and Sans Serif)
  • Content indentation
  • Insert picture feature, and others


When to useWhen not to use
You can use the Rich Text Editor element when
1. you want to highlight content
2. you want to pull the user’s attention to a specific content or section
3. you want to represent the content decoratively
4. you want to display special hyperlinks
or multi-line paragraphs
You should not use the Rich Text Editor element when
1. you want to display only single line information
2. you display simple not-so-important content

Rich Text Editor Configuration

The “Rich Text Editor” element contains the following properties:

  • UI Configuration
  • Data Configuration

UI Configuration

For the “Rich Text Editor”, you can configure the following properties:

abProperty NameDescriptionMandatoryNew Default ValueVisibility Rules
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesRichtext_
BasicOpen Editor
BasicEnableBy default, this check box is selected, the related page displays the timer element as an active element.Selected Check box
BasicVisibleIf you click this check box, the related page does not display the timer element.No
UI Properties-StyleStylesAllows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.NoDefault
UI Properties-StyleBackgroundThis property allows you to define the background color of the Rich Text Editor element.

To define the background color:
1. Click in the left Color box (), and a color canvas opens.
2. On the canvas, on the horizontal bar, move the circle to select the color.
3. In the upper section, move the circle to select the tone of the color.
UI Properties-Alignment and SpacingMarginAllows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.No4
UI Properties-Alignment and SpacingPaddingThe padding defines the space between the element’s content and each side of the element. It provides four different boxes to define the padding around the right, left, top, and bottom side of the element’s content.No0
UI Properties-Shape and DecorationTypeUnder the Shape and Decoration section, this property has the two following options:
Autofill:- If you select this option, the element will occupy the available space of the parent layout.

Manual:- If you select this option, you can define a specific size of the element.
UI Properties-Shape and DecorationWidth ValueEnter the width of the element in the pixel unit or percentage unit.
UI Properties-Shape and DecorationHeight ValueEnter the height of the element in the pixel unit.No
UI Properties-Shape and DecorationBorder RadiusAllows you to define the radius of any of the corners of the element. Defining the radius of the corner makes the corner of the element round.No

Was this article helpful?