如何通过Javascript获得标准WP编辑器？

Question

在PHP中我可以做到

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

结果如下：

标准WP-编辑器与所有按钮，加上我的自定义按钮(蓝色方块).

我曾尝试在JS中复制它，但它并不真正有效。例如：

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

这将返回一个缺少许多按钮的编辑器：

我还尝试用更多的设置初始化它：

'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,

这些是来自wp-includes/class-wp-editor.php的，但没有帮助。

我还尝试用tinyMCE初始化它：

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

这导致编辑器有很多按钮，但显然不是标准的WP-Editor，也不显示我的自定义按钮，尽管它也不会抛出错误(我试图更改插件的url，然后抛出一个错误)。

有什么想法吗？

Answer 1

好的，我找到了解决方案，这里

就这么做

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

然后将按钮添加到工具栏，如下所示：

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!");
        }
    });
});

正如我所理解的，它只适用于jQuery，因为它是Wordpress添加到jQuery中的一个特殊函数(在WP 4.8+中)。

您可以在这里看到所有可能的工具栏按钮：https://www.tiny.cloud/docs/advanced/editor-control-identifiers/#toolbarcontrols