jjzjj

javascript - Shortcode Dropdown WordPress - 仅限文本编辑器

coder 2024-05-05 原文

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

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

如有任何帮助,我们将不胜感激。

最佳答案

看起来像 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

关于javascript - Shortcode Dropdown WordPress - 仅限文本编辑器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42200158/

有关javascript - Shortcode Dropdown WordPress - 仅限文本编辑器的更多相关文章

随机推荐