Question

76

ckeditor getData() doesnt seem to work as it should

rated 0 times [ 77] [ 1] / answers: 1 / hits: 17482 / 12 Years ago, thu, december 27, 2012, 12:00:00

First off I'll start off by saying I am new to javascript so hopefully this isn't a complete face palm question. That being said, the following code should alert the value of the editor when the user clicks off of it.

<script type='text/javascript'>

function openEditor(){

html = Hello World;

config = {

startupFocus : true

};

editor = CKEDITOR.appendTo( 'textBox', config, html );





 if (editor) {

    editor.on('blur', function(event) {

        var ckvalue = CKEDITOR.instances.editor.getData();

        alert(ckvalue);

    });

 }

}

</script>

<html>

<a href='#' onclick='openEditor()'>Open Editor</a><br />

<div id='textBox'></div>

</html>

Instead google chrome console reports:

Uncaught TypeError: Cannot call method 'getData' of undefined

Now when I change

var ckvalue = CKEDITOR.instances.editor.getData();

to

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

It works. This baffles me because I never declared a editor1 instance. I was hoping someone with a little more experience could explain to me why editor1 works when editor doesnt.

Here is a working example of what Im talking about: http://jsfiddle.net/s3aDC/6/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hallie

Add To Favorites

Follow

Total Points: 503

Total Questions: 114

Total Answers: 103

Location: Iraq

Member since Fri, Jun 5, 2020

4 Years ago

hallie questions

1 Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

Fri, Jan 28, 22, 00:00, 2 Years ago

1 isSameOrBefore implementation for date-fns

Fri, Jul 9, 21, 00:00, 3 Years ago

1 Module build failed when using mini-css-extract-plugin with postcss-loader for less

Thu, May 27, 21, 00:00, 3 Years ago

1 d3.js in Angular - Property 'event' does not exist on type 'typeof import

Wed, Nov 11, 20, 00:00, 4 Years ago

1 Uncaught SyntaxError: Unexpected token '< ' VueJS PWA

Fri, Mar 27, 20, 00:00, 4 Years ago

View All

answered 12 Years ago jericho · Accepted Answer

editor is a JS variable that points to CKEDITOR.instances.editor1. See that editor === CKEDITOR.instances.editor1 // true.

Moreover, event callback is executed in editor context, so this points to editor:

editor.on('blur', function(event) {

    var ckvalue = this.getData();

    alert(ckvalue);

});

And you can define it when initializing the editor:

var editor = CKEDITOR.appendTo( 'textBox', {

    on: {

        blur: function( event ) {

            console.log( this.getData() );

        }

    }

} );

And you should definitely avoid global variables in your code! ;)