Question

以下代码用于在tinyMCE中上传图片，它不适用于IE9，IE10，请帮助我解决此问题

      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

现在我通过使用TinyMce的集成花式框来完成这个步骤：

在微小的mce中添加自定义图像按钮。
单击按钮时，将显示带有输入文件框
jQuery用于在上传图像后将图像上传到服务器，图像将显示在TinyMce中，并且花式框将关闭。

CODE：

脚本：

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花式框（需要添加精美框和jQuery图像上传库）：

<!-- 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 -->

TinyMCE中显示图像的代码

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

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

TinyMCE图像上传在IE9＆amp; IE10

1 个答案: