Как использовать CKEditor в модуле Bootstrap?

Если я использую плагин CKEditor на странице HTML на основе шаблона Bootstrap, он отлично работает, однако, если я вставляю редактор в Bootstrap Modal, как это

      Add brand
 
    This is my textarea to be replaced with CKEditor.   CKEDITOR.replace('editor1');

Редактор работает, но все элементы управления формы во всплывающих windowsх редактора отключены, если вы попытаетесь добавить ссылку или изображение, например, вы не можете вставить URL-адрес или какое-либо описание, потому что входы отключены.

Любой обходной путь для этой проблемы?

Это пример скрипки: http://jsfiddle.net/7zDay/

Это должно помочь http://jsfiddle.net/pvkovalev/4PACy/

 $.fn.modal.Constructor.prototype.enforceFocus = function () { var $modalElement = this.$element; $(document).on('focusin.modal', function (e) { var $parent = $(e.target.parentNode); if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length // add whatever conditions you need here: && !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) { $modalElement.focus() } }) };

Обновление октября 2016 года:

Ссылка CDN для CKEditor была изменена, поэтому я обновил jsfiddle

Это уже поздно ответить, но трюк css решит проблему.

По умолчанию z-index Bootstrap modal равен 10051 а z-index по умолчанию для 10051 умолчанию – 10010 . Хитрость заключается только в том, чтобы увеличить z-индекс диалога ckeditor, как показано ниже. введите ниже код в файл css:

 .cke_dialog { z-index: 10055 !important; }

См. Ответ от aaronsnow к этой теме на форуме ckeditor: http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap

Он получил код. Просто поместите код в файл js и убедитесь, что вы включили файл после jquery и bootstrap

Используйте 100% рабочий скрипт.

Благодаря!

  $(document).on({'show.bs.modal': function () { $(this).removeAttr('tabindex'); } }, '.modal');

Я получаю Uncaught TypeError: Cannot read property 'fn' of undefined

Поэтому я просто заменил $ внутри скрипта, предоставленного @Pavel Kovalev выше, на jQuery .

 jQuery.fn.modal.Constructor.prototype.enforceFocus = function () { modal_this = this jQuery(document).on('focusin.modal', function (e) { if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length && !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) { modal_this.$element.focus() } }) };

Не знаю, может быть, в моей версии это уже исправлено, но мое решение:

  $("#messageModal").on('shown.bs.modal', function() { CKEDITOR.replace('message', { height: '400px', width: '100%' }); })

Все очень просто:

 $('#modal').removeAttr('tabindex'); $('#modal').focusout(function(){ $(this).css({'position':'relative'}); }); $('#modal').focusin(function(){ $(this).css({'position':'fixed'}); });

Это очень коротко и просто. импортируйте файлы конфигурации CKEditor Javascript с пути, который они хранят в вашем приложении. Это мое

После этого вы можете вызвать CKEditor, чтобы заменить текстовое поле, сделав это

 CKEDITOR.replace('topic', { uiColor: '#9AB8F3', language: "en-us", toolbar: "Custom", height: "200", width: "400", skin: "moono", toolbar_Custom: [ ["Bold", "Italic", "Underline"], ["NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"], ["Link", "Unlink"] ], });