Editor
A WYSIWYG editor is a control which supports rich content like hyperlinks, images, tables and other basic formatting.
WYSIWYG Features
The WYSIWYG editor supports the following basic and advanced features.
Basic Features
| Feature | Description | Shortcut |
|---|---|---|
| Bold | Display the text in bold (1) | Ctrl + B |
| Underline | Underlines a piece of text (1) | Ctrl + U |
| Italic | Display the text italic (1) | Ctrl + I |
| Align Left | Left-aligns the current block | - |
| Align Center | Center-aligns the current block | - |
| Align Right | Right aligns the current block | - |
| Justify | Fully-justifies the current block | - |
(1) - If there is no selection, the insertion point will set bold/underline/italic for subsequently typed characters. If there is a selection and all of the characters are already bold/underline/italic, the bold/underline/italic will be removed. Otherwise, all selected characters will become bold/underline/italic.
Advanced Features
Insert Unordered List
Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and UL. If the caret is inside a numbered item, the numbered item becomes a bulleted item.
Insert Ordered List
Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and an OL. If the caret is inside a bulleted item, the bulleted item becomes a numbered item.
Indent
Indent the block where the caret is located. If the caret is inside a list, that item becomes a sub-item one level deeper.
Link
Inserts a hyperlink at the current location of the cursor.
| Property | Description |
|---|---|
| Web address | The URL of the web site |
| Display text | The text to display to the user |
| Tooltip | Tooltip when hovering over the display text |
| Open in new window | Whether to open the URL in the current window or in a new window |
Image
Inserts an image at the current location of the cursor.
| Property | Description |
|---|---|
| Web address | The URL of the image |
| Alternate text | The alternate text displayed when the image could not be loaded |
| Width | The width of the image in pixels |
| Height | The height of the image in pixels |
Table
Inserts a table at the current location of the cursor.
| Property | Description |
|---|---|
| Columns | The number of columns |
| Rows | The number of rows |
| Table width | The width of the entire table |
| Unit | The unit of the table width (pixels or percentage) |
| Border size | The border size in pixels |
Undo
This command will undo the previous action. If no action has occurred in the document, then this command will have no effect. note: the shortcut key will automatically trigger this command (typically Ctrl + Z)
Redo
This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect. note: the shortcut key will automatically trigger this command (typically Ctrl + Y)
Known Issues
When starting on an empty line, the styles might not be highlighted in the toolbar. The browser only applies the HTML-tags after entering the first character.
Configuration
The WYSIWYG editor is supported for create and update views for all views fields of type Text. Check both the Multi Line and WYSIWYG Editor checkboxes of the view field configuration.
By default all HTML tags are encoded when displayed to user. If you want to see the HTML in ADM you have to uncheck the Process HTML Tags from the object field. Keep in mind that you are vulnerable to cross-site scripting. Refer to OWASP more information about XSS.