Events

ZynText extends an EventEmitter. Use editor.on() and editor.off() to listen for and remove event listeners.

Event Reference

Event	Arguments	Fired When
`content:change`	—	Content is modified by typing, pasting, commands, undo/redo, or `setHTML()`.
`selection:change`	—	The cursor position or text selection changes within the editor.
`image:inserted`	`img: HTMLImageElement`	An image is inserted via upload, paste, or URL prompt.
`theme:change`	—	The `data-bs-theme` attribute on `<html>` changes (light/dark mode toggle).

Examples

Auto-save on content change

let saveTimer;
editor.on('content:change', () => {
  clearTimeout(saveTimer);
  saveTimer = setTimeout(() => {
    fetch('/api/draft', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ content: editor.getHTML() })
    });
  }, 2000);
});

Character count

const counter = document.getElementById('char-count');
editor.on('content:change', () => {
  const text = editor.contentEl.textContent || '';
  counter.textContent = text.length + ' characters';
});

Track inserted images

editor.on('image:inserted', (img) => {
  console.log('Image URL:', img.src);
  console.log('Media ID:', img.dataset.mediaId || 'none');
});

React to dark mode changes

editor.on('theme:change', () => {
  const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
  console.log('Dark mode:', isDark);
});

Update toolbar state on selection

editor.on('selection:change', () => {
  // The toolbar automatically handles active button states,
  // but you can hook into this for custom UI
  const isBold = document.queryCommandState('bold');
  myCustomIndicator.classList.toggle('active', isBold);
});