0

我使用 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>
4

3 回答 3

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);
    };
})();
于 2013-05-06T14:12:27.483 回答
0
  1. 您的 HTML 不正确。没有 DTD，不title- 你至少应该添加这个。否则浏览器/CKEditor 可能无法按预期工作。
  2. 您必须切换CKEDITOR.disableAutoInline到true并离开它，因为它必须true在 DOM 加载时进行（CKEditor 查找可编辑元素）。如果您检查控制台，您会知道正在抛出错误。
  3. 然后还有另一个问题 -periodicFox变量将在两个编辑器实例之间共享，这将导致一段时间后只有第二个实例会更新，但频率会增加两倍。用闭包包装初始化每个编辑器的代码。
  4. 发送两个单独的 AJAX 请求来保存两个编辑器的内容是相当糟糕的主意。您可以添加一个循环检查两个实例并在一个请求中发送它们。
  5. 您的代码的其余部分似乎工作，虽然...检查您的示例页面。
于 2013-05-06T06:01:11.723 回答
0

这是用于多 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);
    };
})();
于 2013-06-01T18:41:14.427 回答