Rich Editor / WYSIWYG Field

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.

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:

# 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');
});

# Trigger a Modal from a Custom Button

Use the oc.popup JavaScript function to open a modal window.

oc.popup({
    handler: 'onLoadPopup'
});

Use the backend.ajax.beforeRunHandler to register a global AJAX handler. The makePartial method can be called to render a partial with the modal contents inside.

Event::listen('backend.ajax.beforeRunHandler', function ($controller, $handler) {
    if ($handler === 'onLoadPopup') {
        return $controller->makePartial('~/path/to/my/partials/_popup_form.php');
    }
});

# Advanced Editor Options

Use the editorOptions property to customize the editor options. This is an advanced property, since all options defined here are proxied directly to the editor control.

html_content:
    type: richeditor
    editorOptions:
        imageDefaultWidth: 0

The options are proxied to the underlying Froala editor. The most commonly used options are listed below, grouped by area.

# Image Options

# File Upload Options

# Drag and Drop

# Where to find the full list

The editorOptions values are passed through to the underlying Froala v2 editor. Every available option, along with its default, is declared at the top of each plugin file under vendor_drm/froala/js/plugins/ in the October CMS source — for example image.js for image options and file.js for file upload options.

# Example: block all image insertion

html_content:
    type: richeditor
    editorOptions:
        imageUpload: false
        imagePaste: false
        imageMove: false