将自动关闭的简码按钮添加到WP 4.6中的TinyMCE


11

我熟悉创建自动关闭的短代码,例如:

// shortcode
function wpse_shortcode_example( $wpse_atts ) {

    // Attributes
    $wpse_atts = shortcode_atts(
        array(
            'foo' => 'bar',
            'width' => '100%',
            'height' => 'auto',
        ),
        $wpse_atts,
        'wpse'
    );

    // Return
    return '<embed 
             src="' . $wpse_atts['src'] . '"
             width="' . $wpse_atts['width'] . '"
             height="' . $wpse_atts['height'] . '";

}
add_shortcode( 'wpse', 'wpse_shortcode_example' );

但我想开始将它们添加到TinyMCE中。我已经进行了几次搜索,但是所有搜索结果都已过时或不再使用推荐的方法:

我知道开发人员仍处于起步阶段,但《插件手册》仅简要介绍了TinyMCE增强型短代码Shortcode APIadd_shortcode()没有提及TinyMCE。

因此,这引出了我的问题。在TinyMCE编辑器中将自动关闭的简码转换为可单击按钮的基本过程是什么?


因此,您的意思是如何在TinyMCE编辑器中创建一个按钮,该按钮将自动关闭的简码插入到内容中?
birgire

1
@birgire是的,我想了解将自定义按钮集成到TinyMCE中的基础,该按钮会将简码添加到后期视觉效果中。
DᴀʀᴛʜVᴀᴅᴇʀ

1
您是否通过@bueltge 在这里查看了很好的答案
birgire

@birgire没有它并没有从我的搜索返回,但它是一个很好的Q&A
DᴀʀᴛʜVᴀᴅᴇʀ

Answers:


14

我们首先添加自定义的TinyMCE按钮:

function add_mce_button_custom_em() {
    // check user permissions
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    // check if WYSIWYG is enabled
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'add_tinymce_plugin_custom_em' );
        add_filter( 'mce_buttons', 'register_mce_button_custom_em' );
    }
}
add_action('admin_head', 'add_mce_button_custom_em');

然后,我们声明并注册新按钮:

// Declare script for new button
function add_tinymce_plugin_custom_em( $plugin_array ) {
    $plugin_array['custom_em'] = get_template_directory_uri() .'/plug/custom-em/custom-em.js';
    return $plugin_array;
}

// Register new button in the editor
function register_mce_button_custom_em( $buttons ) {
    array_push( $buttons, 'custom_em' );
    return $buttons;
}

最后,我们决定要显示哪些按钮(有关更多按钮,请参见“ 内容格式”)。显然,如果您想到了UX,则只显示其中一些,例如:

// TinyMCE: TinyMCE choose which buttons you want to display
function myformatTinyMCE( $in ) {
    $in['toolbar1'] = 'styleselect,bold,custom_em,blockquote,hr,aligncenter,link,unlink,spellchecker,undo,removeformat';
    return $in;
}
add_filter( 'tiny_mce_before_init', 'myformatTinyMCE' );

如您在add_tinymce_plugin_custom_em函数中所见,我们在其中声明了一个javascript文件get_template_directory_uri() .'/plug/custom-em/custom-em.js'

因此,创建custom-em.js文件,然后有两种方法可以解决此问题。

您可以使用以下简码格式[shortcode foo="" bar=""][shortcode][/shortcode]

让我们从以下[shortcode foo="" bar=""]格式开始:

(function() {
    tinymce.create('tinymce.plugins.custom_em', {
        init : function(ed, url) {
            ed.addButton('custom_em', {
                title : 'Custom EM',
                image : url+'/images/btn_custom_em.png',
                onclick : function() {
                    ed.execCommand(
                        "mceInsertContent",
                        false,
                        "[shortcode foo=\"\" bar=\"\"]"
                    );
                }
            });
        }
    });
    tinymce.PluginManager.add('custom_em', tinymce.plugins.custom_em);
})(); 

如您所见,我们使用图像作为按钮图标。您可以将其更改为文本,如下例所示。

以下是我们在自己的平台上使用的内容,它将选择内容包装为<em class="whatever">hello world</em>

(function() {
    tinymce.PluginManager.add('custom_em', function( editor, url ) {

        editor.on('init', function(e) {
            this.formatter.register('thetarget', {
                inline : 'em',
                classes : 'whatever'
            });
        });

        editor.addButton('custom_em', {
            text: 'Custom EM',
            icon: false,
            onclick : function() {
                var contents = editor.selection.getContent(),
                tags = jQuery(jQuery.parseHTML(contents)).find('em.whatever').andSelf();
                editor.formatter.toggle('thetarget');
            }
        });
    });
})(jQuery);

请发布结果并执行修改。TinyMCE是一场瘟疫,需要头痛,但可以通过协作的方式解决。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.