<aside> ✅ Feel free to improve as you see fit
</aside>
<aside> ⚙ Owned by <which team to turn to>
</aside>
<aside> ☝ Prerequisites
</aside>
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.
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.
<aside> 💡 Current Limitations Right now, CK5 customization is limited. The editor is shipped with the classic build and a predefined toolbar, which contains the following items: 'bold', 'italic', 'link', 'undo', 'redo'.
This will be expanded in the future to allow for customization similar to CK4.
A list of feature parity should also be provided.
</aside>
As mentioned above, if we want to used the new screen, 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
| CK4 (default) | CK5 | |
|---|---|---|
| UIComponent | form/Ittext | CKEditor |
| UIComponentAlias | ittext | ckEditor |
SwatRichText
| CK4 (default) | CK5 | |
|---|---|---|
| UIComponent | form/Richtext | CKRichEditor |
| UIComponentAlias | richtext | ckRichEditor |
For now, the following options are customizable/useable with CK5:
| 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: ‣
Also supported are the SwatDevTools and field notes, which add additional debug info:
Programatically, most of the functionality should also work for the form field: