英文:
CKeditor in modal window closes when link dialog window is open
问题
(function ($) {
var MegaEditor = function (options) {
this.init('megaeditor', options, MegaEditor.defaults);
};
$.fn.editableutils.inherit(MegaEditor, $.fn.editabletypes.abstractinput);
$.extend(MegaEditor.prototype, {
render: function () {
MegaEditor.superclass.render.call(this);
//ctrl + enter
this.$input.keydown(function (e) {
if (e.ctrlKey && e.which === 13) {
$(this).closest('form').submit();
}
});
},
value2html: function(value, element) {
$(element).html(value);
},
html2value: function(html) {
return html;
},
input2value: function() {
var wartosc = CKEDITOR.instances[this.$input.get(0).name].getData();
return wartosc;
},
activate: function() {
if(this.$input.is(':visible')) {
$.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length);
if(CKEDITOR.instances[this.$input.get(0).name]) {
CKEDITOR.remove(this.$input.get(0));
}
CKEDITOR.replace( this.options.editorId,
{
//extraPlugins : 'uicolor',
language : 'pl',
uiColor: '#C9E3F2',
scayt_autoStartup: false,
forcePasteAsPlainText: false,
toolbarCanCollapse: false,
toolbar :
[
['Bold','Italic','Underline','Strike','-','Undo','Redo','-','Outdent','Indent'],
['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink'], ['-','Source']
]
} );
this.$input.focus();
}
}
});
MegaEditor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/**
@property tpl
@default '<textarea></textarea>'
**/
tpl:'<textarea id="ckEditor"></textarea>',
/**
@property inputclass
@default input-large
**/
inputclass: 'input-large',
/**
Placeholder attribute of input. Shown when input is empty.
@property placeholder
@type string
@default null
**/
placeholder: null ,
editorId: 'ckEditor'
});
$.fn.editabletypes.megaeditor = MegaEditor;
}(window.jQuery));
英文:
I`ve got a problem with modal window in bootstrap. The default behavior is set to close when clicking outside of a container(it has to stay that way). CKEditor is nested in that window. Everything works great but when adding a link to a text. Ckeditor opens a new dialog window in that case and while editing that link CKeditor closes. I know the reason. Bootstrap doesn't recognize that its children and therefore recognize click on link dialog window as if outside of CKEeditor.
Is there a way to change that behavior, so link dialog window will be treated as a part of CKEditor.
this code that represents ckeditor based on bootstrap in my project. Cheers in advance!
(function ($) {
var MegaEditor = function (options) {
this.init('megaeditor', options, MegaEditor.defaults);
};
$.fn.editableutils.inherit(MegaEditor, $.fn.editabletypes.abstractinput);
$.extend(MegaEditor.prototype, {
render: function () {
MegaEditor.superclass.render.call(this);
//ctrl + enter
this.$input.keydown(function (e) {
if (e.ctrlKey && e.which === 13) {
$(this).closest('form').submit();
}
});
},
value2html: function(value, element) {
$(element).html(value);
},
html2value: function(html) {
return html;
},
input2value: function() {
var wartosc = CKEDITOR.instances[this.$input.get(0).name].getData();
return wartosc;
},
activate: function() {
if(this.$input.is(':visible')) {
$.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length);
if(CKEDITOR.instances[this.$input.get(0).name]) {
CKEDITOR.remove(this.$input.get(0));
}
CKEDITOR.replace( this.options.editorId,
{
//extraPlugins : 'uicolor',
language : 'pl',
uiColor: '#C9E3F2',
scayt_autoStartup: false,
forcePasteAsPlainText: false,
toolbarCanCollapse: false,
toolbar :
[
['Bold','Italic','Underline','Strike','-','Undo','Redo','-','Outdent','Indent'],
['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink'], ['-','Source']
]
} );
this.$input.focus();
}
}
});
MegaEditor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/**
@property tpl
@default <textarea></textarea>
**/
tpl:'<textarea id="ckEditor"></textarea>',
/**
@property inputclass
@default input-large
**/
inputclass: 'input-large',
/**
Placeholder attribute of input. Shown when input is empty.
@property placeholder
@type string
@default null
**/
placeholder: null ,
editorId: 'ckEditor'
});
$.fn.editabletypes.megaeditor = MegaEditor;
}(window.jQuery));
专注分享java语言的经验与见解,让所有开发者获益!
评论