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. Select or drag a *.tsv, *.csv, *.xlsx file to import existing table

  5. Select or drag a *.jpg, *.png, *.jpeg, *.gif, *.bmp to insert a picture

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

  7. 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. Select or drag a *.jpg, *.png, *.jpeg, *.gif, *.bmp to insert a picture. You also have option to align the images and add caption to the images.

For the security reasons, pictures outside of labii domain is not supported.

For the security reasons, pictures copied from your uploaded picture in Labii is also not supported. The picture link copied from Labii is temporary and it will became invalid on next access. Use the above import function to insert a picture.

Table Support

Table can be inserted into CKEditor Classic. A table can also be imported via selecting or drag a *.tsv, *.csv, *.xlsx file.

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 supported is same as CKEditor Classic.

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.