Live Examples
Interactive demos showing ZynText in action. Each example includes the initialization code.
Minimal Toolbar
A lightweight editor for comments or short text fields.
new ZynText(document.getElementById('ex-minimal'), {
toolbar: 'minimal',
height: 150,
placeholder: 'Write a comment...'
});
Standard Toolbar (Default)
The default preset for general content editing.
new ZynText(document.getElementById('ex-standard'), {
toolbar: 'standard',
height: 300
});
Full Toolbar
Everything included: alignment, tables, fullscreen, and source view.
new ZynText(document.getElementById('ex-full'), {
toolbar: 'full',
height: 350
});
Multiple Languages
Switch between languages by changing the lang option. Click a button to create a new editor in that language.
function switchLang(lang) {
if (window._langEditor) window._langEditor.destroy();
window._langEditor = new ZynText(
document.getElementById('ex-lang'),
{ toolbar: 'full', height: 250, lang: lang }
);
}
SVG Icon Provider
Uses inline SVG icons instead of Bootstrap Icons CSS. No external icon stylesheet needed.
new ZynText(document.getElementById('ex-svg'), {
toolbar: 'standard',
height: 200,
iconProvider: 'svg'
});
Get & Set HTML
Interact with the editor programmatically using getHTML() and setHTML().
(click "Get HTML" to see output here)
const editor = new ZynText(document.getElementById('ex-api'), {
toolbar: 'standard', height: 200
});
// Get the portable HTML output
const html = editor.getHTML();
// Replace the content
editor.setHTML('<h2>New Content</h2><p>Set programmatically.</p>');
Events: Character Counter
Listen to content:change to build a live character counter.
0 characters
const editor = new ZynText(document.getElementById('ex-events'), {
toolbar: 'minimal', height: 120
});
const counter = document.getElementById('char-counter');
editor.on('content:change', () => {
const len = editor.contentEl.textContent.length;
counter.textContent = len + ' characters';
});
Custom Translations
Register a new language at runtime with ZynText.addTranslations().
// Register a fun "pirate" language
ZynText.addTranslations('pirate', {
bold: 'Mighty',
italic: 'Slanted',
underline: 'Plank',
link: 'Anchor',
bulletList: 'Cannonballs',
orderedList: 'Treasure Map',
undo: 'Retreat!',
redo: 'Charge!'
});
new ZynText(document.getElementById('ex-custom-lang'), {
toolbar: 'minimal',
height: 120,
lang: 'pirate'
});