У меня проблема с модальным окном в bootstrap. По умолчанию установлено закрытие при щелчке за пределами контейнера (оно должно оставаться таким). CKEditor вложен в это окно. Все отлично работает, но при добавлении ссылки в текст. В этом случае Ckeditor открывает новое диалоговое окно, а при редактировании этой ссылки CKeditor закрывается. Я знаю причину. Bootstrap не распознает своих дочерних элементов и, следовательно, распознает диалоговое окно щелчка по ссылке, как если бы оно находилось вне CKEeditor.
Есть ли способ изменить это поведение, чтобы диалоговое окно ссылки было обработано как часть CKEditor.
этот код, который представляет ckeditor на основе bootstrap в моем проекте. Заранее приветствую!
(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));