Fatal编程技术网
  • jquery/
  • 如何在TinyMCE插件中使用jQuery？

如何在TinyMCE插件中使用jQuery？

jquery plugins tinymce

如何在TinyMCE插件中使用jQuery？,jquery,plugins,tinymce,Jquery,Plugins,Tinymce,我在TinyMCE 4.3.12中创建了一个插件 该插件在工具栏上添加了一个按钮 单击按钮时，会打开一个小弹出窗口，要求提供图像文件名（例如：my_image.jpg） 然后，插件构造图像的完整URL（例如：），并将其插入TinyMCE编辑器。一切正常，插件如下所示： tinymce.PluginManager.add('imgc500', function(editor) { // Add a button that opens a window editor.addButto

我在TinyMCE 4.3.12中创建了一个插件

该插件在工具栏上添加了一个按钮

单击按钮时，会打开一个小弹出窗口，要求提供图像文件名（例如：my_image.jpg）

然后，插件构造图像的完整URL（例如：），并将其插入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 />');
                }
            });
        }
    });
});

        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.PluginManager.add（'imgc500'，函数（编辑器）{
//添加打开窗口的按钮
editor.addButton（'imgc500'{
文本：“C500”，
图标：false，
onclick:function（）{
//开窗
editor.windowManager.open({
标题：“请输入文件名：”，
正文：[
{类型：'textbox'，名称：'file'，标签：'Image'}，
{类型：'textbox'，名称：'caption'，标签：'caption'}，
{类型：'textbox'，名称：'copyr'，标签：'CopyRight'}
],
提交人：函数（e）{
//提交窗口窗体时插入内容
editor.insertContent（“”+e.data.caption+”照片：©“+e.data.copyr+”
）；
}
});
}
});
});
上面的代码运行良好

现在问题来了 我试图做到的是：

  • 我想提供一个照片ID，而不是提供文件名

  • 一旦我点击submit，jQuery Ajax函数将检索PHOTO_ID并向网站提交一个JSON请求，该请求将返回一条JSON消息，其中包含要插入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 />');
                }
            });
        }
    });
});

            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.PluginManager.add（'imgc500'，函数（编辑器）{ //添加打开窗口的按钮 editor.addButton（'imgc500'{ 文本：“C500”， 图标：false， onclick:function（）{ //开窗 editor.windowManager.open({ 标题：“请输入照片ID:”， 正文：[ {类型：'textbox'，名称：'photoid'，标签：'photoid'}

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

            }
        });
    }
});

    ]，
提交人：函数（e）{
//提交窗口窗体时插入内容
变量lData={
照片：e.data.photoid
}
//警报（如数据、照片ID）；
$（文档）.ready（函数（）{
$.ajax({
类型：“POST”，
url:“http://www.example.com/wservices/get_photo_by_phid",
数据：lData，
//数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
错误：函数（xhr，错误）{
警报（'Error！Status='+xhr.Status+'消息='+Error）；获取
},
成功：函数（结果）{
var lphoto_500=结果。图片[0]。照片_500x500；
var lphoto_caption=结果。图片[0]。照片_caption；
var lphoto_cr=结果。图片[0]。照片；
编者.插入内容（''+lphoto_字幕+''+lphoto_cr+''）；
}
});
})；//结束文档准备函数。。。
}
});
}
});
    }))

那不行

我注意到，“
$（document）.ready（function（）{
”之间的所有内容

及

“
}）；//结束文档准备功能…
”

没有被处决

看起来插件无法识别jQuery

我错过什么了吗

杰克

我设法使它工作起来

jQuery是不需要的。只有纯Ajax

插件中的“onsubmit”函数如下所示：

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 />');
                }
            });
        }
    });
});

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

onsubmit:function（e）{
//提交窗口窗体时插入内容
var xhttp=newXMLHttpRequest（）；
var lurl=”http://www.example.com/wservices/photos/get_photo_by_phid/“+e.data.photoid；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var MPhoto=JSON.parse（this.responseText）；
var lphoto_800=MPhoto。图片[0]。照片_800xyy；
var lphoto_caption=MPhoto.thepicture[0]。PHOTO_caption；
var lphoto_cr=MPhoto。图片[0]。照片；
编者.插入内容（''+lphoto_字幕+'照片：'+lphoto_cr+''）；
} 
};                    
xhttp.open（“GET”，lurl，true）；
xhttp.send（）；
}
我设法让它工作了。不需要jQuery。正如预期的那样，只有纯Ajax可以正常工作。