0

私はckEditorのインライン編集機能とjQueryのAjax（oleqから学んだ）を使用して、私が抱えている問題を説明しています。エディターが 1 つしかない場合は問題なく動作します。テキストはファイルから読み取られ、定期的な ajax 関数によってテキストがファイルに書き戻されます。次のコードはそれを示しています。

<?php
if (!is_file('textFile.txt')) {
    file_put_contents('textFile.txt', 'This is the contents of file textFile.txt');
}

if (count($_POST)) {
    //retrieve data from POST write to the file
    if (isset($_POST['textFile'])) {
        file_put_contents('textFile.txt', $_POST['textFile']);
    }
    exit;
}
?> 

<script type="text/javascript" src="./css/jQuery.js"></script>          
<script src="./ckeditor/ckeditor.js"></script> 
<script>
    // The "instanceCreated" event is fired for every editor
    CKEDITOR.on('instanceCreated', function(event) {
        var editor = event.editor,
            element = editor.element;
    });
</script>
<div id="container">
    <p id="text" contenteditable="true">
        <?php echo file_get_contents('textFile.txt'); ?>
    </p>
    <script>
        CKEDITOR.disableAutoInline = true;
        var editor = CKEDITOR.inline('text', { on: {
            instanceReady: function() {
                periodicText();
            }
        }});
        CKEDITOR.disableAutoInline = false;

        var periodicText = (function() {
            var data, oldData;
            return function() {
                if ((data = editor.getData()) !== oldData) {
                    oldData = data;
                    console.log(data);
                    $.post("help.php", { 
                            textFile:data
                        }
                    );
                }
                setTimeout(periodicText, 1000);
            };
        })();
    </script>
</div>

この 2 番目のスクリプトは、2 人の編集者のために作成しましたが、機能しません。私が間違ったことを教えてくれてありがとう。:)

<?php
    if (!is_file('textFile.txt')) {
        file_put_contents('textFile.txt', 'This is the contents of file textFile.txt');
    }
    if (!is_file('foxFile.txt')) {
        file_put_contents('foxFile.txt', 'The quick brown fox jumps over the lazy dog.');
    }

    if (count($_POST)) {
        //retrieve data from POST write to the file
        if (isset($_POST['textFile'])) {
            file_put_contents('textFile.txt', $_POST['textFile']);
        }
        if (isset($_POST['foxFile'])) {
            file_put_contents('foxFile.txt', $_POST['foxFile']);
        }
        exit;
    }
?> 

<script type="text/javascript" src="./jQuery/jQuery.js"></script>          
<script src="./ckeditor/ckeditor.js"></script> 
<script>
    // The "instanceCreated" event is fired for every editor
    CKEDITOR.on('instanceCreated', function(event) {
        var editor = event.editor,
            element = editor.element;
    });
</script>
<div id="container">
    <p id="text" contenteditable="true">
        <?php echo file_get_contents('textFile.txt'); ?>
    </p>
    <script>
        CKEDITOR.disableAutoInline = true;
        var editor = CKEDITOR.inline('text', { on: {
            instanceReady: function() {
                periodicText();
            }
        }});
        CKEDITOR.disableAutoInline = false; 

        var periodicText = (function() {
            var data, oldData;
            return function() {
                if ((data = editor.getData()) !== oldData) {
                    oldData = data;
                    console.log(data);
                    $.post("bar.php", { 
                            textFile:data
                        }
                    );
                }
                setTimeout(periodicText, 1000);
            };
        })();
    </script>
    <br><br><br><br>
    <p id="text" contenteditable="true">
        <?php echo file_get_contents('foxFile.txt'); ?>
    </p>
    <script>
        CKEDITOR.disableAutoInline = true;
        var editor = CKEDITOR.inline('text', { on: {
            instanceReady: function() {
                periodicFox();
            }
        }});
        CKEDITOR.disableAutoInline = false; 

        var periodicFox = (function() {
            var data, oldData;
            return function() {
                if ((data = editor.getData()) !== oldData) {
                    oldData = data;
                    console.log(data);
                    $.post("bar.php", { 
                            foxFile:data
                        }
                    );
                }
                setTimeout(periodicFox, 1000);
            };
        })();
    </script>   
</div>
4

3 に答える 3

0
  1. HTML が正しくありません。DTD はありませんtitle。少なくともこれを追加する必要があります。そうしないと、ブラウザ/CKEditor が期待どおりに機能しない可能性があります。
  2. DOM の読み込み時でなければならないため、切り替えCKEDITOR.disableAutoInlineてtrueそのままにしておく必要がありtrueます (CKEditor は編集可能な要素を探します)。コンソールを確認すると、エラーがスローされていることがわかります。
  3. 次に、別の問題がありperiodicFoxます。変数は 2 つのエディター インスタンス間で共有され、しばらくすると 2 番目のインスタンスのみが更新されますが、2 倍の頻度で更新されます。各エディターを初期化するコードをクロージャーでラップします。
  4. 両方のエディターのコンテンツを保存するために 2 つの別々の AJAX 要求を送信するのは、かなり悪い考えです。両方のインスタンスをチェックし、それらを 1 つの要求で送信する 1 つのループを追加できます。
  5. コードの残りの部分は機能しているようですが、サンプルページを確認してください。
于 2013-05-06T06:01:11.723 に答える