0

私は自分のページで jquery アダプターと ckeditor を使用して php プログラミングを行っています。私が持っているものを見せてください。私が取り組んでいるページはindex.phpです

jquery アダプター:

    function sendid(id)
     {
    jQuery('#mydiv').showLoading();
    $.ajax({
        type: "POST",
        url: "",
        data: id,
        error: function(){

          alert('error');
      },
      success: function(data){
        jQuery('#mydiv').hideLoading();
            $('#mydiv').html(data);
  }
  });
}
}

この関数は、id を index.php に送信します。この ID を使用して、データベースを取得し、いくつかのレコードを取得しています。取得したレコードを使用して、次のように ckeditor を介して表示しています。

          <?php
            $ckeditor = new CKEditor();
            $ckeditor->basePath  = 'ckeditor/' ;
            CKFinder::SetupCKEditor( $ckeditor, 'ckfinder/' ) ;
            $config['height'] = '300';
            $initialValue = $queryresult['content'];
            $ckeditor->editor('FCKeditor1', $initialValue, $config);
        ?>

sendid() 関数を呼び出すボタンをクリックすると、id のリストの上に ckeditor が表示されます。sendid() 関数を初めて呼び出すと、正常に動作し、レコードが ckeditor に入れられます。ただし、2 回目に sendid() 関数を呼び出すと、ckeditor が消えます。

このリンクでトピックを見つけました：

CKEditor インスタンスは既に存在します

しかし、リンクに記載されているコードをどこに配置するかが非常に難しくなります。私が理解している限り、id を sendid() 関数に送信するためのボタンをクリックするたびに、エディターを強制終了または破棄する必要があります。しかし、破棄または kill ckeditor を sendid() 関数に入れるたびに、機能しませんでした。

これについて私を助けてください。

4

2 に答える 2

2

http://ckeditor.com/downloadから最新のCKEditorをダウンロードしてください。たとえばhttp://localhost/ckeditor_test/（好きな場所で）実行できるように、サーバーで解凍します。

ここで、次のコードを、すべてのエディターファイルが解凍された同じディレクトリ（ckeditor.jsなどckeditor_php5.php）にとして保存しますindex.php。

ウェブサイトを開き、ボタンをクリックしてお楽しみください。このサンプル（実際にはサンドボックス）では、エディターを動的に置き換え、競合を回避するために既存のインスタンスを破棄する方法を理解できます。

<?php if ( $_SERVER[ 'REQUEST_METHOD' ] === 'POST' ): ?>
    <?php
        include( 'ckeditor_php5.php' );

        $ckeditor = new CKEditor();
        $ckeditor->editor( $_POST[ 'id' ], 'This is my initial value!', array(
            'height' => '300'   // Config to be used
        ));
    ?>
<?php else: ?>

    <!DOCTYPE html>
    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    </head>
    <body>
        <div id="mydiv" style="outline: 2px dashed orange; padding: 20px; margin: 0 0 20px;">
            This is where the editor will be loaded.
        </div>
        <button id="load" type="submit">Load the editor via AJAX!</button>
        <script>

            (function( $ ) {
                var id = 'idOfTheEditor';

                $( '#load' ).on( 'click', function() {
                    $.ajax({
                        type: 'POST',
                        url: 'index.php',
                        data: {
                            id: id
                        },
                        error: function(){
                            console.log( 'Error?' );
                        },
                        success: function( data ) {
                            if ( window.CKEDITOR && CKEDITOR.instances[ id ] ) {
                                console.log( 'Desytroying an existing instance!' );
                                CKEDITOR.instances[ id ].destroy();
                            }
                            $( '#mydiv' ).html( data );
                        }
                    });
                });

            })( jQuery );

        </script>
    </body>
    </html>
<?php endif ?>

最終的には、次のようにクロージャーをラップ$( '#mydiv' ).html( data )して、コードが「スローモーション」で動作することを確認できます。setTimeout

setTimeout( function() {
        $( '#mydiv' ).html( data );
}, 1000 );

楽しむ！

于 2012-09-18T12:03:15.833 に答える
1

パッチが機能するには、jQuery コードは次のようになるはずです。

function sendid(id)
     {
    jQuery('#mydiv').showLoading();
    $.ajax({
        type: "POST",
        url: "",
        data: id,
        error: function(){

          alert('error');
      },
      success: function(data){
        jQuery('#mydiv').hideLoading();

        var instance = CKEDITOR.instances['FCKeditor1'];
        if(instance) {
            instance.destroy(true);
        }
        CKEDITOR.replace('FCKeditor1');

        $('#mydiv').html(data);
  }
  });
}
}
于 2012-09-18T08:48:00.190 に答える