Rich Editor / WYSIWYG
Form Widget
richeditor
- renders a visual editor for rich formatted text, also known as a WYSIWYG editor.
html_content:
type: richeditor
label: Contents
The following field properties are supported and commonly used.
Property | Description |
---|---|
label | a name when displaying the form field to the user. |
default | specifies a default string value, optional. |
comment | places a descriptive comment below the field. |
toolbarButtons | buttons to show on the editor toolbar. Example: bold|italic |
size | specifies a field size for fields that use it, for example, the textarea field. Options: tiny , small , large , huge , giant . |
showMargins | set to true to include resizable document margins. Default: false . |
useLineBreaks | uses line breaks instead of paragraph wrappers for each new line. Default false . |
You may specify how large the field size should be with the size
property.
html_content:
type: richeditor
label: Contents
size: huge
Use the toolbarButtons
property to specify custom buttons.
html_content:
type: richeditor
label: Contents
toolbarButtons: bold|italic|underline
The double-pipe ||
character can be used to include a separator with the buttons.
toolbarButtons: bold|italic|underline||insertPageLink||undo|redo||clearFormatting
The available toolbar buttons are:
- fullscreen
- bold
- italic
- underline
- strikeThrough
- subscript
- superscript
- fontFamily
- fontSize
- color
- emoticons
- inlineStyle
- paragraphStyle
- paragraphFormat
- align
- formatOL
- formatUL
- outdent
- indent
- quote
- insertHR
- insertLink
- insertPageLink
- insertImage
- insertVideo
- insertAudio
- insertFile
- insertTable
- insertSnippet
- undo
- redo
- clearFormatting
- selectAll
- html
The |
character will insert a vertical separator line in the toolbar.
# Registering a Custom Button
The following JavaScript code can be used to register a custom button as a command.
oc.richEditorRegisterButton('insertCustomThing', {
title: 'Insert Something',
icon: '<i class="icon-star"></i>',
undo: true,
focus: true,
refreshOnCallback: true,
callback: function () {
this.html.insert('<strong>My Custom Thing!</strong>');
}
});
Then add the button to the default collection.
oc.richEditorButtons.splice(0, 0, 'insertCustomThing');
When registering the JavaScript, it should come after the assets registered by the Rich Editor. You may extend the RichEditor
class constructor to achieve this.
\Backend\FormWidgets\RichEditor::extend(function($controller) {
$controller->addJs('/plugins/october/test/assets/js/custom-button.js');
});
← Repeater Page Finder →