TinyMCE Image upload not working in IE9 & IE10

Question

The following code is using for uploading image in tinyMCE , Its not working in IE9,IE10,PLEASE HELP ME TO SOLVE THIS

      editor.addButton('imageinsert', {
                        title : 'Insert image',
                        image : '<?php echo Yii::app()->request->baseUrl; ?>/images/image-icon.png',
                          onclick : function(e) {

                                e.preventDefault();
                                if ($.browser.msie)
                                {
                                    $('#tinymce-image-upload').click(function(){
                                        setTimeout(function()
                                              {
                                                  if($input.val().length > 0) {
                                                    uploadImage(editor,e);
                                                  }
                                              }, 0);

                                    });
                                }                                  
                                else{

                                $('#tinymce-image-upload').click();

                                $('#tinymce-image-upload').change(function(event){
                                       event.preventDefault();
                 uploadImage(editor,e);

                                }); 

                              }

                      }  
      });

Answer 1

Now I done this by using a integrating fancy box to TinyMce the steps are:

1. Add custom image button in tiny mce.
2. When click on the button a fancy box will displayed with input file box
3. jQuery is used for uploading the the image to the server after uploading the image that image will displayed in TinyMce and the fancy box will close.

CODE:

Script :

tinymce.init({
    selector: "textarea#MerchantsEmailMarketing_email_body",
    theme: "modern",
  readonly : parseInt($("#viewAccess").val()),
    menubar: false, statusbar: false, force_p_newlines: false,relative_urls:true,
    height: 405,
    convert_urls: false,
    init_instance_callback:function(){
      ac = tinyMCE.activeEditor;

      var links = tinymce.activeEditor.getDoc().getElementsByTagName("a");
      for (i = 0; i < links.length; i++) {
         links[i].setAttribute("onclick", "return false");
      }
    },

    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor "
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link  |  imageinsert | forecolor backcolor ", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ],
            setup: function(editor) {
              editor.addButton('imageinsert', {
                                title : 'Insert image',
                                image : '<?php echo Yii::app()->request->baseUrl; ?>/images/image-icon.png',
                                  onclick : function(e) {
                                    $('#tinymce-image-upload').val('');
                                  $(".fancybox-for-file-upload").fancybox({
                                        'padding': 0,
                                        'margin': 0,
                                        'autoScale': true,
                                  }); 
                                  $(".fancybox-for-file-upload").click();    
                              }  
              });
     }
});

Html fancy box (need to add library of fancy box and jQuery image upload):

<!-- upload view -->
    <a href="#file-upload-window" class="fancybox-for-file-upload"></a>
    <div style="display:none" class="popup-wrappeer"  >
        <div id="file-upload-window"  class="sow-popup-content-wrap" style="background-color:#FFF4DF;width:500px;height:130px" >

             <h3 style="white-space:nowrap;">
                  <?php echo Yii::t(Yii::app()->session['translator'], 'MERCHANT_MESSAGING_FILE_NOT_SELECTED') ?>
                  <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  <hr color="#DDB25B" size="1"/>        
             </h3>
               <?php
                $form = $this->beginWidget('CActiveForm', array(
                    'id' => 'createDeal-form',
                    'enableAjaxValidation' => false,
                    'enableClientValidation' => true,
                    'htmlOptions' => array(
                        'enctype' => 'multipart/form-data',
                    ),
                ));
                ?> 

                <div id='dealPreview' class="formDeal_img_holder"> </div> 
                  <div class="formDeal_img_selector">
                              <input type="file" name="email_image" id="email_image" />
                   </div>
                 </div> 

                 <div id="image_error" class="errorMessage" "></div>
                <?php $this->endWidget(); ?>
        </div>
    </div>
    <!-- end upload view -->

code for display image in TinyMCE

var image = '<img  src="'+ data +'" >';  // data contain image URL

                 tinymce.activeEditor.execCommand('mceInsertContent',true, image);
                  $.fancybox.close();