WordPress.org

1. TwoThirdsWater
   Member
   Posted 6 months 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 6 months 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;
           };

Reply

You must log in to post.