Geek Answers Handbook

Using ckeditor "key" CKEDITOR.instances.editor.on ("key", function (e) {

I understand that there are questions about how to implement an event handler for CKEDITOR 4. I can use this code to get data from the keyboard, but I can not get the data after pressing the keys:

CKEDITOR.instances.editor.on('key', function (e){ document.getElementById("preview").innerHTML = CKEDITOR.instances.editor.getData(); });

Therefore, when I enter a string like "aaa" in the text editor field, the first character is never selected. Therefore, my div id = "preview" will only show "aa". I iterated over the e-object, which is rather complicated, but nothing helps me, as it is useful.

I also do not see other people writing about it. CKEDITOR does not seem to have a “keyup”, although I can see that it is written a lot. Should "keyup" be in older versions?

I hope that I have clearly stated my problem.

+3
source share
5 answers

It works:

 CKEDITOR.instances['editor'].on('contentDom', function() { CKEDITOR.instances['editor'].document.on('keyup', function(event) { document.getElementById("preview").innerHTML = CKEDITOR.instances.editor.getData(); }); });

I will wait a bit before checking as an answer if others would like to contribute.

+6
source

I think you can use the onChange plugin: http://ckeditor.com/addon/onchange

 ... on: { change: function(event) { // your code } } ...
+1
source

This is the correct way:

 editor.on( 'contentDom', function() { editor.editable().attachListener( 'keyup', editor.document, function( evt ) { // ... } ); } );

There are some rules regarding listening for DOM events. Cm:

Also, I would prefer not to call editor.getData() on each keyboard. This method is not very easy - it does much more than just reading .innerHTML . Thus, you should think about periodic updates (when the editor is focused) or the onchange plugin .

+1
source

his work is for me

 CKEDITOR.on('instanceCreated', function(e) { e.editor.on('contentDom', function() { var editable = e.editor.editable(); editable.attachListener(editable, 'keyup', function() { var content = editable.getData() //your content }); }); });
0
source

For me it did not work because keyup was not running. I have compiled this answer here with a suggestion to use setTimeout here . And now it works for me. In addition, I use a key event in the source view and modify the event in the WYSIWYG view. I ignore CTL and CMD (1114203, 1114129) to be able to correctly recognize c & p in the source code representation. 200 ms seems sufficient for my case.

  CKEDITOR.instances.editor.on('key', function (e) { if ([1114203, 1114129].indexOf(e.data.keyCode) === -1) { setTimeout(() => { let data = CKEDITOR.instances.editor.getData() // do something with data }, 200) } }.bind(this)) CKEDITOR.instances.editor.on('change', function () { let data = CKEDITOR.instances.editor.getData() // do something with data }.bind(this))
0
source

More articles:


All Articles