27

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

問題は、CKEditor で入力された実際のコンテンツを除いて、serialize がすべてのフィールドを正しく取得できることです。他のすべての WYSIWYG エディターと同様に、これも既存のテキスト ボックスに iframe を重ねます。また、シリアル化は iframe を無視し、コンテンツのテキスト ボックスのみを調べますが、もちろん、コンテンツは見つからないため、空白のコンテンツ ボディが返されます。

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

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

これについてどうすればよいか誰にも考えがありますか？

4

11 に答える 11

36

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

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

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

于 2010-01-05T16:28:15.043 に答える
7

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

于 2009-11-25T20:23:26.573 に答える
6

今日もこの問題を解決しようとしています。上記のコードが機能しない理由は、ドキュメント プロパティが参照されたときに 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);
}
于 2009-09-24T16:17:07.563 に答える
3

これで済むはず…

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

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

于 2009-05-29T04:25:08.767 に答える
1

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

于 2011-07-22T20:08:09.573 に答える
1

これだけを行う方が良いのではないでしょうか:

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

于 2010-04-13T01:33:25.483 に答える
1

ckeditor の更新機能を使用する方が良いと考えた、少し異なるアプローチを取りました。keyup が使用されていたため、タイムアウトは必要ありませんでした。

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(); 
}
于 2009-12-18T17:36:09.007 に答える
1

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);
})
于 2011-02-17T10:34:46.860 に答える
0

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

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

$(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;
    });
 });
于 2011-11-09T16:14:56.483 に答える
0

現在のバージョンでこの問題を解決しました: 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();
}
于 2012-01-17T12:45:45.067 に答える