Skip to content

sc-rich-text-editor

This document is a user guide for the sc-rich-text-editor component version 5.12, released October 31, 2019.

go-to-typical-definition

sc-rich-text-editor-field-Example-1-Image-1A

1 Purpose

sc-rich-text-editor is a WYSIWYG HTML Editor that enables rich text editing.

sc-rich-text-editor places a rich text editor field on a form that can be used in either edit or view mode.

Edit mode is for the writing, formatting or editing of text. A counter displays the total number of characters entered. On save, the entered text will be saved with HTML like markup in the document.

View mode converts the text for html display.

Toolbar Icons provide the following functions:

  • Formatting (Bold, Italic, Underline, Strikethrough, Subscript, Superscript, Font Family, Font Size, Colours, Inline Style, Paragraph Style, Horizontal Alignment, Numbered and Bulleted Lists, Indent, Outdent.)
  • Insert links, images, videos, tables, horizontal lines.
  • Upload a file.
  • Toggle full screen.
  • Clear formatting.
  • Undo and Redo change.
  • Select all
  • Code View

The sc-rich-text-editor definition provides fields for setting the properties of a rich text editor field and is fully described below.

2 Definition

sc-rich-text-editor is defined by a set of name/value pair fields consisting of:

  • Required system fields
  • Required customizable fields
  • Optional customizable fields

Note:

  1. Default values for fields described in the tables below are shown in bold text.

2.1 Required System Fields

Field Valid Values Description
componentName sc-rich-text-editor The component name.

Example:
"componentName": "sc-rich-text-editor"

2.2 Required Customizable Fields

Field Valid Values Description
name Any value written in camel case. Defines the name of the rich text editor field in the document and database.

Example:
"name": "testScRichTextEditor"

2.3 Optional Customizable Fields

Field Valid Values Description
defaultValue Any value The value to initially load in the rich text editor field.

Example:
"defaultValue": "Apple"
Defaults to no value is initially loaded.
disableSave true Changing the sc-rich-text-editor field value (i.e. entering or editing text) does not trigger the Save icon to flash.
Exiting the form without saving changes to the sc-rich-text-editor field value does not trigger a warning message to display.
In the Angular version of the sc-rich-text-editor component, clicking the Save icon will not save the sc-rich-text-editor field value to the document.
In the AngularJS version of the sc-rich-text-editor component, clicking the Save icon will save the sc-rich-text-editor field value to the document.

Example:
"disableSave": true
false Default value.
Changing the sc-rich-text-editor field value (i.e. entering or editing text) does trigger the Save icon to flash.
Exiting the form without saving changes to the sc-rich-text-editor field value does trigger a warning message to display.
In both the Angular and AngularJS versions of the sc-rich-text-editor component, clicking the Save icon will save the sc-rich-text-editor field value to the document.
enabled false The sc-rich-text-editor field displays its value in View mode with View mode enabled, Edit mode disabled.
The "View/Edit" switch is hidden.

Example:
"enabled": false
true Default value.
The sc-rich-text-editor field displays its value in View mode with View and Edit modes enabled.
The "View/Edit" switch is visible and enabled.
fullWidth true The rich text editor field displays full width on the form.

Example:
"fullWidth": true
false Default value.
The rich text editor field does not display full width on the form.
label Any value Defines the name of the rich text editor field on the form i.e. the field label.

Example:
"label": "Test sc-rich-text-editor"
Defaults to the rich text editor field displays without a field label on the form.
mandatory true The rich text editor field displays as mandatory (i.e. label in red text with an asterisk).
Saving without a value, a message prompts the user to enter a value for the rich text editor field.

Example: "mandatory": true
false Default value.
The field displays as optional (i.e. label in black text).
visible false The rich text editor field is not visible on the form.

Example:
"visible": false
true Default value.
The rich text editor field is visible on the form.

3 Typical Definition

Below is a typical sc-rich-text-editor definition, defined with its required fields plus any optional field whose value is typically other than its default value.

        {
            "componentName": "sc-rich-text-editor",
            "name": "testScRichTextEditor",
            "fullWidth": true,
            "label": "Test sc-rich-text-editor"
        }

One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.

            "defaultValue": "Apple",
            "disableSave": false,
            "enabled": true,
            "mandatory": false,
            "visible": true

4 Examples

Example 1

A sc-rich-text-editor definition defined with the typically needed fields.

        {
            "componentName": "sc-rich-text-editor",
            "name": "testScRichTextEditor",
            "fullWidth": true,
            "label": "Test sc-rich-text-editor"
        }

Resulting field on the form:

The character count can be seen in the bottom left corner of the sc-rich-text-editor field.

sc-rich-text-editor-field-Example-1-Image-1A

Resulting field on the form after entering but before saving a value:

This example shows an sc-rich-text-editor field in Edit mode with a value containing:

  • Formatted and unformatted text.
  • A link
  • An image
  • A table

sc-rich-text-editor-field-Example-1-Image-2A

Resulting field on the form after saving the entered value:

sc-rich-text-editor-field-Example-1-Image-3A

Resulting field in the document and database after saving the entered value:

sc-rich-text-editor-field-Example-1-Image-4A