如何在TinyMCE插件中使用jQuery？

Question

我在TinyMCE 4.3.12中創建了一個插件。

該插件將一個按鈕添加到工具欄。

當你點擊按鈕，一個小的彈出打開並詢問提供的圖像文件名（例如：my_image.jpg）

然後，插件構建圖像的完整URL（例如：http://www.example.com/images/my_image.jpg）和將其插入TinyMCE編輯器。所有的工作正常，插件看起來像這樣：

tinymce.PluginManager.add('imgc500', function(editor) { 
    // Add a button that opens a window 
    editor.addButton('imgc500', { 
     text: 'C500', 
     icon: false, 
     onclick: function() { 
      // Open window 
      editor.windowManager.open({ 
       title: 'Please enter filename: ', 
       body: [ 
        {type: 'textbox', name: 'file', label: 'Image'}, 
        {type: 'textbox', name: 'caption', label: 'Caption'}, 
        {type: 'textbox', name: 'copyr', label: 'CopyRight'} 
       ], 
       onsubmit: function(e) { 
        // Insert content when the window form is submitted 

        editor.insertContent('<center><div class="" style="width:504px;"><div><img src="http://www.example.com/images/' + e.data.file + '"' + ' border="0" width="500"></div><div class=""> <div>' + e.data.caption + ' </div><div>Photo: &copy ' + e.data.copyr + ' </div></div></div></center><br />'); 
       } 
      }); 
     } 
    }); 
}); 

上述代碼工作正常。

在現在，問題

我試圖做到的是：

• 代替設置文件名，我想提供一個PHOTO_ID。

• 一旦我點擊提交，jQuery Ajax函數將檢索PHOTO_ID並向網站提交一個JSON請求，該請求將返回一個JSON消息，並在TinyMCE編輯器中插入實際文件名。

• 我的新插件看起來是這樣的：

  tinymce.PluginManager.add（ 'imgc500'，函數（編輯）{// 添加打開一個窗口 editor.addButton（ 'imgc500' 按鈕， { 文本： 'C500'， 圖標：假， 的onclick：函數（）{// 打開窗口 editor.windowManager.open（{ 標題： '請輸入照片ID：'， 體：[ {鍵入：'textbox'，名稱：'photoid'，標籤：'PHOTO ID'}

    ], 
        onsubmit: function(e) { 
         // Insert content when the window form is submitted 
         var lData = { 
          thephotoid: e.data.photoid 
         } 
         //alert(e.data.photoid); 
          $(document).ready(function(){ 
  
          $.ajax({ 
            type: "POST", 
            url: "http://www.example.com/wservices/get_photo_by_phid", 
            data: lData, 
            //dataType: "json", 
            contentType: "application/json; charset=utf-8", 
  
            error: function(xhr, error) { 
             alert('Error! Status = ' + xhr.status + ' Message = ' + error);get 
  
            }, 
  
            success: function(result){         
            var lphoto_500 = result.thepicture[0].PHOTO_500x500; 
            var lphoto_caption = result.thepicture[0].PHOTO_CAPTION; 
            var lphoto_cr = result.thepicture[0].PHOTO_CR; 
  
            editor.insertContent('<div class=""><img src="http://www.example.com/images/' + lphoto_500 + '"' + ' border="0" width="500"></div><div class="photocaption" style="font-size:12px; margin-top:-5px; margin-bottom:10px;">' + lphoto_caption + ' <span style="float:right;"><i class="fa fa-copyright" aria-hidden="true"></i>' + lphoto_cr + ' </span></div>');        
            } 
           }); 
  
         }); //End Document Ready Function...          
  
        } 
       }); 
      } 
  }); 
  

  }）;

這不行！

我所注意到的是， 「$(document).ready(function(){」

和

之間的一切 「}); //End Document Ready Function...」

是沒有得到執行。

它看起來像插件不承認jQuery的...

我缺少的東西？

JackD

Answer 1

我設法使它工作。

jQuery不需要。只有純粹的Ajax。

在插件中「的onsubmit」功能只是看起來是這樣的：

 onsubmit: function(e) { 
      // Insert content when the window form is submitted    
      var xhttp = new XMLHttpRequest(); 
      var lurl = "http://www.example.com/wservices/photos/get_photo_by_phid/" + e.data.photoid; 
      xhttp.onreadystatechange = function() { 
       if (this.readyState == 4 && this.status == 200) { 
         var MPhoto = JSON.parse(this.responseText); 
         var lphoto_800 = MPhoto.thepicture[0].PHOTO_800xyyy; 
         var lphoto_caption = MPhoto.thepicture[0].PHOTO_CAPTION; 
         var lphoto_cr = MPhoto.thepicture[0].PHOTO_CR; 
         editor.insertContent('<div class="cp-thumb"><img src="http://www.example.com/images/' + lphoto_800 + '"' + ' border="0" width="100%"></div><div class="photocaption" style="font-size:12px; margin-top:0px; margin-bottom:10px;">' + lphoto_caption + ' <span style="float:right;"><i class="fa fa-copyright" aria-hidden="true"></i> Photo: ' + lphoto_cr + '</span></div>');        
       } 
       };      
       xhttp.open("GET", lurl, true); 
       xhttp.send();     
     }