- Description
- How to use it
- Attributes
- Programatic Functions
- CLAPI
- Samples
- Application Settings customisation
- ckEditor5.prebuild
- ckEditor5.customConfig
Description
CKEditor 5 was integrated in SWAT. The new editor can be used in both a form or a panel, through the existing object types: SwatText (SimpleSwatText) for Panel and SwatRichText (SimpleSwatRichText) for the Form.
CKEditor4
Some setup steps will be necessary to use the new version. The old CK4 version is still available in SWAT and can be used alongside the new version.
This will be expanded in the future to allow for customization similar to CK4.
A list of feature parity should also be provided.
How to use it
As mentioned above, if we want to used the new version, we can drag and drop the existing object types in the designer: SwatText or SwatRichText. We will need to manually change two attributes in order to make this work. See below tables for each case.
SwatText
Attribute | CK4 (default) | CK5 |
UIComponent | form/Ittext | CKEditor |
UIComponentAlias | ittext | ckEditor |
SwatRichText
Attribute | CK4 (default) | CK5 |
UIComponent | form/Richtext | CKRichEditor |
UIComponentAlias | richtext | ckRichEditor |
Attributes
For now, the following options are customizable/useable with CK5.
Attribute | SwatText | SwatRichText |
ENABLED | Determines if the editor is read-only or now. For the Panel, this will also change the toolbar to the read-only version (without save buttons). | Determines if the editor is read-only or now. For the Panel, this will also change the toolbar to the read-only version (without save buttons). |
typeRange | Same functionality with CK4. | Same functionality with CK4. |
EventAKAfterSave | Event called after save is triggered. | - |
EventOnCustomStateChange | Event called with custom state is change. | Event called with custom state is change. |
eventOnInitialize | Event called when editor is initialized on screen launch. | - |
eventOnStateChanged | Event called on blur when value in the editor is changed; this will trigger the dirty state which will alert the user if unsaved changes are present on close/record switch. | Event called on blur when value in the editor is changed; this will trigger the dirty state which will alert the user if unsaved changes are present on close/record switch. |
BorderTitle | Title to be displayed on the editor panel. | - |
Mandatory | - | Sets the field as mandatory or not. Can also be set programmatically. |
EventAKValidate | - | Event triggered on blur, whenever the value in the editor is changed. |
EventEntry | - | Called when focusing inside the editor. |
EventLeave | - | Called when focusing outside the editor. |
EventOnInfoSelected | - | Info button which shows up next to the label. |
LABEL | - | Sets the field label in the form. |
HEIGHT-CHARS | - | The number of rows the field will have in the form. In the form, the height is always fixed, calculated based on this attribute. In the panel, the height of the editor will resize to take up the entire space. |
More info regarding custom states: 
Custom States for the state-engine
Also SwatDevTools are supported and field notes, which add additional debug info:
Programatic Functions
Programatically, most of the functionality should also work for the form field:
- enableFormField/disableFormField
- showFormField/hideFormField
- setFormFieldNote
- formDisableEnableFields
- setValue/getValue
- getFieldNoteValue
- getFieldIsHidden
- getFieldIsVisible
- getFieldIsEnabled/getFieldIsDisabled
- setAllFormFieldsReadonly
- enableAllFields/disableAllFields
- getFieldIsRequired/setRequired
- setValidationRule/deleteValidationRule
- setFieldLabel
- getFormData
- getFieldsHasChanges
- getFieldHasErrors
- getFormFieldEnabled
- setFieldHasChanges/getFieldHasChanges
- setLabel
Currently not working:
- setAnonymisedControl
CLAPI
Support for CLAPI was also added, similar to the old CK4. The class supports the same methods as the old one, plus any additional inherited functionality:
- get: plainValue and screenValue
- set: screenValue
Samples
Sample screen with SwatRichText and SwatText: SampleCK5dialog
Application Settings customisation
application settings ckEditor5 namespace was added to configure:
ckEditor5.prebuild
Available options:
'superbuild-classic''superbuild-balloon''superbuild-decoupled''superbuild-inline''inline''balloon''classic''balloon-block''decoupled-document''multi-root'
Superbuild modes should only be used in development and testing environments, not for production.
ckEditor5.customConfig
Path to custom JSON file for configuring CkEditor 5 editor settings. The default value is the next one.
"/config/default/ck5_config.json"
Back to 
Documentation
Back to Home Page