Как использовать tinymce 4 во всплывающем окне, контент которого подгружается динамически (ajax)?

Question

[AlexPal4inskiy]

Суть такова: загружаю ajax-ом контент в нем присутствует textarea на который необходимо повесить редактор tinymce. Так вот, редактор подключается и работает, но при попытке добавить изображение или ссылку или любой элемент где необходимо ввести данные (ширина, высота, заголовок) курсор не фокусируется ни на одном textarea и input, соответственно невозможно даже просмотреть исходный html-код.

Answer 1

[AlexPal4inskiy]

Проблема была в том, что я открывал окно с помощью .modal('show') метода из фреймворка bootstrap. Если кому интересно пишите.

Comments

[7kov]

Такая же проблема. Напишите пожалуйста решение. Какую функцию написали?

[7kov]

Нашел:
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});

Answer 2

[Алексей]

Предположительно z-index - посмотрите в исходном коде какой он у окна редактора (диалога).
Скорее всего достаточно высокий. Поэтому всплывающее окно перекрывается им.

Comments

[AlexPal4inskiy]

В tinymce на всех полях ввода стоит атрибут hidefocus, а сам фокус запускается скриптом по клике. Но вот при загрузке редактора через ajax этого не происходит...

Answer 3

[Matveika]

А можно поподробнее, столкнулась с той же проблемой. Какого решение оказалось?

Comments

[AlexPal4inskiy]

А ты в окне bootstrap'а открываешь редактор?

[Matveika]

AlexPal4inskiy: Да

[Matveika]

В общем вот моя проблема и решение, которое я нашла, но оно мне не подходит

В модальном окне открывается редактор документа, можно в редакторе посмотреть код этого документа и поправить его, но не работает выделение мышкой, с клавиатуры, нельзя соответственно ничего напечатать также (в исходном коде). Было найдено решение на сайте stackoverflow, но после него кнопка закрытия диалогового окна перестает работать, даже если вручную вешать на кнопку событие close (при этом в консоли вылазят такие ошибки:
Cannot read property 'maxZ' of undefined
Cannot read property 'destroy' of undefined
Cannot read property 'maxZ' of undefined

Итак привожу код, после которого начинает работать выделение, но не работает закрытие (я так поняла, у вас другое решение):
tinyMCE.init({
//разные параметры
setup: function(editor) {
editor.on('load', function(e) { //при загрузке редактора исправляем и теперь можно выделять
$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function(event) {
return !!$(event.target).closest(".mce-container").length || this._super( event );
}
});
});
}
});

[AlexPal4inskiy]

У меня проблема пропала после написания своей функции которая подставляет контент в окно и открывает его, с bootstrapom ничего не вышло... Свою функцию написать гораздо быстрее будет.