1

I'm stuck in searching a way to access the quicktag buttons on the html editor with jQuery. I tryed to access the buttons with .each() and .children() but both won't work.

jQuery( document ).ready( function( $ ) {

  $( '#ed_toolbar input.ed_button' ).children().css( 'color', 'red' );

  $( '#ed_toolbar input.ed_button' ).each( function() {
    $( this ).css( 'color', 'red' );
  });


});

I think the buttons are not inserted when the DOM is ready.

  • Any progress? Could you find a later event to add your callback? – fuxia Jan 17 '13 at 23:09
  • I found a solution, see my answer below. – Ralf912 Jan 21 '13 at 1:23
1

I wrote a jQuery plugin to check every 0.5 seconds if the toolbar has the requested element.

(function( $ ) {
/**
 * Wait until element has finish loading requested elements, then execute callback 
 * @param string element Element to wait for
 * @param object callback Callback to execute
 * @param integer timeout Optional timeout to stop testing the element if none of the requested element was found
 */
$.fn.waitEdToolbarLoaded = function( element, callback, timeout ) {

    var interval = null;
    var target = this;
    var timeout = typeof timeout !== 'undefined' ? timeout : 5000;

    interval = window.setInterval(

        function () {

            var length = $( target ).find( element ).length;
            timeout -= 500;

            if( 0 > timeout  ) {
                window.clearInterval( interval );
            }

            if( 0 < length ) {
                window.clearInterval( interval );
                callback();
            }
        },
        500
    );

}
})( jQuery );

And a simple example how to use it

jQuery( document ).ready(
function( $ ) {

    // callback to execute if the requested element was found
    function alarm() { alert( 'Toolbar ready!' ); }

    // wait for elements
    $( '#edtoolbar' ).waitEdToolbarLoaded( 'p', alarm );

    // create the elements after 3 seconds
    setTimeout(
        function () {
            for ( var i=1; i<4; i++ ) { $( '#edtoolbar' ).append( '<p>'+i+'</p>' ); }
        },
        3000
    );

}
);

Maybe the plugin need some improvements, but it could be usefull in other situations too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.