How to track all content changes in Kendo UI Editor (including delete, backspace, paste, image removal)?

[Manish]

I’m using the kendo UI and need to track all changes made by the user. The scenarios include:

• Removing an image by  backspace or delete.
• Using Backspace or Delete to remove text.
• Selecting text and deleting it by keyboard or mouse like (cut option using right-click context menu.). 
• Copying text from outside and pasting into the editor (via keyboard or mouse).
• Pasting images or text using right-click context menu.

Is there a single common event or the best approach to handle all these cases?
I’ve checked the change event, but it doesn’t seem to fire for all scenarios (e.g., backspace or image removal). Should I use keyup, paste, or a combination of events? Or is there a recommended way to detect any DOM/content change in the editor?

Any guidance or best practices would be appreciated.

[Martin]

Hello, Manish,

To track all user-driven content changes in the Kendo UI Editor—including deleting images/text, cutting, and pasting via keyboard or context menu—there is no single built-in event that covers every scenario in real time. The Editor's change event only fires when the editor loses focus after a change, so it will miss some immediate actions like backspace, delete, and certain mouse-driven changes.

Best Practice: Combine Multiple Event Listeners

To reliably detect all content changes, I recommend combining several event listeners attached to the editor's content area:

• change: Fires when the editor loses focus after a change.
• keyup: Captures keyboard actions (Backspace, Delete, typing).
• paste: Detects paste actions (keyboard or context menu).
• cut: Detects content removal via cut (keyboard or context menu).
• drop: Captures drag-and-drop operations into the editor.

For most use cases, these events together will cover nearly all user changes.

Sample Implementation:

For classic (iframe-based) editors:

$(document).ready(function() {
    var editor = $("#editor").kendoEditor().data("kendoEditor");
    var body = editor.body;

    function onContentChange(e) {
        // Custom logic to handle content changes
        console.log("Content changed:", e.type);
    }

    $(body).on("keyup paste cut drop", onContentChange);
    editor.bind("change", onContentChange);
});

Advanced Option: MutationObserver

If you need even more robust, real-time DOM change tracking (such as detecting all node additions/removals, including image deletion), consider using a MutationObserver on the editor's content area. This API allows you to observe changes to the DOM directly, such as element removal, attribute changes, or text updates.

Example:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // Handle mutation (e.g., image removal)
        console.log("Mutation detected:", mutation);
    });
});
observer.observe(body, { childList: true, subtree: true, characterData: true });

Let me know if the above would be useful.

Regards,

Martin
Progress Telerik