Rich text editor

Rich text editor is a text box in which users can decorate and format the text.

Usage
Code

Rich text editor also provides options to add media and other useful entities such as inserting images, adding hyperlinks, etc.

Structure

Rich Text Editor

Properties

PropertyValue(s)Default value
Heading
  • Heading 1
  • Heading 2
  • Heading 3
  • Heading 4
  • -
    Text decoration
  • Bold
  • Italics
  • Underline
  • Strikethrough
  • -
    Text color
  • Night
  • Stone
  • Neem
  • Jal
  • Mirch
  • Tawak
  • Night
    Text alignment
  • Left
  • Center
  • Right
  • Left
    List formatting
  • Bulleted list
  • Numbered list
  • Right
  • -
    Insert options
  • Attachment
  • Image
  • Personalization
  • Link
  • More (extendable option)
  • -
    Read only
    (optional)
  • True
  • False
  • -

    Usage


    Hover on options bar items

    Hovering on options bar items

    Selection on options bar items

    Selection on options bar items

    Inserting images

    Users can insert images in the rich text editor using the image button from the options bar.

    Inserting images

    Deleting images

    Users can delete any previously added images by either using backspace or from the selection popover. As the name suggests, selection popover appears when a user clicks on the image.

    Deleting images

    Adding personalized content

    Rich text editor comes with the option to add personalized content. This can be done either by using the personalize button from the options bar or by pressing ’@’ on the keyboard. Doing so will open a dropdown with custom options. The selected option then appears as a chip which can be cleared from the editor if needed.

    Adding personalized content

    Users can add hyperlinks using the link button from the options bar.

    Adding hyperlinks

    Users can edit the hyperlink using the options popover which can be revealed by clicking on the link.

    Editing the hyperlink

    In the options popover -

  • Clicking the link opens it in a new tab.
  • Clicking on the edit button opens the same modal through which a link is added.
  • Clicking on the delete button removes the link and the displayed text altogether.