How do I programmatically query CKEDITOR contents?

Question

After looking at http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData, I have tried a few variations in place of editor1 in:

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

Chrome's console reports that it cannot read property getData of undefined. I've tried the line as quoted, and editor0 and scratchpad (the latter being the HTML ID of the TEXTAREA I fed to CKEDITOR). They all get the same error.

How should (or should?) I be invoking getData() to obtain the contents of the TEXTAREA with HTML ID 'scratchpad'? I tried querying jQuery('#scratchpad'), but the return value I got from that was the value used to initially populate #scratchpad, and didn't show subsequent editing.

I'd love to know how to programmatically query the live contents of a CKEDITOR widget.

Thanks,

--EDIT--

I tried inspecting the element, and based on that tried the following:

var editor_contents = jQuery('td#cke_contents_scratchpad iframe body.cke_show_borders').html();

Got an undefined value. My guess is that Chrome's inspector presents iframes in a convenient way but not in a way paralleled by jQuery. (Is that guess off-base?)

Community · Accepted Answer · 2017-05-23 12:29:35Z

2

Sounds like you are either calling with the wrong id or if you want to use jquery, you haven't updated the textarea element.

To fix "the return value I got from that was the value used to initially populate #scratchpad, and didn't show subsequent editing" you need to call updateElement(). See this answer for further details on how to do that before getting the value: https://stackoverflow.com/a/9924844/694325

But I would also check if you really have set the correct id and your element is editor1. It would help if we saw both your HTML and the JavaScript you use to replace the editor.

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Jan 16, 2014 at 13:54

Joel Peltonen

13.5k7 gold badges68 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tuyoshi Vinicius · Accepted Answer · 2014-01-15 17:08:51Z

1

try

<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" />

edited Jan 15, 2014 at 17:08

answered Jan 15, 2014 at 16:38

Tuyoshi Vinicius

8618 silver badges22 bronze badges

4 Comments

Christos Hayward Over a year ago

Hrm? Those two are equivalent in JavaScript, and they appropriately give the same error.

Tuyoshi Vinicius Over a year ago

I know it's equivalent. I also could not use that. I'll send the code.

Tuyoshi Vinicius Over a year ago

it may be useful to you.

Christos Hayward Over a year ago

Thank you; I've implemented the code but am still getting undefined with: CKEDITOR.replace("scratchpad", config); var editor_contents = CKEDITOR.instances['scratchpad'].getData();

keepitreal · Accepted Answer · 2014-01-15 22:36:53Z

If you are executing the getData() function on document.ready or window.onload and you have no current content in your editor, then of course it will return undefined.

Put your getData() call within a function that you can call once you've typed some content into your text editor. Here is what it might look like:

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

Collectives™ on Stack Overflow

How do I programmatically query CKEDITOR contents?

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related