用于多编辑器的ckEditor和pediodic jQuery Ajax

Question

我使用ckEditor的内联编辑功能和jQuery的Ajax（从oleq中学习）来说明我遇到的问题。如果我只有一个编辑器，它工作正常。从文件中读取文本，然后通过定期将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位编辑写的第二个脚本，它不起作用。在此先感谢您告诉我我做错了什么。 ：）

<?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>

Answer 1

[求助]虽然为了清晰起见我没有把它放在一个循环中，但这个版本有效。

CKEDITOR.disableAutoInline = true;
var editor1 = CKEDITOR.inline('text', { on: {
    instanceReady: function() {
        periodic();
    }
}});
var editor2 = CKEDITOR.inline('fox', { on: {
    instanceReady: function() {
        periodic();
    }
}});

var periodic = (function() {
    var data, oldData;
    return function() {
        if ((data = editor1.getData()) !== oldData) {
            oldData = data;
            console.log(data);
            $.post("bar.php", { 
                    textFile:data
                }
            );
        }
        else if ((data = editor2.getData()) !== oldData) {
            oldData = data;
            console.log(data);
            $.post("bar.php", { 
                    foxFile:data
                }
            );
        }
        setTimeout(periodic, 1000);
    };
})();

Answer 2

1. 你的HTML不正确。没有DTD，没有title - 你应该至少添加它。否则，浏览器/ CKEditor可能无法正常工作。
2. 您必须将CKEDITOR.disableAutoInline切换为true并保留，因为当DOM加载时（CKEditor会查找可编辑元素）它必须为true。如果你检查控制台，你就会知道错误正在被抛出。
3. 然后还有另一个问题 - periodicFox变量将在两个编辑器实例之间共享，这将导致一段时间后只有第二个实例将更新，但是经常会增加两倍。使用闭包来初始化每个编辑器的代码。
4. 发送两个单独的AJAX请求以保存编辑器的内容是一个不错的主意。您可以添加一个循环来检查两个实例并在一个请求中发送它们。
5. 其余代码似乎有效，但请查看您的示例页。

Answer 3

这是针对多个CKEditors的周期性jQuery Ajax的循环版本。

CKEDITOR.disableAutoInline = true;
var editor = [];
var id = ["foo", "bar"];

for (var i=0; i<id.length; i++) {
    editor[i] = CKEDITOR.inline(id[i], { on: {
        instanceReady: function() {
            periodic();
        }
    }});
}

var periodic = (function() {
    var data;
    var oldData = [];
    return function() {
        for (var i=0; i<id.length; i++) {
            if ((data = id[0].getData()) !== oldData[i]) {
                oldData[i] = data;
                $.post("update.php", { 
                    id:id[0],
                    data:data
                });
                break;
            }
        }
        setTimeout(periodic, 1000);
    };
})();