Elementor Question posted in
A comprehensive tutorial library can be found here.

How do you add a custom button to the Elementor Text Editor widget toolbar?

I’m trying to add a custom button into the Elementor text widget toolbar next to other buttons like Bold, Italic, Underline etc. It seems that the ability to customize the instance using PHP may be disabled but that it is possible to do so using JavaScript instead.

I can get back the view by using the following code but I’m unable to get back the editor instance.

elementor.hooks.addAction( 'panel/open_editor/widget/text-editor', function( panel, model, view ) {}

I’ve tried the following suggestions but none seem to return anything after that.

// get active instances of the editor
let editor = tinymce.activeEditor;

var editor = elementor.editors.get(0).getEditModel().get('editor');

var activeEditor = view.getOption('editor');

The rest of the suggested code after getting the editor instance is as follows but I don’t get this far.

// add a button to the editor buttons
editor.addButton('tooltip', {
  text: 'tooltip',
  icon: false,
  onclick: (editor) => {
    tooltipCallback(editor);
  }
});

// the button now becomes
let button=editor.buttons['tooltip'];

// find the buttongroup in the toolbar found in the panel of the theme
let bg=editor.theme.panel.find('toolbar buttongroup')[0];

// without this, the buttons look weird after that
bg._lastRepaintRect=bg._layoutRect;

// append the button to the group
bg.append(button);
Tags:

2

Answers


  1. 0

    Have you tried:

    var editor = top.window.tinymce.activeEditor

    It might help.

    Login or Signup to reply.
  2. 0

    First of all, you have to listen to the elementor/frontend/init event.
    Then, hook into AddEditor and wait for the init-event to fire.

    window.addEventListener('elementor/frontend/init', () => {
    elementor.hooks.addAction('panel/open_editor/widget/text-editor', function (panel, model, view) {
        top.window.tinymce.on('AddEditor', function (e) {
            e.editor.on('init', (evt) => {
                const editor = top.window.tinymce.activeEditor
                editor.addButton('tooltip', {
                    text: 'tooltip',
                    icon: false,
                    onclick: (evt) => {
                        //action here
                    }
                })

                let button = editor.buttons['tooltip'];
                let bg = editor.theme.panel.find('toolbar buttongroup')[0];
                bg._lastRepaintRect = bg._layoutRect;
                bg.append(button);
            })
        });
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search