CODEWITHSUNDEEP
jqueryckeditor
Micael Florêncio
Micael Florêncio

Reputation: 447

Event for ckeditor content changed

If possible, how can we to the event of ckeditor's content being changed? For instance, there's some text already inserted into the ckeditor's content aka textarea when the page is opened. Afterwards I type something more or delete some of that text. Is there some event that's fired I can get to to change a variable when the text is changed?

I have this for regular textareas:

$("input,textarea").on("input", function () {
    booleanvar= true;
});

Saw a possible solution somewhere that had this:

$('.ckeditor').ckeditorGet().on('key', function (e) {
    //some code
});

Tried it, but didn't work. And yes I know my ckeditor's textarea has "ckeditor" as its class so that's not the reason for it not to work.

So something like those examples I can use to get to some sort of textchanged event of ckeditor?

Upvotes: 29

Views: 58080

Answers (5)

Dave
Dave

Reputation: 3091

It helps me a lot, for onchange of CKEDITOR.

<textarea id="ckeditor_textarea " name="ckeditor_textarea ">Add Yore Data</textarea>

<script type="text/javascript">
var editor = CKEDITOR.replace( 'ckeditor_textarea ', {});
// editor is object of your CKEDITOR
editor.on('change',function(){
    console.log("test");
});
</script>

Upvotes: 13

Rohim Chou
Rohim Chou

Reputation: 1289

Hope this might help someone else who comes across this post like me.. If you are using CKEditor5, could try this:

ClassicEditor.create(document.querySelector('#editor'))
.then(editor => {
    editor.model.document.on('change:data', (evt, data) => {
        console.log(editor.getData());
    });
})
.catch(error => {
    console.error('Editor initialization error.', error);
});

Upvotes: 22

PseudoNinja
PseudoNinja

Reputation: 2856

Simple jQuery event binding for CKEditor4

$.fn.onDataChange = function (func) {
    var func = func || function () { };
    CKEDITOR.instances[$(this).attr('id')].on('change', function () {
        func();
    });
}

Upvotes: 0

G&#246;khan Duman
G&#246;khan Duman

Reputation: 192

If you have a lot of ckeditor (version 4) in one page you could use this code:

CKEDITOR.on('instanceCreated', function(event) {
 var editor = event.editor,
 element = editor.element;
 editor.on('change', function() {
 console.log(element.getId());
 });
 });

Upvotes: 5

Joel Peltonen
Joel Peltonen

Reputation: 13442

Yes, there is the very handy change even that you can listen to. Documentation here: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change

Use it for example like so (change editor1 to your editor instance):

CKEDITOR.instances.editor1.on('change', function() { 
    console.log("TEST");
});

Upvotes: 52

Related Questions