web-dev-qa-db-fra.com

Ajouter un bouton de shortcode personnalisé à l'éditeur

Avant la sortie de la nouvelle version de Wordpress 3.0, j'utilisais le code jQuery ci-dessous pour ajouter des boutons personnalisés pour mes propres codes abrégés à la barre d'outils de l'éditeur dans le panneau d'administration. Cela fonctionnait très bien. Cependant, avec la version 3 maintenant, il ne fonctionne plus, si je vois la source dans le panneau d'administration, je peux voir que le code ci-dessous est chargé correctement, il ne fonctionne plus, tout le monde sait-il ce qui a changé ou comment y remédier? avec la nouvelle version?

// 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
}
jqueryshortcodejavascript
5
JasonDavis

Je l'ai trouvé, Wordpress a apporté des modifications et vous pouvez désormais ajouter des boutons via une simple 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');
}
5
JasonDavis