web-dev-qa-db-ja.com

"send_to_editor" js関数の複数インスタンスの扱い方

これが私がしていることです：

ボタンやリンクがクリックされたときにiframeポップアップでワードプレスのメディアアップロードを追加しました。そして、投稿への挿入をクリックすると、画像のURLがテキストボックスに配置されます。

send_to_editor()関数はエディタへの画像挿入を処理します 

window.send_to_editor = function(html) {
     var imgurl = jQuery('img',html).attr('src');
     current_item.siblings('.upload_image').val(imgurl);
     current_item.parent().prepend('<div><img width="300" src="'+imgurl+'" alt="banner image" /></div>');
     tb_remove();
    }

そのため、デフォルトのsend_to_editorが編集および変更されているのがわかります。今私はアップロードされたワードプレスエディタの画像から画像をアップロードしようとすると投稿する画像を挿入をクリックしてください。うまくいきません。

質問： send_to_editor()を複数インスタンス化したり、新しいjs関数を作成して画像アップローダの各インスタントにフックして競合しないようにするにはどうすればよいですか。

解決策： 

var original_send_to_editor = window.send_to_editor;

window.send_to_editor = function(html) {
     var imgurl = jQuery('img',html).attr('src');
     current_item.siblings('.upload_image').val(imgurl);
     //current_item.siblings('#logo').remove();
     current_item.siblings('.image-preview').html('<img src="'+imgurl+'" >');    
     tb_remove();
     window.send_to_editor = original_send_to_editor;
}
jqueryuploadsjavascriptwp-editor
4
Sisir

リンクまたはボタンがクリックされたときにのみsend_to_editor関数を上書きしますが、それを元に戻すために古い関数を保存します。クリックイベントでこれを試してください。

//store old send to editor function
window.restore_send_to_editor = window.send_to_editor;
//overwrite send to editor function
window.send_to_editor = function(html) {
     var imgurl = jQuery('img',html).attr('src');
     current_item.siblings('.upload_image').val(imgurl);
     current_item.parent().prepend('<div><img width="300" src="'+imgurl+'" alt="banner image" /></div>');
     tb_remove();
     //restore old send to editor function
     window.send_to_editor = window.restore_send_to_editor;
}
7
Bainternet

私のアプローチは@ Bainternetのものに似ていました。しかし、状況は少し異なりました。手短に言うと、[メディアの追加]ウィンドウを開くボタンが複数あり、それがデフォルトのTinyMCE機能を壊していました。

  1. 2つのアイテムを格納するオブジェクトを作成してください。

    var $state_manager = {
      active_item : 'null',
      default_send_to_editor: window.send_to_editor
}

  2. カスタムボタンをクリックするとactive_itemの値が変わります。

     $('.button').click(function(){
    $state_manager.active_item = $(this).attr('data-unqiue-id');
    // open the window and do whatever else you need
 })

  3. Active_itemの状況を確認し、カスタム作業を行うか、保管されているデフォルト関数を呼び出して、完了したらactive_itemをnullに設定してください。

    window.send_to_editor = function( html ) {
 if($state_manager.active_item === 'null') {
   //call the default
   $state_manager.default_send_to_editor( html );
 }else{
   //do some custom stuff here being sure to reset
   // active_item to 'null' once completed
   $state_manager.active_item = 'null';
 }
}

Active_itemを格納することの利点は、さまざまな入力フィールドをターゲットにして、アップロードされたアイテムのURLをそれらに入力することです。

3
Welcher

私は window.send_to_editor の関数を.click()関数に入れるだけです。

$('#upload_button_1').click(function() {
                            tb_show('','media-upload.php?type=image&amp;TB_iframe=true');

                            window.send_to_editor = function(html) {
                            imgurl = jQuery('img',html).attr('src');
                            // do some rock 
                            tb_remove();
                            }
                            return false;
});
1
l2aelba

プラグインを作成しましたが、エディタ上のメディアの追加と競合します。だから私は以下を変更します。

$('#upload_button').click(function() { 
       tb_show('Upload a logo', 'media-upload.php?type=image&TB_iframe=true&post_id=0', false); 

         //store old send to editor function
        window.restore_send_to_editor = window.send_to_editor;
        // Display the Image link in TEXT Field
        window.send_to_editor = function(html) { 
            var image_url = $('img',html).attr('src'); 
            $('.logofield').val(image_url); 
            tb_remove(); 
            window.send_to_editor = window.restore_send_to_editor;
        } 

       return false; 
    });
0
Lee