Question

我在WordPress社区问过这个问题，但没有得到答案，所以我想我也可以联系这个社区。

我正在调整我的WordPress安装，并使用我编写的自定义插件向我的可视化编辑器添加自定义按钮。现在，我已经关注this tutorial并添加了一个＆＃34;代码＆＃34;按钮，但我也想添加一个＆＃34;引用＆＃34;包含<cite></cite>标签中所选文本的按钮。我确信我可以复制该插件并进行微小的更改，但这看起来很笨拙且效率低下，而且我更愿意通过同一个插件添加两个按钮。

关于这个问题here有一个相关的问题，但是几年前，我使用的是WordPress 3.9.1，它使用了新版本的TinyMCE （视觉编辑）。因此，我不完全确定该答案中有多少是相关的，或者如何将其应用于TinyMCE 4. *。

这是我用来添加＆＃34;代码＆＃34;的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 );
})();

我需要对这些文件进行哪些更改才能添加其他自定义按钮？

谢谢！

Answer 1

如果要添加另一个按钮，只需将其添加到您的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');
            }
        });
    });
})();
});

Answer 2

有一个应该可以帮助你的插件，它被称为Visual Editor Custom Buttons。

安装完成后，仪表板菜单上有一个名为Visual Editor Custom Buttons的选项，

有一个名为Add new
将新风格称为例如举。
确保＆＃34;包裹选择＆＃34;选项已勾选
在＆＃34;之前＆＃34;框输入您要在内容之前包装的内容，例如＆＃34;＆＃34;
在＆＃34; After＆＃34;框输入内容后要包装的内容，例如＆＃34;＆＃34;
在＆＃34;编辑器中显示＆＃34;上面的方框中有一个或两个选项。
如果选择了视觉/文本，则选择按钮图标/快速标签（可选）
完成上述所有操作后，点击蓝色＆＃34;发布＆＃34;在屏幕的右侧。
打开您想要新样式的页面/帖子并突出显示文字。
点击您刚刚创建的样式，然后插入它。

如何使用单个插件向我的WordPress帖子编辑器添加多个按钮？

2 个答案: