Плагин CKEditor: текстовые поля недоступны для редактирования

Я создаю плагин CKEditor, используя версию 4.2.1. Я пытаюсь выполнить учебник по Simple Plugin. Тем не менее, текстовые входы в моем диалоговом окне не редактируются и не изменяются в диалоговом окне, даже когда я просто копирую во весь плагин abbr из учебника без изменений.

Я все еще могу щелкнуть вкладки диалога, кнопки ОК/Отмена и перетащить диалог. Я добавил в другие элементы (например, выбирает) диалог в моей пользовательской версии, и я могу взаимодействовать с ними.

Когда я проверяю элементы ввода текста в инструментах Chrome Dev, я могу добавить текст через консоль /jQuery, и он появится. Я не получаю никаких сбоев в консоли.

$('#cke_229_textInput').val('help');

Добавит текст в текстовый ввод и отобразит его на экране. Но я не могу взаимодействовать с элементом с помощью мыши/клавиатуры/браузера. Есть ли что-то очевидное в конфигурации CKEditor, которую я пропускаю? Извините, если это действительно глупый вопрос - первый раз работает с CKEditor. Я также искал форумы CKEditor и Google, не обнаружив никаких связанных проблем.

Это происходит как в Chrome 30, так и в FF 24.

Мой вызов для создания редактора:

var me = document.getElementById('resource_editor_raw');
editor = CKEDITOR.replace(me, {
    fullPage: true,
    removePlugins: 'newpage,forms,templates',
    extraPlugins: 'abbr',
    allowedContent: true
});

Спасибо за советы и подсказки!

Обновление # 1

Thinking это может быть связано, я также попытался установить значение z-индекса текстового элемента очень высоким, используя Chrome Dev Tools. Не повезло, оно все еще не редактируется/выделяется...

Обновление # 2

Кажется, это этот конфликт с пользовательским интерфейсом jQuery. Предлагаемое исправление еще не работает для меня, но будет мешать... оставляя это для всех, кто может наткнуться на него.

Окончательное обновление

Так помог мне совет Брайана. Как модальный фон Bootbox (то, что я использую для создания исходного диалога), так и диалоговое окно CKEditor имеют tabindex = -1, поэтому они каким-то образом конфликтуют. Ручное отключение фона Bootbox (т.е. Установка tabindex = ') работает с инструментами Chrome dev, поэтому я думаю, что я могу что-то взломать с помощью jQuery или еще чего-то. Удивительные вещи... спасибо за помощь!! Не уверен, почему я получил эту работу в jsFiddle... если я правильно помню, у меня, возможно, не было заднего фона для этих диалогов.

Кроме того, для справки, tabindex -1 делает вещи untavable, что имеет смысл для фона.

Ответ 1

Модальный атрибут html tabindex='-1' является тем, что, по-видимому, вызывает проблемы для меня.

tabindex='-1' на самом деле находится в документации по начальной загрузке и по какой-то причине необходимо знать, что я не знаю.

Ответ 2

Используйте 100% -ную работу script..

<script type="text/javascript">
    // Include this file AFTER both jQuery and bootstrap are loaded.
    $.fn.modal.Constructor.prototype.enforceFocus = function() {
      modal_this = this
      $(document).on('focusin.modal', function (e) {
        if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length 
        && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') 
        && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
        && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
          modal_this.$element.focus()
        }
      })
    };
</script>

Примечание.. Включите этот файл после загрузки jQuery и загрузочного файла.

Ответ 3

OMG Я работаю в Интернете в течение нескольких часов и, наконец, люблю какой-то код, который работает!

Вставьте это на свою страницу диалога, в которой будет cceditor:

orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
   if ($(event.target).closest('.cke_dialog').length) {
      return true;
   }
   return orig_allowInteraction.apply(this, arguments);
};

Я нашел исправление здесь: https://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog

Ответ 4

Не уверен, что кто-то еще имеет эту проблему сейчас. Я рвал на себе волосы, пытаясь взломать. Это было довольно простое решение после поиска и поиска в Интернете. Это исправление помогло мне. Просто поместите его на ту же страницу, где вы хотите разместить свой редактор - при загрузке из jQuery. Проблема заключается в конфликте tabindex, поэтому я просто удалил этот атрибут из модального.

<script>
$(function(){ 
       // APPLY THE EDITOR TO THE TEXTAREA
       $(".wysiwyg").ckeditor();

       // FIXING THE MODAL/CKEDITOR ISSUE
       $(".modal").removeAttr("tabindex");
});
</script>

Ответ 5

Я попытался загрузить изображения на сервер из CK Editor [без CKFinder] и на положительную сторону, которую я могу сделать. всякий раз, когда мы пытаемся создать какой-то диалог, они создают один div "на лету", который будет удерживать ваше диалоговое окно. Лучше вы проверяете свойство CSS для своего текстового поля, используя хром, и меняйте его. Надеюсь, что это поможет вам.