Registered the Custom Button in JavaScript

Need Help
#1

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!

Richeditor -> Froala register command
#2

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

#3

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.