• Documentation >
• Guide >
• Content management >
• Rich Text >
• Create Online Editor button

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:

import PropTypes from 'prop-types';
import AlloyEditor from 'alloyeditor';
import EzButton
    from '../../../../vendor/ezsystems/ezplatform-richtext/src/bundle/Resources/public/js/OnlineEditor/buttons/base/ez-button.js';

export default class EzBtnHr extends EzButton {
    static get key() {
        return 'hr';
    }

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

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

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

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

eZ.ezAlloyEditor = eZ.ezAlloyEditor || {};
eZ.ezAlloyEditor.ezBtnHr = EzBtnHr;

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

EzBtnHr.defaultProps = {
    command: 'eZAddContent',
    modifiesSelection: true,
};

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

eZConfigManager.add({
    eZConfig,
    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:

ezplatform:
    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: