Text
Use text widgets to add / update text to a record.
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:
Click the 'edit' icon to edit the text.
Type in the text or drag a *.docx, *.txt, *.md file to import
Click the Submit button to save.
Once submitted, the markdown will be parsed directly:
​
​
​Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.
Heading: H2, H3
Bold
Italic
Underline
Subscript, Superscript
Bulleted List, Numbered List
Quote
Code Block
Mention
To use it:
The text can be edit directly when loaded
Select text and click a button at the toolbar to change the format
Select or drag a *.docs, *.txt, *.md file to import
Click Save to save. If nothing changed, the save button is disabled.
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.
​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.
​
​
​CKEditor is a WYSIWYG rich text editor which enables writing content directly inside of web pages or online applications.
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:
The text can be edit directly when loaded
Select text and click a button at the toolbar to change the format
Select or drag a *.docs, *.txt, *.md file to import
Select or drag a *.tsv, *.csv, *.xlsx file to import existing table
Select or drag a *.jpg, *.png, *.jpeg, *.gif, *.bmp to insert a picture
Click Save to save. If nothing changed, the save button is disabled.
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.
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 can be inserted into CKEditor Classic. A table can also be imported via selecting or drag a *.tsv, *.csv, *.xlsx file.
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.
​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.
Bold
Italic
Underline
Strike through
Code Block
Subscript, Superscript
Bulleted List, Numbered List
Quote
Link
Image
Mention
To use it:
The text can be edit directly when loaded
Select text and click a button at the toolbar to change the format
Select or drag a *.docs, *.txt, *.md file to import
Click Save to save. If nothing changed, the save button is disabled.
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.
Image supported is same as CKEditor Classic.
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.