我试图将JQuery ui Datepicker绑定到CKEditor对话框中的文本字段。我得到的错误是jQuery(…)datepicker();不是对象。这对我来说意味着JQuery ui没有被加载…
?目的只是获得一个绑定到txtDlgReportDate的日期选择器。我可以看到JQuery在需要时被加载,但alert(JQuery .ui)返回'undefined'。
My code is…(为CKEditor工具栏创建一个按钮)
感谢 b='reportSend';
CKEDITOR.plugins.add('reportSend',
{
init: function (editor) {
editor.addCommand('sendReportDialog', new CKEDITOR.dialogCommand('sendReportDialog'));
editor.ui.addButton('reportSend',
{
label: 'Send Report',
command: 'sendReportDialog',
icon: this.path + 'Email16.png'
});
CKEDITOR.dialog.add('sendReportDialog', function (editor) {
return {
title: 'Send Report',
minWidth: 400,
minHeight: 200,
contents:
[
{
id: 'general',
label: 'Settings',
elements:
[
{
type: 'text',
id: 'txtDlgReportDate',
label: 'Report Date:',
labelLayout: 'horizontal',
widths: ['100px', '100px'],
onShow: function (data) {
if (typeof (jQuery) === 'undefined') {
CKEDITOR.scriptLoader.load('//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', function () {
jQuery.noConflict();
});
};
if (typeof (jQuery.ui) === 'undefined') {
CKEDITOR.scriptLoader.load('//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js', function () {
jQuery.noConflict();
});
};
jQuery(this).datepicker();
},
commit: function (data) {
data.txtDlgReportDate = this.getValue();
}
},
{
type: 'select',
id: 'reportType',
label: 'Report Type',
items:
[
['<All>', '-1'],
['...Types', '1']
],
commit: function (data) {
data.reportType = this.getValue();
}
}
]
}
],
onOk: function () {
...send code
});
} // End onOk
}; // end Return
}); // end dialog Def
} // end init
}); // End add plugin
And…问题是,CKEditor不只是添加一个输入标签,但它围绕着一个div和一个表,所以日期picker被添加"内联"到一个div…为了让它以"点击显示"类型的方式工作,我们需要获得隐藏在CK HTML中的输入标签的id,并对其应用.datepicker()函数。
一个可用的版本(虽然它需要更多的修饰)是....
{
type: 'text',
id: 'txtDlgReportDate',
label: 'Report Date:',
onShow: function (data) {
// Set the width of the outer div (otherwise it's affected by the CK CSS classes and is too wide)
jQuery('#' + this.domId).css('width', 230);
// Get the input element
var theInput = jQuery('#' + this.domId).find('input');
// Apply the datepicker to the input control
jQuery(theInput.selector).datepicker({
showButtonPanel: true
});
},