In PHP I can do

wp_editor( 'content', 'editor_id', array() );

And the result looks like this:

The standard WP-Editor with all the buttons, plus my custom button (the blue square).

I have tried to replicate it in JS but it doesn't really work. For example:

wp.editor.initialize('editor_id', {
    'tinymce': true,
    'quicktags': true,
});

This returns an editor which is missing a lot of the buttons:

I have also tried to initialize it with more settings:

'wpautop'             => false,
'media_buttons'       => true,
'default_editor'      => '',
'drag_drop_upload'    => false,
'textarea_name'       => 'editor_id',
'textarea_rows'       => 20,
'tabindex'            => '',
'tabfocus_elements'   => ':prev,:next',
'editor_css'          => '',
'editor_class'        => '',
'teeny'               => false,
'dfw'                 => false,
'_content_editor_dfw' => false,
'tinymce'             => true,
'quicktags'           => true,

These are from wp-includes/class-wp-editor.php but don't help.

I also tried to initialize it with tinyMCE:

tinyMCE.init({
    external_plugins: {
        'mytinymceplugin': '//localhost:3000/wp-content/plugins/my-plugin/plugin.js'
    }
});
tinyMCE.execCommand('mceAddEditor', false, 'editor_id2');

This results in an editor which has a lot of buttons, but is obviously not the standard WP-Editor and also doesn't display my custom button, although it also doesn't throw an error (I have tried to change the url of my plugin and it throws an error then).

Any ideas?

In PHP I can do

wp_editor( 'content', 'editor_id', array() );

And the result looks like this:

The standard WP-Editor with all the buttons, plus my custom button (the blue square).

I have tried to replicate it in JS but it doesn't really work. For example:

wp.editor.initialize('editor_id', {
    'tinymce': true,
    'quicktags': true,
});

This returns an editor which is missing a lot of the buttons:

I have also tried to initialize it with more settings:

'wpautop'             => false,
'media_buttons'       => true,
'default_editor'      => '',
'drag_drop_upload'    => false,
'textarea_name'       => 'editor_id',
'textarea_rows'       => 20,
'tabindex'            => '',
'tabfocus_elements'   => ':prev,:next',
'editor_css'          => '',
'editor_class'        => '',
'teeny'               => false,
'dfw'                 => false,
'_content_editor_dfw' => false,
'tinymce'             => true,
'quicktags'           => true,

These are from wp-includes/class-wp-editor.php but don't help.

I also tried to initialize it with tinyMCE:

tinyMCE.init({
    external_plugins: {
        'mytinymceplugin': '//localhost:3000/wp-content/plugins/my-plugin/plugin.js'
    }
});
tinyMCE.execCommand('mceAddEditor', false, 'editor_id2');

This results in an editor which has a lot of buttons, but is obviously not the standard WP-Editor and also doesn't display my custom button, although it also doesn't throw an error (I have tried to change the url of my plugin and it throws an error then).

Any ideas?

• javascript
• wp-editor

• Note that the standard editor isn't a literal TinyMCE editor, the tinyMCE control is just a part of it. You also have the option of a block editor if you're trying to create one from JS – Tom J Nowell ♦ Commented May 16, 2019 at 14:09

1 Answer 1

Ok I found the solution here

Just do

wp.editor.initialize('editor_id', {
    tinymce: true,
    quicktags: true
});

And then add buttons to the toolbar like so:

jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) {
    if(editor.id !== 'editor_id') return;

    editor.settings.toolbar1 += ',mybutton,alignleft,aligncenter,alignright,fontselect,hr';

    editor.addButton( 'mybutton', {
        text: 'My button',
        icon: false,
        onclick: function () {
            editor.insertContent("It's my button!");
        }
    });
});

It only works with jQuery as I understand because it's a special function added to jQuery by Wordpress (in WP 4.8+).

You can see all possible toolbar buttons here: https://www.tiny.cloud/docs/advanced/editor-control-identifiers/#toolbarcontrols