Использование jQuery для извлечения контента из iframe CKEditor

Question

Использование jQuery для извлечения контента из iframe CKEditor

У меня есть специально написанная CMS, которая использует CKEditor * (FCKEditor v3) для редактирования контента. Я также использую плагин проверки jQuery, чтобы проверить все поля на наличие ошибок перед отправкой на основе AJAX. Я использую функцию serialize() для передачи данных в бэкэнд PHP.

Проблема заключается в том, что serialize удается правильно захватить все поля, кроме фактического содержимого, набранного в CKEditor. Как и любой другой редактор WYSIWYG, этот также накладывает iframe поверх существующего текстового поля. И serialize игнорирует iframe и просматривает только текстовое поле для содержимого, которое, конечно, не находит, возвращая, таким образом, пустое тело содержимого.

Мой подход к этому состоит в том, чтобы создать ловушку для события onchange CKEditor и одновременно обновить текстовое поле (CKEDITOR.instances.[textboxname].getData() возвращает содержимое) или другое скрытое поле с любыми изменениями, внесенными в редакторе.

Тем не менее, поскольку CKEditor все еще находится на стадии бета-тестирования и остро не хватает документации, я не могу найти подходящий вызов API, который позволил бы мне это сделать.

У кого-нибудь есть идеи, как это сделать?

27

jquery ajax serialization iframe ckeditor

Источник

user112364 29 май '09 в 02:28

12 ответов

Другие вопросы по тегам jquery ajax serialization iframe ckeditor

user128165 05 янв '10 в 16:28 2010-01-05 16:28 · Answer 1 · 2010-01-05 16:28

Еще одним общим решением для этого будет запускать следующее всякий раз, когда вы пытаетесь отправить форму

for ( instance in CKEDITOR.instances )
            CKEDITOR.instances[instance].updateElement();

Это заставит все экземпляры CKEDITOR в форме обновить свои соответствующие поля

36

Источник

user128165 05 янв '10 в 16:28

user218917 25 ноя '09 в 20:23 2009-11-25 20:23 · Answer 2 · 2009-11-25 20:23

Я только что выпустил плагин CKEditor для jQuery, который позаботится обо всем этом в фоновом режиме без дополнительного кода: http://www.fyneworks.com/jquery/CKEditor/

7

Источник

user218917 25 ноя '09 в 20:23

24 сен '09 в 16:17 2009-09-24 16:17 · Answer 3 · 2009-09-24 16:17

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

Этот пример может работать для вас:

CKEDITOR.instances["editor1"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);

 //and paste event
this.document.on("paste", CK_jQ);
});

function CK_jQ()
{

    CKEDITOR.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
}

user43452 29 май '09 в 04:25 2009-05-29 04:25 · Answer 4 · 2009-05-29 04:25

Это должно сделать это...

CKEDITOR.instances["editor1"].document.on('keydown', function(event)
{
    CKEDITOR.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
});

CKEDITOR.instances["editor1"].document.on('paste', function(event)
{
    CKEDITOR.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
});

edit: добавлен раздел для обновления текстового поля после вставки тоже...

user292789 13 мар '10 в 03:27 2010-03-13 03:27 · Answer 5 · 2010-03-13 03:27

У меня был успех с этим:

console.log(CKEDITOR.instances.editor1.getData());

2

Источник

user292789 13 мар '10 в 03:27

user234670 18 дек '09 в 17:36 2009-12-18 17:36 · Answer 6 · 2009-12-18 17:36

Я выбрал немного другой подход и подумал, что было бы лучше использовать функцию обновления ckeditor, а поскольку использовался keyup, тайм-аут не был необходим

CKEDITOR.instances["editor1"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);

 //and paste event
this.document.on("paste", CK_jQ);
}

function CK_jQ()
{
   CKEDITOR.instances.editor1.updateElement(); 
}

user442055 17 фев '11 в 10:34 2011-02-17 10:34 · Answer 7 · 2011-02-17 10:34

У меня сработало событие contentDom, а не instanceReady... Мне бы очень хотелось узнать, что это за события, но я предполагаю, что они являются частными...

var editor = CKEDITOR.replace('editor');

CKEDITOR.instances.editor.on("instanceReady", function(){
    this.on('contentDom', function() {
        this.document.on('keydown', function(event) {
            CKEDITOR.tools.setTimeout( function(){ 
                $(".seldiv").html(CKEDITOR.instances.editor.getData()); 
            }, 1);
        });
    });
    this.on('contentDom', function() {
        this.document.on('paste', function(event) {
            CKEDITOR.tools.setTimeout( function(){ 
                $(".seldiv").html(CKEDITOR.instances.editor.getData()); 
            }, 1);
        });
    });
    edits_clix();
    var td = setTimeout("ebuttons()", 1);
})

user208403 22 июл '11 в 20:08 2011-07-22 20:08 · Answer 8 · 2011-07-22 20:08

CKEDITOR.instances.wc_content1.getData() вернет данные ckeditor
CKEDITOR.instances.wc_content1.setData() установит данные ckeditor

1

Источник

user208403 22 июл '11 в 20:08

user315049 13 апр '10 в 01:33 2010-04-13 01:33 · Answer 9 · 2010-04-13 01:33

Не лучше ли сделать это так:

CKEDITOR.instances.editor1.on('contentDom', function() {
          CKEDITOR.instances.editor1.document.on('keyup', function(event) {/*your instructions*/});
        });

ссылка: http://cksource.com/forums/viewtopic.php?f=11&t=18286

1

Источник

user315049 13 апр '10 в 01:33

user731144 09 ноя '11 в 16:14 2011-11-09 16:14 · Answer 10 · 2011-11-09 16:14

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

Вот что сработало для меня:

$(document).ready(function() {
$('#form').submit(function(){
if ( CKEDITOR.instances.editor1.getData() == '' ){
    alert( 'There is no data available' );//an alert just to check if its working
}else{
    var editor_data = CKEDITOR.instances.editor1.getData();
    $("#editor1").val(editor_data); //at this point i give the value to the textarea
    $.ajax({ 
                    //do your ajax here  

                     });

        }
return false;
    });
 });

user188761 13 ноя '09 в 01:05 2009-11-13 01:05 · Answer 11 · 2009-11-13 01:05

Я пытался всю ночь заставить это работать, но это еще не работает. Не могли бы вы объяснить, где вы разместили этот скрипт?

Я генерирую свою страницу из xquery, поэтому я не могу поместить этот скрипт на страницу, потому что он содержит "{", что прерывает обработку xquery. Помещение скрипта в cdata нарушает работу скрипта. Поэтому я положил на instanceReady слушатель в том же сценарии, который создает редактор и вызывает внешний сценарий для добавления остальных. например:

<script type="text/javascript">
  var editor = CKEDITOR.replace( 'editor1' );
  editor.on("instanceReady", updateInstance() )
</script>

затем updateInstance содержит:

function updateInstance()
{
CKEDITOR.instances["editor1"].document.on('keydown', function(event)
{
    CKEDITOR.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
});

CKEDITOR.instances["editor1"].document.on('paste', function(event)
{
    CKEDITOR.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
});

}

user505675 17 янв '12 в 12:45 2012-01-17 12:45 · Answer 12 · 2012-01-17 12:45

Я решил эту проблему с текущей версией: http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js

После строки 55 this.submit (function (event) { - я добавил этот код:

if (typeof CKEDITOR !== "undefined") {
    for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();
}

0

Источник

user505675 17 янв '12 в 12:45