web-dev-qa-db-ja.com

jQueryを使用してCKEditorのiframeからコンテンツを取得する

コンテンツの編集にCKEditor*（FCKEditor v3）を使用するカスタム作成のCMSがあります。また、jQuery Validationプラグインを使用して、AJAXベースの送信前にすべてのフィールドのエラーをチェックしています。 serialize（）関数を使用して、データをPHPバックエンド。

問題は、serializeがCKEditorに入力された実際のコンテンツを除いて、すべてのフィールドを正しく取得することです。他のすべてのWYSIWYGエディターと同様に、これも既存のテキストボックスの上にiframeをオーバーレイします。そして、serializeはiframeを無視し、コンテンツのテキストボックスのみを調べますが、コンテンツは見つかりません。したがって、空白のコンテンツ本文が返されます。

これに対する私のアプローチは、CKEditorのonchangeイベントにフックを作成し、同時にテキストボックスを更新することです（CKEDITOR.instances.[textboxname].getData()はコンテンツを返します）、またはエディターで行われた変更を含むその他の非表示フィールド。

ただし、CKEditorはまだベータ段階であり、ドキュメントが大幅に不足しているため、これを可能にする適切なAPI呼び出しを見つけることができません。

これをどうやってやるかについて誰かが何か考えを持っていますか？

jqueryajaxserializationiframeckeditor
25
miCRoSCoPiC_eaRthLinG

これに対する別の一般的な解決策は、フォームを送信しようとするたびに以下を実行することです

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

これにより、フォーム内のすべてのCKEDITORインスタンスがそれぞれのフィールドを強制的に更新します

35
Gabriele Petrioli

私はjQuery用のCKEditorプラグインをリリースしました。追加のコードなしでこのすべてをバックグラウンドで処理します。 http://www.fyneworks.com/jquery/CKEditor/

7
Diego A.

私もこの問題を修正しようとしています。上記のコードが機能しないのは、ドキュメントプロパティが参照されているときは、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);
}
6
Seb Woolford

これでうまくいくはずです...

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

編集：貼り付けた後もテキストボックスを更新するセクションを追加しました...

3
Stobor

私はこれで成功しました：

console.log(CKEDITOR.instances.editor1.getData());
2
a.m.

CKEDITOR.instances.wc_content1.getData()はckeditorデータを返します
CKEDITOR.instances.wc_content1.setData()は、ckeditorデータを設定します

1
Mahesh

これだけを行う方がいいでしょう：

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

ref： http://cksource.com/forums/viewtopic.php?f=11&t=18286

1
netfed

私は少し異なるアプローチをとりましたが、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(); 
}
1
mcgrailm

ContentDomイベントは、instanceReadyではなく、私のために機能しました...私は本当にイベントaeが何であるか知りたいですが、私はそれらが独占的であると思います...

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);
})
1
GoodNews

ユーザーがシリアル化について質問していたと思います。フォームをシリアル化して送信するのに苦労していましたが、多くの問題を抱えていました。

これは私のために働いたものです：

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

私は現在のバージョンでこの問題を解決しました： http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js

55行目以降this.submit（function（event）{-iにこのコードを追加しました：

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