如何通过Java脚本获得标准的可湿性粉剂编辑器?

时间:2019-05-16 作者:Lennart Bergmann

在PHP中我可以

wp_editor( \'content\', \'editor_id\', array() );
结果如下:

Standard WP-Editor

带有所有按钮的标准WP编辑器,以及我的自定义按钮(蓝色方块)。

我曾尝试在JS中复制它,但它并没有真正起作用。例如:

wp.editor.initialize(\'editor_id\', {
    \'tinymce\': true,
    \'quicktags\': true,
});
这将返回缺少许多按钮的编辑器:Stunted WP-Editor

我还尝试使用更多设置对其进行初始化:

\'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编辑器,也不会显示我的自定义按钮,尽管它也不会引发错误(我尝试更改插件的url,然后它会引发错误)。

tinyMCE

有什么想法吗?

1 个回复
最合适的回答,由SO网友:Lennart Bergmann 整理而成

好的,我找到了解决方案here

就这么做吧

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(在WP 4.8+中)向jQuery添加的一个特殊函数。

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

相关推荐

我可以使用<脚本>直接插入JavaScript吗?

我对建立Wordpress网站很陌生,所以如果我不能正确描述事情,请原谅我。有一个网站提供。屏幕上飞行蝙蝠的js文件。https://www.delphitools.info/2013/10/30/pimp-your-website-with-an-halloween-bat/它说我可以使用<script async src=\"https://cdn.delphitools.info/wp-content/uploads/2013/10/jsbat.js\"></script>&