JavaScript API

Constructor

const editor = new ZynText(textarea, options?);

Parameter	Type	Description
`textarea`	`HTMLTextAreaElement`	Required. The textarea to enhance.
`options`	`object`	Optional. See Configuration.

Instance Methods

`editor.getHTML()`

Returns the editor's content as portable HTML with inline styles. This is the same HTML that is synced to the textarea on form submission.

const html = editor.getHTML();
// '<p style="margin:0 0 0.5rem">Hello <strong>world</strong></p>'

`editor.setHTML(html)`

Replaces the editor's content with the provided HTML string.

editor.setHTML('<h2>New Content</h2><p>Lorem ipsum...</p>');

`editor.t(key, params?)`

Translate a key using the editor's language. Supports placeholder substitution.

editor.t('bold');                         // 'Bold' (or translated)
editor.t('tableSize', { rows: 3, cols: 4 }); // '3 x 4'

`editor.destroy()`

Destroys the editor: removes all DOM elements, event listeners, and plugins. Restores the original textarea with the final content.

editor.destroy();
// Textarea is visible again, contains the last editor content

`editor.on(event, callback)`

Listen for an editor event. See Events.

`editor.off(event, callback)`

Remove an event listener.

Static Methods

`ZynText.setLang(code)`

Set the global default language for all new editor instances.

ZynText.setLang('ar');
// All new instances use Arabic by default

`ZynText.addTranslations(code, translations)`

ZynText.addTranslations('ko', {
  'bold': '굵게',
  'italic': '기울임'
});

`ZynText.availableLanguages()`

Returns an array of all registered language codes.

ZynText.availableLanguages();
// ['en', 'fr', 'es', 'pt', 'ar', 'ja', 'zh', 'ru', 'he', 'de', 'it', 'tr', 'hi', 'bn']

Instance Properties

These are available on the editor instance for advanced use cases:

Property	Type	Description
`editor.container`	`HTMLDivElement`	The root `.zy-editor` container
`editor.contentEl`	`HTMLDivElement`	The `contenteditable` area
`editor.toolbarEl`	`HTMLDivElement`	The toolbar DOM element
`editor.textarea`	`HTMLTextAreaElement`	The original (hidden) textarea
`editor.options`	`object`	Merged options object
`editor.selection`	`SelectionManager`	Save/restore selection state
`editor.content`	`ContentManager`	Get/set HTML, insert nodes
`editor.commands`	`CommandBus`	Register and execute commands
`editor.plugins`	`PluginManager`	Access registered plugins
`editor.toolbar`	`Toolbar`	Toolbar instance
`editor.icons`	`IconProvider`	Bootstrap or SVG icon provider

ContentManager Methods

editor.content.getHTML()       // Raw inner HTML
editor.content.getOutputHTML() // Portable HTML with inline styles
editor.content.setHTML(html)   // Replace content
editor.content.insertHTML(html)// Insert at cursor
editor.content.insertNode(node)// Insert DOM node at cursor
editor.content.focus()         // Focus the editing area

SelectionManager Methods

editor.selection.save()            // Save current selection
editor.selection.restore()         // Restore saved selection
editor.selection.getRange()        // Get current Range object
editor.selection.getSelectedText() // Get selected text
editor.selection.isWithinEditor()  // Check if cursor is in editor
editor.selection.closestBlock()    // Get nearest block element

CommandBus Methods

// Execute a command
editor.commands.exec('bold');
editor.commands.exec('formatBlock', 'H2');

// Register a custom command
editor.commands.register('myCommand', (editor, value) => {
  // Custom logic
});

// Query command state (for active button highlighting)
editor.commands.register('myCommand:state', (editor) => {
  return true; // or false
});

PluginManager Methods

// Get a plugin by name
const uploadPlugin = editor.plugins.get('upload');

// Check if a plugin is registered
if (editor.plugins.get('upload')) {
  // Upload is available
}