现在问题

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编辑器的实际文件名。
< / LI>

我的新插件如下所示：

tinymce.PluginManager.add（＆＃39; imgc500＆＃39;，function（editor）{ //添加一个打开窗口的按钮 editor.addButton（＆＃39; imgc500＆＃39;，{ 文字：＆＃39; C500＆＃39;， icon：false， onclick：function（）{ // 打开窗户 editor.windowManager.open（{ 标题：＆＃39;请输入照片ID：＆＃39;，身体： [ {type：＆＃39; textbox＆＃39;，name：＆＃39; photoid＆＃39;，label：＆＃39; PHOTO ID＆＃39;}

            ],
            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...                                    

            }
        });
    }
});

}）;

这不起作用！

我注意到的是＆＃34; $(document).ready(function(){＆＃34;之间的所有内容。

和

＆＃34; }); //End Document Ready Function...＆＃34;

没有被执行。

看起来这个插件无法识别jQuery ......

我错过了什么吗？

JackD

Answer 1

我设法让它发挥作用。

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

＆＃34; onsubmit＆＃34;插件中的函数看起来像这样：

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

如何在TinyMCE插件中使用jQuery？

现在问题

1 个答案: