用于多编辑器的 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 加载时它必须是true（CKEditor 会寻找可编辑的元素）。如果您检查控制台，您就会知道正在抛出错误。
3. 还有另一个问题 - periodicFox 变量将在两个编辑器实例之间共享，这将导致一段时间后只有第二个实例会更新，但频率会增加两倍。用闭包包装初始化每个编辑器的代码。
4. 发送两个单独的 AJAX 请求来保存两个编辑器的内容是个坏主意。您可以添加一个循环检查两个实例并在一个请求中发送它们。
5. 您的代码的其余部分似乎可以工作，但...请查看您的示例页面。

Answer 3

这是用于多 CKEditor 的 pediodic 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);
    };
})();