Text

Text editors

Overview

Use text widgets to add / update text to a record.

Plain Text

The Plain Text widget is more like a text box. It is simple, light. It also support markdown. Plain Text is good for those fields that accept simple text data and for those developers that prefer markdown.

To use it:

  1. Click the 'edit' icon to edit the text.

  2. Type in the text or drag a *.docx, *.txt, *.md file to import

  3. Click the Submit button to save.

Edit interface of Plain Text

Once submitted, the markdown will be parsed directly:

Readonly interface of Plain Text

Rich Text (Draft.js)

Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.

Features

  • Heading: H2, H3

  • Bold

  • Italic

  • Underline

  • Subscript, Superscript

  • Bulleted List, Numbered List

  • Quote

  • Code Block

  • Mention

To use it:

  1. The text can be edit directly when loaded

  2. Select text and click a button at the toolbar to change the format

  3. Select or drag a *.docs, *.txt, *.md file to import

  4. Click Save to save. If nothing changed, the save button is disabled.

  5. Click Restore to restore unsaved data. If the window is closed accidentally, or if you forget to save the data, the editor will save a copy of the data in your local storage. The Unsaved data can be restored on the next time when you are editing the section.

The interface of Rich Text (Draft.js)

Mention Support

Mention is also supported in Rich Text (Draft.js) widget. Type @ to initial the mention, type words after @ to search. Two type of data can be mentioned.

  • Records. A list of records will show up. Once selected, the mentioned item is clickable.

  • Members. A list of members will show up. Once selected, the member will receive an email notification.

Rich Text (CKEditor Classic)

CKEditor is a WYSIWYG rich text editor which enables writing content directly inside of web pages or online applications.

Features

Compare to Draft.js, CKEditor contains more features

  • Heading

  • Font

    • Font Size

    • Font Family

    • Font Color

    • Font Background Color

  • Alignment

  • Bold

  • Italic

  • Underline

  • Strike through

  • Code Block

  • Subscript, Superscript

  • Bulleted List, Numbered List

  • Quote

  • Link

  • Table

  • Undo, Redo

  • Image

  • Mention

To use it:

  1. The text can be edit directly when loaded

  2. Select text and click a button at the toolbar to change the format

  3. Select or drag a *.docs, *.txt, *.md file to import

  4. Click Save to save. If nothing changed, the save button is disabled.

  5. Click Restore to restore unsaved data. If the window is closed accidentally, or if you forget to save the data, the editor will save a copy of the data in your local storage. The Unsaved data can be restored on the next time when you are editing the section.

The interface of Rich Text (CKEditor Classic)

Image Support

Image is supported in CKEditor Classic. The images can be copied direct from other webpage, or the pictures uploaded to Labii. You also have option to align the images and add caption to the images.

Table Support

Table can be inserted into CKEditor Classic. See the picture above for the detail.

Mention Support

Similar to Draft.js, the CKEditor Classic supports two different mentions, but with different triggers:

  • Records. A list of records will show up. Use # to trigger. Once selected, the mentioned item is clickable.

  • Members. A list of members will show up. Use @ to trigger. Once selected, the member will receive an email notification.

Rich Text (CKEditor Balloon)

CKEditor Balloon editor lets you create your content directly in its target location with the help of a balloon toolbar that appears next to the selected editable document element.

Features

  • Bold

  • Italic

  • Underline

  • Strike through

  • Code Block

  • Subscript, Superscript

  • Bulleted List, Numbered List

  • Quote

  • Link

  • Image

  • Mention

To use it:

  1. The text can be edit directly when loaded

  2. Select text and click a button at the toolbar to change the format

  3. Select or drag a *.docs, *.txt, *.md file to import

  4. Click Save to save. If nothing changed, the save button is disabled.

  5. Click Restore to restore unsaved data. If the window is closed accidentally, or if you forget to save the data, the editor will save a copy of the data in your local storage. The Unsaved data can be restored on the next time when you are editing the section.

The interface of CKEditor Balloon

Image Support

Image is supported in CKEditor Classic. The images can be copied direct from other webpage, or the pictures uploaded to Labii. You also have option to align the images and add caption to the images.

Mention Support

The mention support is identical to CKEditor Classic

  • Records. A list of records will show up. Use # to trigger. Once selected, the mentioned item is clickable.

  • Members. A list of members will show up. Use @ to trigger. Once selected, the member will receive an email notification.