Shortcode下拉WordPress - 仅限文本编辑器

时间:2017-02-13 09:00:56

标签: javascript php jquery wordpress

我正在尝试在添加媒体按钮旁边的WordPress页面编辑器中的纯文本编辑器中添加短代码下拉列表。 我已经看到很多与下拉列表相关的问题,但它们都是专门用于tinyMce编辑器和而不是纯文本编辑器

我的WordPress网站已禁用可视化编辑器,但我仍然希望用户能够看到所有可用的短代码。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:3)

看起来Quicktags API只接受按钮,但我们可以用一些jQuery欺骗系统it does all sort of things;)

短代码下拉列表是根据var data构建的,其行为应该被调整onchange

add_action( 'admin_print_footer_scripts', 'quicktags_so_42200158' );

function quicktags_so_42200158() {
    if ( wp_script_is( 'quicktags' ) ) {
        wp_enqueue_script('jquery');
        ?>
        <script>
        /* Button name and callback will be replaced */
        QTags.addButton( 'dummy_button', 'Dummy button', function(){} );

        jQuery(window).load( function() {
            jQ = jQuery;

            /* Build dropdown - http://stackoverflow.com/a/4814600 */
            var data = {
                '-': 'Select shortcode',
                'video': 'Video',
                'audio': 'Audio'
            }
            var s = jQ('<select />');
            s.attr('id','my-shortcodes');
            for(var val in data) {
                jQ('<option />', {value: val, text: data[val]}).appendTo(s);
            }

            /* Change 'Dummy button' for dropdown */
            jQ('#qt_content_dummy_button')[0].outerHTML = s[0].outerHTML;

            /* What will be inserted on HTML editor */
            jQ('#my-shortcodes').on('change', function(){
                var sc = '[' + jQ(this).val() + ']';
                QTags.insertContent(sc);
            });
        });
        </script>
        <?php
    }
}

参考A Deeper Look Into the WordPress Text Editor