如何使用单个插件向我的 WordPress 帖子编辑器添加多个按钮? [英] How do I add multiple buttons to my WordPress post editor with a single plugin?

问题描述

我在 WordPress 社区问过这个问题，但没有得到答复，所以我想我也会联系这个社区.

我正在调整我的 WordPress 安装，并使用我编写的自定义插件将自定义按钮添加到我的可视化编辑器.现在，我已经关注了本教程 并添加了一个代码"按钮，但我还想添加一个引用"按钮，将所选文本包装在 <cite></cite> 标签中.我确定我可以复制插件并进行细微的更改，但这看起来笨拙且效率低下，我更愿意通过同一个插件添加两个按钮.

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

这是我用来添加代码"按钮的 PHP 脚本:

以及相关的JS文件:

(function() {tinymce.create('tinymce.plugins.code', {初始化:功能(编辑，网址){ed.addButton('代码按钮', {标题:'代码'，cmd : '代码按钮',icon: 'icon dashicons-editor-code'});ed.addCommand('codebutton', function() {var selected_text = ed.selection.getContent();var return_text = '';return_text = '<代码>'+ selected_text + '</code>';ed.execCommand('mceInsertContent', 0, return_text);});},//... 隐藏代码});//注册插件tinymce.PluginManager.add('mycodebutton', tinymce.plugins.code);})();

我需要对这些文件进行哪些更改才能添加另一个自定义按钮?

谢谢！

解决方案

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

安装后，仪表板菜单上会出现一个名为 Visual Editor Custom Buttons 的选项，

• 有一个名为 Add new 的选项
• 将新样式称为例如引用.
• 确保勾选Wrap Selection"选项
• 在之前"框中输入要在内容之前包装的内容，例如""
• 在之后"框中输入要在内容之后包装的内容，例如""
• 在上方下方的在编辑器中显示"框中勾选一个或两个选项.
• 如果选择了视觉/文本，则选择按钮图标/快速标签(可选)
• 完成上述所有操作后，点击屏幕右侧的蓝色发布".
• 打开您想要新样式的页面/帖子并突出显示文本.
• 点击您刚刚创建的样式，然后将其插入.

I asked this over in the WordPress community, but didn't get an answer, so I thought I'd reach out to this community as well.

I'm tweaking my WordPress installation, and using a custom plugin I've written to add custom buttons to my visual editor. Right now, I've followed this tutorial and added a "code" button, but I'd also like to add a "cite" button that wraps the selected text in <cite></cite> tags. I'm sure I could just duplicate the plugin and make the minor changes, but that seems clunky and inefficient, and I'd much rather add both buttons via the same plugin.

There's a related question about this subject here, but it's from a few years ago, and I'm using WordPress 3.9.1, which uses a new version of TinyMCE (the visual editor). Because of that, I'm not entirely sure how much of that answer is relevant, or how to apply it to TinyMCE 4.*.

Here's the PHP script that I use to add a "code" button:

<?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;

And the relevant JS file:

(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 );
})();

What changes do I need to make to these files to add another custom button?

Thanks!

解决方案

There is a plugin that should help you, it's called Visual Editor Custom Buttons.

Once installed there is an option on the dashboard menu called Visual Editor Custom Buttons,

• There is an option called Add new
• Call the new style something e.g. Cite.
• Make sure the "Wrap Selection" option is ticked
• In the "Before" box enter what you want to be wrapped before the content e.g. ""
• In the "After" box enter what you want to be wrapped after the content e.g. ""
• In the "Display in Editor" box below the above tick one or both of the options there.
• If the Visual/Text are selected then choose the button icon/Quick label (optional)
• Once all the above is done click on the blue "Publish" on the right hand side of the screen.
• Open the page/post you want the new style on and highlight the text.
• Click on the style you just created and it should be inserted.

这篇关于如何使用单个插件向我的 WordPress 帖子编辑器添加多个按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！