Экземпляр CKEditor в диалоге jQuery

Question

Я использую jQuery, чтобы открыть диалоговое окно с текстовой областью, преобразованной в экземпляр CKEditor. Я использую адаптер jQuery, предоставленный командой CKEditor, но когда открывается диалоговое окно, я не могу взаимодействовать с редактором (он создан, но в пространстве содержимого написано "null", и я не могу ничего щелкнуть или изменить содержимое ).

В этом отчете об ошибке , похоже, говорится, что при использовании патча проблема устранена, но у меня она не работает ...

Вот мой код (возможно, я сделал что-то не так программно):

HTML:

<div id="ad_div" title="Analyse documentaire">
<textarea id="ad_content" name="ad_content"></textarea>
</div>

Мои включения (все включено правильно, но, возможно, проблема с заказом?):

<script type="text/javascript" src="includes/ckeditor/ckeditor.js"></script>
<link rel="stylesheet" type="text/css" href="includes/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="includes/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="includes/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="includes/jquery/plugins/dialog-patch.js"></script>
<script type="text/javascript" src="includes/ckeditor/adapters/jquery.js"></script>

Javascript:

$('#ad_content').ckeditor();

/* snip */

$('#ad_div').dialog(
{
    modal: true,
    resizable: false,
    draggable: false,
    position: ['center','center'],
    width: 600,
    height: 500,
    hide: 'slide',
    show: 'slide',
    closeOnEscape: true,
    autoOpen: false
});

$('.analyse_cell').click(function(){
    $('#ad_div').dialog('open');
});

Редактировать: После некоторого дальнейшего тестирования я заметил, что нажатие на кнопки панели инструментов выдало мне эту ошибку:

Ошибка: this.document.getWindow (). $ Is неопределенный исходный файл: Включает / ckeditor / ckeditor.js Строка: 82

Answer 1

Я использовал функцию обратного вызова с опцией «show:», чтобы отложить создание экземпляра CKEditor до завершения анимации «show». Я обнаружил, что всего за 50 миллисекунд все получится.

modal: true,
show: {
    effect: "drop",
    complete: function() {
        setTimeout(function(){
            $( "#selector" ).ckeditor();
        },50);
    }
},
hide: "drop",

Надеюсь, это поможет.

Answer 2

Используйте последнюю версию CKEditor. Решил это для меня. Версия 3.4.2

Answer 3

$('.analyse_cell').click(function(){
    $('#ad_div').dialog({
        modal: true,
        resizable: false,
        draggable: false,
        position: ['center','center'],
        width: 600,
        height: 500,
        hide: 'slide',
        show: 'slide',
        closeOnEscape: true,
        autoOpen: false,
        open: function(event,ui) {
            $('#ad_content').ckeditor();
        },
        close: function(event,ui) {
            CKEDITOR.remove($("#ad_content").ckeditorGet());
        }
    });
});

Answer 4

Просто добавьте этот фрагмент в документ, и проблема будет решена!

$(document).on('focusin', function(e) {
     e.stopImmediatePropagation();
});

Answer 5

Мистика, но она мне помогла. Перед созданием диалога я принудительно установил пустые данные

CKEDITOR.instances['email_text_of_message'].setData('')

и ckeditor ("ckeditor", "~> 3.4") в диалоге работает нормально.

$("#create_email").click(function(event){

CKEDITOR.instances['email_text_of_message'].setData('')

$("#email_body").dialog({    modal: true,
                             minHeight: 720,
                             minWidth: 900,
                             buttons: [
                            {
                             id: "button_create_email",
                             text: $('#inv_notice16').text(),
                             click: function() {
                                    $("#email_body").dialog('close')
                           }
                            }]}); 
    return false;       
})

Answer 6

Только что решил ту же проблему, отключив эффект пользовательского интерфейса jQuery во всплывающем диалоге (опция показа).

Взял меня, как навсегда, чтобы понять это. Теперь редактор ведет себя как положено.

Answer 7

Я решил эту проблему, просто добавив zIndex = -1 в конструктор диалогового окна пользовательского интерфейса jQuery, например:

$('#modalWindow').dialog({ autoOpen: false, modal: true, zIndex : -1});

Answer 8

Я использую jQuery, чтобы открыть диалоговое окно с текстовой областью, преобразованной в экземпляр CKEditor. Я использую адаптер jQuery, предоставленный командой CKEditor, но когда открывается диалоговое окно, я не могу взаимодействовать с редактором (он создан, но null написано в области содержимого, и я не могу ничего щелкнуть или изменить содержание).

Ошибка: this.document.getWindow (). $ Не определен Исходный файл: includes / ckeditor / ckeditor.js
Линия: 129

Я использую версию 3.6.2

Answer 9

Я столкнулся с той же проблемой и по какой-то причине обнаружил, что размещение некоторого текста в текстовой области перед открытием диалога может помочь.Не настоящее решение, но у меня работает.

$('#ad_content').ckeditor();

/* snip */

$('#ad_div').dialog(
{
    modal: true,
    /* Your options here. */
});

$('.analyse_cell').click(function(){
    // Add some content into textarea.
    $('#ad_content').val("Enter content here.");
    $('#ad_div').dialog('open');
});

Answer 10

По какой-то причине я не смог заставить его работать, но сумел добиться того же эффекта, реализовав ту же функциональность вручную.