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

Text

Plain Text

Section

Plain text/markdown editor

Text

Draft.js

Section

Rich text editor, this widget is deprecated

Text

CKEditor Classic

Section

Smart WYSIWYG HTML editor

Text

CKEditor Balloon

Section

Rich text editor with balloon toolbar

Text

CKEditor Document

Section

Document editing representing the layout of a sheet of paper

Text

CKEditor Restricted

Section

Parts of a document can be editable

Besides the above widgets, Labii also supports Google Docs and Microsoft Word.

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. 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

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. 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 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. 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 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. 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 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. Please use all other CKEditor widgets for the standard editing mode:

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. Create a source section with one of CKEditor widgets, fill in all necessary value.

  2. Use the Restricted Editing Exception to mark the value that can be changed

  3. Create a section with the CKEditor Restricted.

  4. Import data from the step 1