将自定义快捷代码按钮添加到编辑器

时间:2012-01-04 作者:JasonDavis

在新版本的Wordpress 3.0发布之前,我使用下面的jQuery代码向管理面板的编辑器工具栏中添加我自己的快捷代码的自定义按钮,效果很好。然而,随着版本3的发布,它已经停止工作,如果我在管理面板中查看源代码,我可以看到下面的代码正在正确加载,它只是不再工作,有人知道发生了什么变化,或者如何修复以使用新版本吗?

// Add CUSTOM buttons to html editor in admin!
add_action(\'admin_footer\',\'custom_editor_buttons\');

function custom_editor_buttons() {
    ?>
    <script type="text/javascript" charset="utf-8">
    <!--  Define our Editor buttons -->
    edButtons[edButtons.length] = new edButton(
        "hed_0",
        "Citation",
        "[ref]",
        "[/ref]",
        ""
    );
    edButtons[edButtons.length] = new edButton(
        "hed_1",
        "highlight",
        "[highlight]",
        "[/highlight]",
        ""
    );

    jQuery(document).ready(function (b) {
        <!--  Empty editor button tray -->
        <!-- then re-build it with our custom buttons -->
        jQuery("#ed_toolbar").empty();
        function hedShowButtons(button, i) {
            if ( button.id == \'ed_img\' ) {
                jQuery("#ed_toolbar").append(\'<input type="button" id="\' + button.id + \'" accesskey="\' + button.access + \'" class="ed_button" onclick="edInsertImage(edCanvas);" value="\' + button.display + \'" />\');
            }else if (button.id == \'ed_link\') {
                jQuery("#ed_toolbar").append(\'<input type="button" id="\' + button.id + \'" accesskey="\' + button.access + \'" class="ed_button" onclick="edInsertLink(edCanvas, \' + i + \');" value="\' + button.display + \'" />\');
            }else {
                jQuery("#ed_toolbar").append(\'<input type="button" id="\' + button.id + \'" accesskey="\' + button.access + \'" class="ed_button" onclick="edInsertTag(edCanvas, \' + i + \');" value="\' + button.display + \'"  />\');
            }
        }
        for ( var i = 0; i < edButtons.length; i++ ) {
            hedShowButtons(edButtons[i], i);
        }
        jQuery("#ed_toolbar").append(\'<input type="button" id="ed_tabs" class="ed_button" title="Enable and disable tabbing" value="disable tabs" />\');
        jQuery("#ed_toolbar").append(\'<input type="button" onclick="fullscreen.on();" id="ed_fullscreen" class="ed_button" title="Enable and disable fullscreen mode" value="fullscreen" />\');
        jQuery("#ed_toolbar").append(\'<input type="button" id="ed_spell" class="ed_button" onclick="edSpell(edCanvas);" title="\' + quicktagsL10n.dictionaryLookup + \'" value="\' + quicktagsL10n.lookup + \'" />\');
        jQuery("#ed_toolbar").append(\'<input type="button" id="ed_close" class="ed_button" onclick="edCloseAllTags();" title="\' + quicktagsL10n.closeAllOpenTags + \'" value="\' + quicktagsL10n.closeTags + \'" />\');

    });
    </script>
    <?php
}

1 个回复
最合适的回答,由SO网友:JasonDavis 整理而成

我发现了,Wordpress进行了更改,现在您可以通过一个简单的API添加按钮

if( !function_exists(\'_add_my_quicktags\') ){
    function _add_my_quicktags()
    { ?>
        <script type="text/javascript">
        /* Add custom Quicktag buttons to the editor Wordpress ver. 3.3 and above only
         *
         * Params for this are:
         * string id Required. Button HTML ID
         * string display Required. Button\'s value="..."
         * string|function arg1 Required. Either a starting tag to be inserted like "<span>" or a callback that is executed when the button is clicked.
         * string arg2 Optional. Ending tag like "</span>"
         * string access_key Optional. Access key for the button.
         * string title Optional. Button\'s title="..."
         * int priority Optional. Number representing the desired position of the button in the toolbar. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, etc.
         * string instance Optional. Limit the button to a specific instance of Quicktags, add to all instances if not present.(optional)
         */
        QTags.addButton( \'php\', \'PHP\', \'[ php gutter="false" ]\', \'[ /php]\' );
        QTags.addButton( \'js\', \'JS\', \'[ js gutter="false"]\', \'[ /js]\' );
        QTags.addButton( \'h2\', \'H2\', \'< h2>\', \'< /h2>\' );
        QTags.addButton( \'h3\', \'H3\', \'< h3>\', \'< /h3>\' );
        QTags.addButton( \'promt\', \'Prompt\', function(){
            QTags.insertContent(window.prompt() )
        });

        </script>
    <?php }
    // We can attach it to \'admin_print_footer_scripts\' (for admin-only) or \'wp_footer\' (for front-end only)
    add_action(\'admin_print_footer_scripts\',  \'_add_my_quicktags\');
}

结束

相关推荐

将jQuery模式对话框添加到管理区域

我正在为客户编写插件,我需要在我的管理文章中使用lightbox/thickbox/fancybox/etc。无论我使用什么jquery插件,也不管我使用的是wp\\u enqueue\\u样式和wp\\u enqueue\\u脚本,似乎都没有任何效果。没有错误或任何东西。我单击一个链接打开一个隐藏的DIV,但什么都没有发生。有人有其他选择或解决方案吗?谢谢