Widgets
Applications
Text
Text editors
Overview
Use text widgets to add / update text to a record.
Labii ELN & LIMS supports a list of the Text widgets for you to choose to document text data.
Category
Widget
Type
Description
Plain Text
The Plain Text widget is more like a text box. It is simple, light. It also supports markdown. Plain Text is good for those fields that accept simple text data and for those developers that prefer markdown.
To use it:
- 1.
- 2.Click the 'edit' icon to edit the text.
- 3.Type in the text or drag a *.docx, *.txt, *.md file to import
- 4.Click the Submit button to save.
Edit interface of Plain Text
Once submitted, the markdown will be parsed directly:
Readonly interface of Plain 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. The widget can be added via this guideline.
Features
- Heading: H2, H3
- Bold
- Italic
- Underline
- Subscript, Superscript
- Bulleted List, Numbered List
- Quote
- Code Block
- Mention
​
- 1.
- 2.The text can be edit directly when loaded
- 3.Select text and click a button at the toolbar to change the format
- 4.Select or drag a *.docs, *.txt, *.md file to import
- 5.Click Save to save. If nothing changed, the save button is disabled.
- 6.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 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 types 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.
​
​
This widget is depracated. We encourage you using other widgets.
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:
- Undo, Redo
- Heading
- Font
- Font Size
- Font Family
- Font Color
- Font Background Color
- Alignment
- Bold
- Italic
- Underline
- Strikethrough
- Subscript, Superscript
- Restricted Editing
- Remove Format
- List
- Bulleted List
- Numbered List
- Indent
- Outdent
- Image Upload
- Block Quote
- Table
- Code, Code Block
- Link
- Page Break
- Special Characters
- Math
- Chemical Structure
- Export
- Export PDF
- Export Word
To use it:
- 1.
- 2.The text can be edit directly when loaded
- 3.Select text and click a button at the toolbar to change the format
- 4.Select or drag a *.docs, *.txt, *.md file to import
- 5.Select or drag a *.tsv, *.csv, *.xlsx file to import existing table
- 6.Select or drag a *.jpg, *.png, *.jpeg, *.gif, *.bmp to insert a picture
- 7.Click Save to save. If nothing changed, the save button is disabled.
- 8.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 the next time when you are editing the section.
Image Support
The Image is supported in CKEditor Classic. Select or drag a *.jpg, *.png, *.jpeg, *.gif, *.bmp to insert a picture. You also have the option to align the images and add a caption to the images.
Table Support
The Table can be inserted into the 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.
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. It supports all features described in the CKEditor Classic.
Features
- Font
- Font Size
- Font Color
- Font Background
- Alignment
- Bold
- Italic
- Underline
- Strikethrough
- Subscript, Superscript
- Block Quote
- Code Block
- List
- Bulleted List
- Numbered List
- Indent
- Outdent
- Image upload
- Table
- Link
To use it:
- 1.
- 2.The text can be edit directly when loaded
- 3.Select text and click a button at the toolbar to change the format
- 4.Select or drag a *.docs, *.txt, *.md file to import
- 5.Click Save to save. If nothing changed, the save button is disabled.
- 6.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 the next time when you are editing the section.
The interface of CKEditor Balloon
CKEditor Document
​CKEditor Document is a feature-rich build focused on rich text editing experience similar to the native word processors. It works best for creating documents that are usually later printed or exported to PDF files.
This widget has all functionalities from CKEditor Classic.
CKEditor Restricted
​The restricted editing feature allows you to define which parts of a document can be editable for a group of users who have more restricted editing rights.
In order to do that, this feature introduces two editing modes:
Standard editing mode – In this mode, the user can freely edit the content and choose regions that should be editable in the restricted editing mode.
To create the restricted area:
- 1.If you are in the Restricted mode, click the Switch to Standard button to enable the Standard editing mode.
- 2.Type in the text as you normally do.
- 3.Select text to be defined as changeable.
- 4.Click the Enable editing icon, the select area shall display in orange.
Restricted editing mode – When the editor is initialized in this mode, the user can only edit the content within the regions chosen by the user in the standard editing mode.
How to use:
- 1.If you are in Standard mode, click the Switch to Restricted button to enable the Restricted editing mode.
- 2.Click the highlighted area and type in the necessary data.
Last modified 1yr ago