我在TinyMCE 4.3.12中创建了一个插件。如何在TinyMCE插件中使用jQuery?
该插件将一个按钮添加到工具栏。
当你点击按钮,一个小的弹出打开并询问提供的图像文件名(例如: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: © ' + 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
我设法使它工作。 – JackD9
jQuery不需要。正如预期的那样,只有纯Ajax并且工作正常。 – JackD9