By Vishal Basumatary in javascript — Mar 24, 2023

jquery add event listener to ckeditor

Adding Event Listeners to CKEditor Using jQuery

If you are working with CKEditor and want to add an event listener, jQuery is an easy and efficient way to do it. In this article, I will explain how to add an event listener to CKEditor using jQuery.

Step 1: Include jQuery

First, you need to include jQuery in your HTML file. You can either download it and include it locally, or include it from a CDN. Here's an example:


<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

Step 2: Initialize CKEditor

Next, you need to initialize CKEditor. Here's an example:


$(document).ready(function() {
    CKEDITOR.replace('editor');
});

In this example, we are replacing the textarea with the ID "editor" with CKEditor.

Step 3: Add Event Listener

Now, we can add an event listener using jQuery. Here's an example:


$(document).ready(function() {
    CKEDITOR.replace('editor');
    
    CKEDITOR.instances.editor.on('change', function() {
        console.log('Editor content changed.');
    });
});

In this example, we are adding a "change" event listener to the CKEditor instance with the ID "editor". When the content of the editor changes, the console will log "Editor content changed."

Multiple Event Listeners

You can add multiple event listeners to CKEditor using jQuery. Here's an example:


$(document).ready(function() {
    CKEDITOR.replace('editor');
    
    CKEDITOR.instances.editor.on('change', function() {
        console.log('Editor content changed.');
    });
    
    CKEDITOR.instances.editor.on('focus', function() {
        console.log('Editor focused.');
    });
});

In this example, we are adding a "change" event listener and a "focus" event listener to the CKEditor instance with the ID "editor". When the content of the editor changes, the console will log "Editor content changed." When the editor is focused, the console will log "Editor focused."

Conclusion

Adding event listeners to CKEditor using jQuery is a simple process. By including jQuery, initializing CKEditor, and adding event listeners, you can easily customize your CKEditor experience.