How can I get the standard WP-Editor through Javascript?

admin管理员组

文章数量:1426913

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

Share Improve this question asked May 16, 2019 at 13:43 Lennart BergmannLennart Bergmann 4166 bronze badges 1

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

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

本文标签： How can I get the standard WPEditor through Javascript