Skip to content

Create custom Online Editor button

There are different ways to extend the Online Editor. Here you can learn how to add your own buttons.

Follow the procedure below to create a button that inserts an <hr> element into a RichText Field.

First, create the button file in assets/js/online_editor/buttons/hr.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import PropTypes from 'prop-types';
import AlloyEditor from 'alloyeditor';
import IbexaButton
    from '../../../../vendor/ezsystems/ezplatform-richtext/src/bundle/Resources/public/js/OnlineEditor/buttons/base/ibexa-button.js';

export default class IbexaBtnHr extends IbexaButton {
    static get key() {
        return 'hr';
    }

    addHr() {
        this.execCommand({
            tagName: 'hr',
        });
    }

    render() {
        const title = "Hr";
        return (
            <button
                className="ae-button ibexa-btn-ae ibexa-btn-ae--date"
                onClick={this.addHr.bind(this)}
                tabIndex={this.props.tabIndex}
                title={title}>
                <svg className="ibexa-icon ibexa-btn-ae__icon">
                    <use xlinkHref="/bundles/ibexaplatformicons/img/all-icons.svg#tag" />
                </svg>
            </button>
    );
    }
}

AlloyEditor.Buttons[IbexaBtnHr.key] = AlloyEditor.IbexaBtnHr = IbexaBtnHr;

const ibexa = (window.ibexa = window.ibexa || {});

ibexa.ezAlloyEditor = ibexa.ezAlloyEditor || {};
ibexa.ezAlloyEditor.IbexaBtnHr = IbexaBtnHr;

IbexaBtnHr.propTypes = {
    command: PropTypes.string,
    modifiesSelection: PropTypes.bool,
};

IbexaBtnHr.defaultProps = {
    command: 'ibexaAddContent',
    modifiesSelection: true,
};

Then, enable the button. Add the following code in the webpack.config.js file, under // Put your config here:

1
2
3
4
5
6
7
IbexaConfigManager.add({
    IbexaConfig,
    entryName: 'ezplatform-richtext-onlineeditor-js',
    newItems: [
        path.resolve(__dirname, 'assets/js/online_editor/buttons/hr.js'),
    ]
});

Finally, add the button to your Ibexa DXP configuration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
ibexa:
    system:
        admin_group:
            fieldtypes:
                ezrichtext:
                    toolbars:
                         ezadd:
                            buttons:
                                hr:
                                    priority: 50

You have successfully created a custom Online Editor button.

You can now run the yarn encore dev command to regenerate the assets, and create a Content item with a RichText Field. The new button appears in the Element toolbar and inserts an <hr> element when clicked:

Custom button inserting an <hr> into RichText