web-dev-qa-db-ja.com

Ckeditor更新テキストエリア

Ckeditorを動作させようとしています。明らかにテキストエリアを使用しないため、フォームを送信してもエディターでテキストが送信されません。ポリモーフィックな関連付けなどを利用しているため、onsubmit関数を作成してtextareaの値を取得することはできません（フォームが送信されたとき）。

そこで、私はこの質問を見つけました： jQueryを使用してCKEditorのiframeからコンテンツを取得する

いくつかの非常に良い答えがあります。そこに投稿された回答は、テキストエリアを最新の状態に保ちます。それはとても素敵で、まさに私が必要なものです！残念ながら、私はそれを動作させることができません。誰かが（たとえば）これが機能しない理由を知っていますか？

私はテキストエリアを持っています（レールが、通常のテキストエリアに変換するだけです）：
_<%= 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

textareackeditor
37
heldopslippers

あなたはそれを理解しましたか？

CKEditorバージョン3.6.1とjQueryフォーム送信ハンドラーを使用しています。送信時には、textareaは空ですが、これは正しくありません。ただし、すべてのCKEditorテキストエリアにcssクラスckeditorがあると仮定すると、使用できる簡単な回避策があります。

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

送信処理を行う前に上記を実行します。フォーム検証。

54
TJ.

送信する前に：

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

@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();
    });
   });
});
9
Kenny Ong

上記のすべての回答を1つに組み合わせます。

新しい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を追加するだけで、上記の作業は完了です。

9
JohnDel

更新用の関数JavaScriptを追加

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

仕事だ。クール

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

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

T.J.の反応にそれを増やします。そして私のために働いた：

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

追加するだけ

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

ここで、textAreaClientIdはインスタンス名です

よろしく

1
Mhmd

ロード時：

$(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 */);
});
0
Eduardo Cuomo