Ckeditor update textarea

Я пытаюсь заставить ckeditor работать. Очевидно, что он не использует текстовое поле, поэтому отправьте форму, которая не отправляет текст в редакторе. Если я использую полиморфные ассоциации и т.д., Я не могу сделать функцию onsubmit, чтобы получить значение textarea (при отправке формы).

Итак, я нашел этот вопрос: Использование jQuery для захвата содержимого из iframe CKEditor

с некоторыми очень хорошими ответами. Ответы, размещенные там, сохраняют актуальность текстовой области. Это очень приятно и просто то, что мне нужно! К сожалению, я не могу заставить его работать. Кто-нибудь знает, почему (например) это не работает?

У меня есть textarea (рельсы, но он просто переводится в обычную текстовую область):
<%= f.text_area :body, :id => 'ckeditor', :rows => 3 %>

И следующие js:

if(CKEDITOR.instances.ckeditor ) {
  CKEDITOR.remove(CKEDITOR.instances.ckeditor);
}
CKEDITOR.replace( 'ckeditor',
{
skin : 'kama',
toolbar :[['Styles', 'Format', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', 'Link']]});


CKEDITOR.instances["ckeditor"].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.ckeditor.updateElement(); 
}

Я получаю следующую "ошибку" в моем firebug.
missing ) after argument list [Break on this error] function CK_jQ()\n

Ответ 1

Вы поняли это?

Я использую CKEditor версии 3.6.1 с обработчиком представления формы jQuery. На submit textarea пусто, что для меня неверно. Однако есть простой способ обхода, который вы можете использовать, предполагая, что все ваши текстовые поля CKEditor имеют класс cceditor css.

$('textarea.ckeditor').each(function () {
   var $textarea = $(this);
   $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
});

Выполните вышеуказанное, прежде чем выполнять обработку отправки, т.е. проверка формы.

Ответ 2

Перед подачей do:

for(var instanceName in CKEDITOR.instances)
    CKEDITOR.instances[instanceName].updateElement();

Ответ 3

Сочетание всех вышеперечисленных ответов в одном.

Создайте новый файл custom.js и добавьте следующее:

CKEDITOR.on('instanceReady', function(){
  $.each( CKEDITOR.instances, function(instance) {

    CKEDITOR.instances[instance].on("instanceReady", function() {
      this.document.on("keyup", CK_jQ);
      this.document.on("paste", CK_jQ);
      this.document.on("keypress", CK_jQ);
      this.document.on("blur", CK_jQ);
      this.document.on("change", CK_jQ);
    });
  });

});

function CK_jQ() {
  for ( var instance in CKEDITOR.instances ) { CKEDITOR.instances[instance].updateElement(); }
}

Вам не нужно беспокоиться о имени текстовой области, просто добавьте класс ckeditor в текстовое поле, выше и вы закончите.

Ответ 4

Спасибо @JohnDel за информацию, и я использую onchange, чтобы обновить каждое изменение.

CKEDITOR.on('instanceReady', function(){
   $.each( CKEDITOR.instances, function(instance) {
    CKEDITOR.instances[instance].on("change", function(e) {
        for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();
    });
   });
});

Ответ 5

Функция ADD JavaScript для обновления

function CKupdate() {
  for (instance in CKEDITOR.instances)
    CKEDITOR.instances[instance].updateElement();
}

Это работает. Круто

Ответ 6

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

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

Ответ 7

Просто добавьте

CKEDITOR.instances.textAreaClientId.on('blur', function(){CKEDITOR.instances. textAreaClientId.updateElement();});

где textAreaClientId - ваше имя экземпляра

Привет

Ответ 8

Я просто увеличиваю это до ответа Т.Дж. и работал на меня:

$("form").on("submit", function(e){
    $('textarea.ckeditor').each(function () {
       var $textarea = $(this);
       $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
    });
});

Ответ 9

На нагрузке:

$(function () {
  setTimeout(function () {
    function CK_jQ(instance) {
      return function () {
        CKEDITOR.instances[instance].updateElement();
      };
    }

    $.each(CKEDITOR.instances, function (instance) {
      CKEDITOR.instances[instance].on("keyup", CK_jQ(instance));
      CKEDITOR.instances[instance].on("paste", CK_jQ(instance));
      CKEDITOR.instances[instance].on("keypress", CK_jQ(instance));
      CKEDITOR.instances[instance].on("blur", CK_jQ(instance));
      CKEDITOR.instances[instance].on("change", CK_jQ(instance));
    });
  }, 0 /* 0 => To run after all */);
});

Ответ 10

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

У меня был

<textarea class="ckeditor" rows="6" name="Cms[description]"></textarea>

изменено на

<textarea class="ckedit" rows="6" name="Cms[description]"></textarea>

Я изменил значение атрибута класса на что-либо, отличное от ckeditor, и ошибка стрелы исчезла.

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