WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Using Media Selector in a plugin, stopped it working in TinyMCE (3 posts)

  1. TwoThirdsWater
    Member
    Posted 1 year ago #

    I have a plugin that adds some custom form elements under the TinyMCE editor when editing a page or post.

    One of the tasks I wanted to do was let user add an image to my plugin form using the Media Selector. This I have achieved using the basic advice on http://wordpress.org/support/topic/howto-integrate-the-media-library-into-a-plugin?replies=2

    However... I've just realised that when I have the plugin enabled the Media Selector stops working for the TinyMCE WYSIWYG editor. When trying to add an image using the icon above the TinyMCE the Media Selector appears and lets me select an image, but when clicking 'Insert into post' the Media Selector closes but no images is added to the TinyMCE.

    I'm guessing that when the plugin is active my code overwrites the JS required to add an image into the TinyMCE.

    Does anyone know how I can make a condition within my JS that will allow both to work side by side please?

    The code I am using is:

    // TRIGGERS THE MEDIA SELECTOR
    function promo_trigger_media_selector(itemName)
            {
                itemName = typeof itemName !== 'undefined' ? itemName : promo_name;
    
                /*
                Bits required for the Media selector
                */
                promo_form_item_name = itemName;
                formfield = jQuery('[name="' + itemName + '"]').attr('name');
                tb_show('', 'media-upload.php?type=image&TB_iframe=true');
            }
    
    // HANDLES THE MEDIA SELECTORS RESPONSE
            window.send_to_editor = function(html) {
                imgurl = jQuery('img',html).attr('src');
                classes = jQuery('img', html).attr('class');
                imgID = classes.replace(/(.*?)wp-image-/, '');
                jQuery('[name="' + promo_form_item_name + '"]').val(imgID);
                tb_remove();
            };

    Thanks!

  2. TwoThirdsWater
    Member
    Posted 1 year ago #

    Ok.. I've sorted that issue.

    In short I saved the old 'send_to_editor' function in a variable before I overwrote it. I then checked to see if a variable my plugin creates just before launching the media selector is set and then call either the new or old function accordingly.

    function shine_promo_trigger_media_selector(itemName)
            {
                /*
                Bits required for the Media selector
                */
                promo_form_item_name = itemName;
                formfield = jQuery('[name="' + itemName + '"]').attr('name');
                tb_show('', 'media-upload.php?type=image&TB_iframe=true');
            }
            // save old function in a var
            var old_send_to_editor = window.send_to_editor;
    
            window.send_to_editor = function(html) {
    
                if(promo_form_item_name !== undefined)
                {
                    //alert("doing new");
                    imgurl = jQuery('img',html).attr('src');
                    classes = jQuery('img', html).attr('class');
                    imgID = classes.replace(/(.*?)wp-image-/, '');
                    jQuery('[name="' + promo_form_item_name + '"]').val(imgID);
                    tb_remove();
    
                }
                else
                {
                    //alert("doing old");
                    old_send_to_editor(html);
                }
    
                promo_form_item_name = undefined;
            };
  3. memphismckay
    Member
    Posted 10 months ago #

    Thank you for this solution! :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.