CODEWITHSUNDEEP
javascriptjquerydrupaldrupal-7wysiwyg
Kevin
Kevin

Reputation: 13226

Detecting and manipulating CKEditor areas

I need to write a javascript function that can look at the WYSIWYG on the page (CKEditor) that is rendered after the page loads with the Drupal WYSIWYG module. I am having difficulty using jQuery even finding the editor.

$(textarea#textarea-id).change or .keyup do nothing.

I can do this:

console.log(CKEDITOR.instances);

That at least shows me the instance where CKEditor is attaching itself to. I can't seem to reference anything after that:

CKEDITOR.instances.myinstance-name or CKEDITOR.instances[0] both return undefined.

I've gone in circles for 2 hours now and not sure what else to try.

All I want to do is when the user is typing (keyup), count the characters input. If the input is greater than a certain length, I want to force a line break right in the text.

How can I go about implementing this? I thought it would be fairly straightforward.

Using other examples I have seen:

for (var i in CKEDITOR.instances) {
  CKEDITOR.instances[i].on('change', function() {alert('test 1 2 3')});
}

Resulted in no alert.

The editor is being loaded/displayed in an iframe (via CKEditor/WYSIWYG in Drupal).

Upvotes: 0

Views: 731

Answers (1)

Clive
Clive

Reputation: 36955

There's a plugin available that provides an onChange event for CKEditor, you can find it (along with instructions) here.

It suggests using code like this:

editor.on( 'saveSnapshot', function(e) { somethingChanged(); });

Upvotes: 1

Related Questions