Ckeditor обновление текстовой области

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

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

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

У меня есть текстовая область (рельсы, но она просто переводится в обычную текстовую область):
<%= 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

Источник

11 ответов

Решение

Ты понял это?

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

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

Выполните вышеперечисленное перед обработкой отправки, т.е. проверка формы.

Источник

Перед отправкой сделайте:

for(var instanceName in CKEDITOR.instances)
    CKEDITOR.instances[instanceName].updateElement();
Источник

Спасибо @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();
    });
   });
});
Источник

Объединение всех вышеперечисленных ответов в один.

Создайте новый файл 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 в текстовой области, выше, и вы сделали.

Источник

ДОБАВЬТЕ функцию JavaScript для обновления

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

Это работает. здорово

Источник

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

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

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

С уважением

Источник

Я просто увеличил это до ответа TJ и работал на меня:

$("form").on("submit", function(e){
    $('textarea.ckeditor').each(function () {
       var $textarea = $(this);
       $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
    });
});
Источник 
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 () {
  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 */);
});
Источник

В последних версиях CKEditor произошли некоторые изменения API, поэтому вот ответ для CKEditor 5:

      let ckeditor;

// Create a CKEditor, and store its handle someplace that you may
// access later. In this example, we'll use the `ckeditor` variable:
ClassicEditor
  .create(document.querySelector("textarea"), {})
  .then(editor => { ckeditor = editor; });

// When your form submits, use the `updateSourceElement` method
// on the editor's handle:
document.querySelector("form").addEventListener("submit", function() {
  ckeditor.updateSourceElement();
});

Насколько мне известно, CKEditor делает это автоматически, когда вы отправляете форму, поэтому этот конкретный пример на самом деле ничего не должен делать. Но это полезно, когда вам нужно обновить содержимое текстовой области без отправки формы, которая его содержит.

Источник

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

У меня есть

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

изменился на

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

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

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

Источник
Другие вопросы по тегам