Хобрук: Ваш путь к мастерству в программировании

Использование jQuery для получения содержимого из iframe CKEditor

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

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

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

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

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


  • Я выяснил, насколько захватить контент из iframe: $ ('#cke_contents_body iframe') .contents (). Find ('body') .html () ... ближайший непосредственно адресуемый элемент является td с идентификатор, cke_contents_body. CKEditor оборачивает iframe этим td. 29.05.2009
  • Еще предстоит .. способ автоматического обновления текстового поля данными путем подключения к событию изменения CKEditor. Любые идеи? Кто-нибудь? 29.05.2009
  • Новая версия CKEditor решила эту проблему. 06.07.2011

Ответы:


1

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

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

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

05.01.2010
  • @ J.J. да. это код javascript, который следует запускать в событии submit формы (или в любое время перед ним). 15.02.2012
  • Габи, она же Дж. Петриоли - Спасибо. 15.02.2012

  • 2

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

    25.11.2009
  • Крутая вещь. Спасибо. Это, безусловно, облегчает задачу. 30.11.2009
  • Эта ссылка не работает по состоянию на 14.09.2018 14.09.2018

  • 3

    Я тоже сегодня пытался исправить эту проблему. Я понял, что причина, по которой приведенный выше код не работает для меня, заключается в том, что экземпляр 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);
    }
    
    24.09.2009
  • $ (# editor1) .val (CKEDITOR.instances.editor1.getData ()); Спасибо за работу 16.09.2014

  • 4

    Это должно сработать ...

    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: добавлен раздел для обновления текстового поля после вставок ...

    29.05.2009
  • Спасибо за ответ ... но он продолжает говорить мне: CKEDITOR.instances.editor1.document не определен !! 29.05.2009
  • Кстати, не могли бы вы объяснить, почему вы используете здесь setTimeout, а не просто копируете контент непосредственно при нажатии клавиши? 29.05.2009
  • замените editor1 своим именем текстового поля. SetTimeout должен убедиться, что мы получаем содержимое после добавления нажатой клавиши, а не до этого. 01.06.2009
  • вы имеете в виду клавиатуру? 27.05.2013
  • @spons Оглядываясь назад, да, возможно, было бы лучше. 28.05.2013

  • 5

    Я добился успеха в этом:

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

    6

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

    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(); 
    }
    
    18.12.2009

    7

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

    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

    13.04.2010

    8

    У меня сработало событие 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);
    })
    
    17.02.2011
  • Ваш ответ спас меня после почти 4 часов отладки / переписывания всего. То, что я написал, в основном отлично работало с использованием instanceReady, но оно вообще не работало с AJAXed в контенте. Просто хотел сказать спасибо. 07.09.2012

  • 9

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

    22.07.2011

    10

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

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

    $(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;
        });
     });
    
    09.11.2011

    11

    Я решил эту проблему в текущей версии: 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();
    }
    
    17.01.2012
    Новые материалы

    Я собираюсь научить вас Python шаг за шагом
    Привет, уважаемый энтузиаст Python! 👋 Готовы погрузиться в мир Python? Сегодня я приготовил для вас кое-что интересное, что сделает ваше путешествие более приятным, чем шарик мороженого в..

    Альтернатива шаблону исходящих сообщений для архитектуры микросервисов
    Познакомьтесь с двухэтапным сообщением В этой статье предлагается альтернативный шаблон для папки Исходящие : двухэтапное сообщение. Он основан не на очереди сообщений, а на..

    React on Rails
    Основное приложение Reverb - это всеми любимый монолит Rails. Он отлично обслуживает наш API и уровень просмотра трафика. По мере роста мы добавляли больше интерактивных элементов..

    Что такое гибкие методологии разработки программного обеспечения
    Что представляют собой гибкие методологии разработки программного обеспечения в 2023 году Agile-методологии разработки программного обеспечения заключаются в следующем: И. Введение A...

    Ториго  — революция в игре Го
    Наш следующий вызов против ИИ и для ИИ. Сможет ли он победить людей в обновленной игре Го? Обратите внимание, что в следующей статье AI означает искусственный интеллект, а Goban  —..

    Простое развертывание моделей с помощью Mlflow — Упаковка классификатора обзоров продуктов NLP от HuggingFace
    Как сохранить свои модели машинного обучения в формате с открытым исходным кодом с помощью MLFlow, чтобы позже получить возможность легкого развертывания. Сегодня модели упаковки имеют несколько..

    Математика и интуиция - Часть 1
    У каждой математической формулы есть доказательство. Часто эти доказательства слишком сложно понять, поскольку многие из них основаны на индукции, некоторые - на очень сложных наблюдениях, а..