Registered the Custom Button in JavaScript

Hi everyone,

I’m working on adding a custom button to the Rich Editor in OctoberCMS, and despite following the documentation and trying various troubleshooting steps, the button is not appearing in the editor.

Here’s a rundown of what I’ve done:

Registered the Custom Button in JavaScript

I used the following JavaScript code to register the custom button:

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

oc.richEditorButtons.splice(0, 0, 'insertCustomThing');

Here’s how I’ve set up the Rich Editor in my fields.yaml file

content:
        label: Content
        type: richeditor
        size: giant
        span: full
        required: true
        toolbarButtons: insertCustomThing|html||undo|redo||bold|italic|underline||paragraphFormat|fontFamily|fontSize|align

I have add the follow code to the boot function:

    \Event::listen('backend.page.beforeDisplay', function ($controller, $action, $params) {
        $controller->addJs('/plugins/my-name/kb/assets/js/custom-button.js');
    });

Despite following these steps, I still don’t see the custom button in the Rich Editor’s toolbar. and I’m not sure what else to try.

When i check the html of the backend site is see the js custom-button.js is loaded. I se ein the html:

<div
        id="RichEditor-formContent-content"
        class="field-richeditor size-giant  vue-mode"
                        data-use-media-manager="true"        data-editor-lang="nl"        data-toolbar-buttons="insertCustomThing,html,|,undo,redo,|,bold,italic,underline,|,paragraphFormat,fontFamily,fontSize,align"
data-legacy-mode="0"
        data-ace-vendor-path="https://myurl.com/modules/backend/formwidgets/codeeditor/assets/vendor/ace"
        data-control="richeditor">

Has anyone faced a similar issue or have any insights into what might be going wrong? Your help would be greatly appreciated!

ou yeah, … this is really goooood question and, of course, no answer, because of these things to keep in mind:

  • Editor component (core OCMS Editor) can be altered with multiple versions, one, with Vue.js and one without…
  • There are multiple editors and flows when you use Editor in Editor module, Editor in Pages plugin, Editor in Blog plugin, etc. etc. etc.

i made a multiple try/fail attempts, but, i leave path that leads thru using custom button in any kind of richeditor :smiley: it is a great pain, in order to make any extension for it. something like Image databanks

It’s close. You need to extend the RichEditor widget instead of the controller to correct the load order.

\Backend\FormWidgets\RichEditor::extend(function($controller) {
    $controller->addJs('/plugins/october/test/assets/js/custom-button.js');
});

Let’s add this to the documentation.