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

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

  

Редактор работает, но все элементы управления формы во всплывающих 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"] ], }); 
        

Просто откройте файл /core/config.js в файлах ckeditor, чем измените переменную « baseFloatZIndex »

 baseFloatZIndex = 10000 

в

 baseFloatZIndex = 20000 

Он изменит начало « z-index » вашего windows редактора и всплывающих окон .

  • Рекомендуемый способ включения бутстрап-библиотеки в приложение Ember.JS ember-cli
  • Bootstrap 4 Изменение цвета тумблера гамбургера
  • Как обосновать navbar-nav в Bootstrap 3
  • Select2 не работает, если он встроен в загрузочный модальный
  • icons Bootstrap загружаются локально, но не в Интернете
  • $ (window) .width () не совпадает с запросом медиа
  • Бутстрап с плагином проверки jQuery
  • Загрузочный стол
  • Значение чисел в «col-md-4», «col-xs-1», «col-lg-2» в Bootstrap
  • вам нужно дважды щелкнуть после скрытия показанного ботстрапа
  • Bootstrap 4: Как сделать оставшуюся высоту строки?
  • Interesting Posts

    Windows 7, определяющая местоположение установленной программы

    Загрузчик classов classов для classов в баночках, содержащих банки

    Оператор тильды в C

    VT-x включен, но не работает? Winows 8 не может запускать 64-разрядную виртуальную машину

    java.lang.RuntimeException: Невыполненный исходный код – что может вызвать это?

    Как я основываю правило перспективы на число адресов «Кому:»?

    Выполнение другого приложения с Java

    Что такое простое английское объяснение «Big O»?

    Учет уникальных значений в столбце, а также фильтрация по другим столбцам

    Как отправить SMTP-сообщение с Java?

    Есть ли инструмент Windows для разделителя рабочего стола (обработка одного дисплея в виде двух меньших дисплеев)

    ExpressCache против технологий быстрого хранения Intel и интеллектуальных ответных технологий

    Mockito: Пытаться шпионить за методом вызывает оригинальный метод

    Самый быстрый способ определения IP-адреса моего компьютера (Windows)

    VBS: выберите элемент в последнем активном окне проводника Windows

    Давайте будем гением компьютера.