Как использовать jQuery в плагине TinyMCE?

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 ФОТОГРАФИИ:', тело: [ { type: 'textbox', name: 'photoid', label: '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 не требуется. Только чистый Аякс.

«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();     
     }