sc-rich-text-editor
This document is a user guide for the sc-rich-text-editor component version 5.12, released October 31, 2019.
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:
- 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.
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
Resulting field on the form after saving the entered value:
Resulting field in the document and database after saving the entered value: