Zeditor Documentation

Zeditor is a free, open-source rich text editor with all premium features built-in. MIT licensed.

Installation

CDN (Fastest)

NPM

npm install zeditor

ZIP (Self-hosted)

Download the ZIP from the download page, upload zeditor.js and zeditor.css to your server.

Quick Start

<div id="editor"></div> <script> const editor = new Zeditor('#editor', { height: 450, placeholder: 'Start typing...', onChange: (html) => { console.log(html); } }); // Get HTML content const html = editor.getHTML(); // Set HTML content editor.setHTML('<p>Hello World</p>'); // Get plain text const text = editor.getText(); </script>

Configuration Options

Option	Type	Default	Description
height	number \| string	450	Editor height in pixels or CSS value
minHeight	number \| string	200	Minimum editor height
placeholder	string	'Start typing...'	Placeholder text when empty
toolbar	'full' \| 'minimal' \| 'standard'	'full'	Toolbar preset
darkMode	boolean	false	Start in dark mode
readOnly	boolean	false	Disable editing
content	string	''	Initial HTML content
wordCountBar	boolean	true	Show word count status bar
onChange	function	null	Called on every content change with HTML string
onReady	function	null	Called when editor is fully initialized

API Methods

Method	Returns	Description
getHTML()	string	Get the current editor HTML content
setHTML(html)	void	Set the editor HTML content
getText()	string	Get plain text content (no HTML tags)
focus()	void	Focus the editor
clear()	void	Clear all content
exec(command, value)	void	Execute a formatting command (e.g., 'bold', 'italic')
insertHTML(html)	void	Insert HTML at the current cursor position
toggleDarkMode()	void	Toggle dark mode on/off
toggleFullscreen()	void	Toggle fullscreen mode
toggleSourceView()	void	Toggle HTML source view
on(event, handler)	void	Listen to editor events
off(event, handler)	void	Remove event listener
destroy()	void	Destroy the editor and clean up

Events

Event	Data	Description
change	html: string	Fired on every content change

editor.on('change', (html) => { console.log('Content changed:', html); });

Tables Plugin

Click the Table button in the toolbar to open the visual table picker. Hover over the grid to select rows × columns, then click to insert.

Right-click on any table cell to get the context menu with options to insert/delete rows and columns.

// Insert table programmatically editor.tablePlugin.insertTable(3, 4, true, true); // params: rows, cols, hasHeader, hasBorder

Find & Replace Plugin

Press Ctrl+H or click the 🔍 button. A panel opens above the content area with find, navigation, and replace controls.

// Open the find & replace panel editor.findReplacePlugin.show();

Emoji Plugin

Click the 😊 emoji button. A panel opens with 600+ emoji across 10 categories and a search box.

// Open the emoji picker editor.emojiPlugin.show();

Slash Commands

Type / anywhere in the editor. A command menu appears with options for headings, lists, tables, images, links, and more. Use arrow keys to navigate, Enter to select.

Track Changes

Click the Track Changes button to enable. All insertions are shown in green and deletions in red.

// Toggle track changes editor.trackChangesPlugin.toggle(); // Accept all changes editor.trackChangesPlugin.acceptAll(); // Reject all changes editor.trackChangesPlugin.rejectAll();

Comments

Select text, then click the 💬 Add Comment button. Comments appear as yellow highlights. Click a highlighted section to see the comment bubble with resolve/delete options.

// Add a comment (opens dialog) editor.commentsPlugin.addComment();

Media Embed

Click the ▶️ embed button and paste any YouTube, Vimeo, or iframe URL. A live preview appears before inserting.

// Open media embed dialog editor.mediaPlugin.show();

Import / Export

All import/export is 100% client-side — no server needed.

// Export as HTML file editor.importExportPlugin.exportHTML(); // Export as Word (.docx) await editor.importExportPlugin.exportWord(); // Import from Word (.docx) — opens file picker editor.importExportPlugin.importWord();