我如何用一个插件添加多个按钮到我的WordPress帖子编辑器

How do I add multiple buttons to my WordPress post editor with a single plugin?

本文关键字：WordPress 我的 编辑器 何用一 插件 添加 按钮      更新时间：2023-09-26

我在WordPress社区问过这个问题，但是没有得到答案，所以我想我也应该向这个社区求助。

我正在调整我的WordPress安装，并使用我编写的自定义插件来为我的可视化编辑器添加自定义按钮。现在，我已经遵循本教程并添加了一个"代码"按钮，但我还想添加一个"引用"按钮，将所选文本包装在<cite></cite>标签中。我确信我可以复制插件并做一些小的改变，但这似乎笨拙和低效，我宁愿通过相同的插件添加两个按钮。

这里有一个关于这个主题的相关问题，但它来自几年前，我使用WordPress 3.9.1，它使用了新版本的TinyMCE(可视化编辑器)。正因为如此，我不完全确定这个答案有多少是相关的，或者如何将其应用于TinyMCE 4 *.

下面是我用来添加"code"按钮的PHP脚本: 
<?php
add_action( 'init', 'code_button' );
function code_button() {
    add_filter( "mce_external_plugins", "code_add_button" );
    add_filter( 'mce_buttons', 'code_register_button' );
}
function code_add_button( $plugin_array ) {
    $plugin_array['mycodebutton'] = $dir = plugins_url( 'shortcode.js', __FILE__ );
    return $plugin_array;
}
function code_register_button( $buttons ) {
    array_push( $buttons, 'codebutton' );
    return $buttons;

和相关的JS文件:

(function() {
    tinymce.create('tinymce.plugins.code', {
        init : function(ed, url) {
            ed.addButton('codebutton', {
                title : 'Code',
                cmd : 'codebutton',
                icon: 'icon dashicons-editor-code'
            });
            ed.addCommand('codebutton', function() {
                var selected_text = ed.selection.getContent();
                var return_text = '';
                return_text = '<code>' + selected_text + '</code>';
                ed.execCommand('mceInsertContent', 0, return_text);
            });
        },
        // ... Hidden code
    });
    // Register plugin
    tinymce.PluginManager.add( 'mycodebutton', tinymce.plugins.code );
})();

我需要对这些文件做什么更改来添加另一个自定义按钮?

谢谢!

如果您想添加另一个按钮，只需将其添加到您的functions.php

add_filter( 'mce_buttons', 'wolfie_register_mce_button' );
function wolfie_register_mce_button( $buttons ) {
    array_push( $buttons, 'wolfie_mce_button', 'wolfie_letter_space_decrement', 'your-button-name' ); // Add to this array your another button
    return $buttons;
}

但是如果你想添加新的插件，你可以使用下面的代码:

function wolfie_add_mce_button() {
if ( !current_user_can( 'edit_posts' ) &&  !current_user_can( 'edit_pages' ) ) {
    return;
}
if ( 'true' == get_user_option( 'rich_editing' ) ) {
    add_filter( 'mce_external_plugins', 'wolfie_add_tinymce_plugin' );
}
add_filter( 'mce_buttons', 'wolfie_register_mce_button' );
function wolfie_register_mce_button( $buttons ) {
    array_push( $buttons, 'wolfie_mce_button', 'wolfie_letter_space_decrement', 'your-button-name' ); // Add to this array your another button
    return $buttons;
}
function wolfie_add_tinymce_plugin( $plugin_array ) {
    $plugin_array['wolfie_mce_button'] = $plugin_array['myplugin'] = get_template_directory_uri() . '/assets/js/admin.js'; // <--- here add directory to your js file
    return $plugin_array;
}
}
add_action('admin_head', 'wolfie_add_mce_button');

然后在指定的早期目录中创建js文件，并添加如下内容:

jQuery(document).ready(function($){ 
(function printToEditorMce() {
    tinymce.PluginManager.add('wolfie_mce_button', function(editor, url) {
        editor.addButton('wolfie_mce_button', {
            text: 'Increment letter spacing',
            icon: false,
            onclick: function() {
                var currentFontSize = new Number($(tinyMCE.activeEditor.selection.getNode())
                    .css('letter-spacing').replace('px',''));
                currentFontSize =  currentFontSize + 1;
                tinymce.activeEditor.formatter.register('mycustomformat', {
                   inline : 'span',
                   styles : {'letter-spacing' : currentFontSize + 'px'}
               });                  
                tinymce.activeEditor.formatter.apply('mycustomformat');
            }
        });
        editor.addButton('wolfie_letter_space_decrement', {
            text: 'decrement letter spacing',
            icon: false,
            onclick: function() {
                var currentFontSize = new Number($(tinyMCE.activeEditor.selection.getNode())
                    .css('letter-spacing').replace('px',''));
                currentFontSize =  currentFontSize - 1;
                tinymce.activeEditor.formatter.register('mycustomformat', {
                   inline : 'span',
                   styles : {'letter-spacing' : currentFontSize + 'px'}
               });                  
                tinymce.activeEditor.formatter.apply('mycustomformat');
            }
        });
    });
})();
});

有一个插件可以帮助你，它叫做可视化编辑器自定义按钮。

安装后，在仪表板菜单上有一个选项叫做可视化编辑器自定义按钮，

    有一个选项叫做Add new
  • 将新样式命名为Cite.
    • 确保"Wrap Selection"选项被选中
  • 在"Before"框中输入你想在内容之前包装的内容，例如:"
  • 在"之后"框中输入你想在内容之后包装的内容，例如:"
  • 在上面下面的"在编辑器中显示"框中勾选其中一个或两个选项。
  • 如果选择了可视化/文本，则选择按钮图标/快速标签(可选)
    • 当以上所有操作完成后，点击屏幕右侧的蓝色"Publish"。
  • 打开你想要新样式的页面/帖子并突出显示文本。
    • 点击刚刚创建的样式，它应该被插入。
相关文章：