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

【问题标题】：How do I programmatically query CKEDITOR contents?如何以编程方式查询 CKEDITOR 内容？
【发布时间】：2014-01-15 16:14:08
【问题描述】：

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

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

Chrome 的控制台报告它无法读取未定义的属性 getData。我已经尝试过引用的行，以及 editor0 和暂存器（后者是我提供给 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 平行的方式。（这个猜测是否离谱？）

【问题讨论】：

标签： javascript jquery api ckeditor

【解决方案1】：

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

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

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

【讨论】：

【解决方案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" />

【讨论】：

人力资源管理？这两个在 JavaScript 中是等价的，并且它们适当地给出了相同的错误。
我知道它是等价的。我也无法使用它。我会发送代码。
它可能对你有用。
谢谢；我已经实现了代码，但仍然没有定义：CKEDITOR.replace("scratchpad", config); var editor_contents = CKEDITOR.instances['scratchpad'].getData();

【解决方案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>

【讨论】：