Как использовать CKEditor в модуле Bootstrap?
Если я использую плагин CKEditor на странице HTML на основе шаблона Bootstrap, он отлично работает, однако, если я вставляю редактор в Bootstrap Modal, как это
Редактор работает, но все элементы управления формы во всплывающих windowsх редактора отключены, если вы попытаетесь добавить ссылку или изображение, например, вы не можете вставить URL-адрес или какое-либо описание, потому что входы отключены.
Любой обходной путь для этой проблемы?
- Модифицированный фон загрузочной ленты Twitter не исчезает
- Как включить скрипты, расположенные внутри папки node_modules?
- Удалить границу радиуса из тега Select в бутстрапе 3
- Связывание для свертывания события в Twitter Загрузочный файл 3
- Правильно ли блок внутри ?
Это пример скрипки: http://jsfiddle.net/7zDay/
- Отключить чувствительную навигационную панель в бутстрапе 4
- Как использовать пространство имен для Twitter-бутстрапа, поэтому стили не конфликтуют
- Шрифт Awesome не работает, иконки отображаются как квадраты
- Удаленный модальный модуль Twitter загружает одно и то же содержимое каждый раз
- icons Bootstrap загружаются локально, но не в Интернете
- как полностью уничтожить загрузочное модальное окно?
- загрузочная таблица 3 с фиксированной первой колонкой
- Rails Active Admin css, конфликтующий с Twitter Bootstrap css
Это должно помочь 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 редактора и всплывающих окон .