⚡ Event Handling

ContentBuilder.js provides several built-in event hooks that allow you to respond to user actions and content changes in real time. These events are useful for integrating with external systems or applying custom logic.

🔄 onRender – Triggered When Content Is Updated or Re-rendered

This event is fired whenever the content structure changes — such as when a new snippet is added, a block is moved, or layout changes occur.

Use it to re-apply custom scripts or behaviors after content updates.

Example:

const builder = new ContentBuilder({
    container: '.container',
    onRender: function() {
        console.log('Content structure updated');
    }
});

📝 onChange – Triggered When Content Is Edited

This event fires whenever the actual content is modified — for example, when text is typed, formatted, or deleted.

Useful for auto-saving content.

Example:

const builder = new ContentBuilder({
    container: '.container',
    onChange: function() {
        console.log('Content was edited');
    }
});

🖱️ onContentClick(event) – Triggered When Content Is Clicked

This event is triggered every time a user clicks inside the editable area.

You can use this to detect where the user clicked and apply custom logic accordingly.

const builder = new ContentBuilder({
    container: '.container',
    onContentClick: function(event) {
        console.log('Content clicked', event.target);
    }
});