Как использовать CKEditor в модуле Bootstrap?
Если я использую плагин CKEditor на странице HTML на основе шаблона Bootstrap, он отлично работает, однако, если я вставляю редактор в Bootstrap Modal, как это
Редактор работает, но все элементы управления формы во всплывающих windowsх редактора отключены, если вы попытаетесь добавить ссылку или изображение, например, вы не можете вставить URL-адрес или какое-либо описание, потому что входы отключены.
Любой обходной путь для этой проблемы?
- Система загрузочной сетки Bootstrap с разной высотой
- Настройка шаблона CSS Bootstrap
- Ограничить загрузку-datepicker только в рабочие дни?
- bootstrap 4 размер столбца таблицы
- twitter bootstrap - выпадение нескольких столбцов
Это пример скрипки: http://jsfiddle.net/7zDay/
- Добавить глиффит Bootstrap в поле ввода
- Угловая ng-repeat добавляет бутстрап-строку каждые 3 или 4 столбца
- Прокручиваемое меню с помощью Bootstrap - меню, расширяющее контейнер, если оно не должно
- Разная длительность слайда для каждого элемента на бутстрапе 3.1 карусели
- bootstrap-typeahead.js добавляет слушателя на событие select
- Жидкость или система с фиксированной сеткой, в гибком дизайне, основанная на Twitter Bootstrap
- Отзывчивый веб-сайт уменьшен до полной ширины на мобильном телефоне
- Избегайте модального увольнения с клавиатуры
Это должно помочь 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 редактора и всплывающих окон .