Question

在查看http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData后，我尝试了一些代替editor1的变体：

var editor_contents = CKEDITOR.instances.editor1.getData();

Chrome的控制台报告它无法读取未定义的属性getData。我已经尝试了引用的行，以及editor0和scratchpad（后者是我提供给CKEDITOR的TEXTAREA的HTML ID）。他们都得到同样的错误。

我应该如何（或应该？）调用getData（）来获取带有HTML ID“scratchpad”的TEXTAREA的内容？我尝试查询jQuery（'＃scratchpad'），但是我从中获得的返回值是用于初始填充#scratchpad的值，并且没有显示后续编辑。

我很想知道如何以编程方式查询CKEDITOR小部件的实时内容。

谢谢，

- 编辑 -

我尝试检查元素，并在此基础上尝试了以下内容：

var editor_contents = jQuery（'td＃cke_contents_scratchpad iframe body.cke_show_borders'）。html（）;

获得未定义的值。我的猜测是Chrome的检查员以一种方便的方式呈现iframe，但不是以jQuery的方式呈现。（这是猜测偏离基础吗？）

Answer 1

听起来你要么使用错误的id调用，要么你想使用jquery，你还没有更新textarea元素。

要修复“我从中获得的返回值是用于初始填充#scratchpad的值，并且未显示后续编辑”，您需要调用updateElement()。有关如何在获取值之前执行此操作的详细信息，请参阅此答案：https://stackoverflow.com/a/9924844/694325

但我也会检查你是否确实设置了正确的id，你的元素是editor1。如果我们看到您的HTML和用于替换编辑器的JavaScript，将会有所帮助。

Answer 2

试

<script>
$(document).ready(function(e) {
    var config = {
        extraPlugins: 'htmlwriter',
        height: 100,
        width: '100%',
        toolbar: [
            ['Source', '-', 'Bold', 'Italic', 'Underline', '-', ],
            ['TextColor', '|', 'Maximize', 'Preview'],
        ]
    };  
    CKEDITOR.replace("mytextareaname", config);

    $("#mybutton").click(function(){
        var editor_contents = CKEDITOR.instances["mytextareaname"].getData();
        alert(editor_contents);

    })
});
</script>
</head>
<body>
<textarea id="mytextareaname" name="mytextareaname"></textarea>
<input type="button" value="Testar Editor" id="mybutton" />

Answer 3

如果您正在document.ready或window.onload上执行getData（）函数，并且编辑器中没有当前内容，那么它当然会返回undefined。

将getData（）调用放在一个函数中，一旦在文本编辑器中输入了一些内容，就可以调用它。这可能是它的样子：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Editor</title>
    <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
    <textarea name="editor1" id="editor1" cols="30" rows="10"></textarea>
    <!-- Button that triggers below function-->
    <button onclick="logEditorData()">Log the Content!</button>
    <script>
        // instantiate the editor
        CKEDITOR.replace('editor1');

        // declare function that you'll call with above button 
        // once you've type some words into the editor
        function logEditorData() {
            var editorData = CKEDITOR.instances.editor1.getData();
            console.log(editorData);
        };

    </script>
</body>
</html>

如何以编程方式查询CKEDITOR内容？

3 个答案: