@zesyn/zeditor

v1.0.6

Published

16 days ago

Free, open-source rich text editor with all premium features built-in.

0High
0Medium
0Low

zesyn

rich text editor wysiwyg editor free open-source ckeditor alternative tinymce alternative math equations track changes

Zeditor

Free, open-source rich text editor with ALL premium features built-in.
A powerful alternative to CKEditor and TinyMCE — no subscriptions, no paywalls.

Features (All Free)

✅ Track Changes (like Microsoft Word)
✅ Comments & Annotations
✅ Math Equations (MathJax / LaTeX)
✅ Tables with right-click context menu
✅ Word Import & Export (.docx)
✅ Emoji Picker
✅ Find & Replace
✅ Slash Commands (/ menu)
✅ Media Embeds (YouTube, Vimeo)
✅ Dark Mode
✅ Fullscreen Mode
✅ HTML Source View
✅ Special Characters
✅ Font Size, Font Family, Colors
✅ Resizable editor height

Install

CDN (no install needed)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zesyn/zeditor/dist/zeditor.css">
<script src="https://cdn.jsdelivr.net/npm/@zesyn/zeditor/dist/zeditor.iife.js"></script>

NPM

npm install @zesyn/zeditor

Quick Start

Via CDN

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zesyn/zeditor/dist/zeditor.css">
</head>
<body>

  <div id="editor"></div>

  <script src="https://cdn.jsdelivr.net/npm/@zesyn/zeditor/dist/zeditor.iife.js"></script>
  <script>
    const editor = new Zeditor.Zeditor('#editor', {
      height: 400,
      placeholder: 'Start typing...'
    });
  </script>

</body>
</html>

Via NPM (ES Module)

import { Zeditor } from '@zesyn/zeditor';
import '@zesyn/zeditor/dist/zeditor.css';

const editor = new Zeditor('#editor', {
  height: 400,
  placeholder: 'Start typing...'
});

Options

| Option | Type | Default | Description | |---------------|------------|----------|------------------------------------| | height | number | 300 | Editor height in pixels | | placeholder | string | '' | Placeholder text when empty | | content | string | '' | Initial HTML content | | onChange | function | null | Callback fired on every change | | onReady | function | null | Callback fired when editor is ready|

const editor = new Zeditor.Zeditor('#editor', {
  height: 500,
  placeholder: 'Write something...',
  content: '<p>Hello world</p>',
  onChange: (html) => {
    console.log('Content changed:', html);
  },
  onReady: (editor) => {
    console.log('Editor ready!');
  }
});

API Methods

// Get HTML content
const html = editor.getHTML();

// Set HTML content
editor.setHTML('<p>Hello <strong>world</strong></p>');

// Get plain text
const text = editor.getText();

// Clear content
editor.clear();

// Insert HTML at cursor
editor.insertHTML('<strong>Bold text</strong>');

// Focus the editor
editor.focus();

Math Equations

Zeditor supports LaTeX math via MathJax. Use the toolbar button or Insert menu.

Inline math — wraps in \( ... \):

\(E = mc^2\)

Block math — wraps in \[ ... \]:

\[\int_a^b f(x)\,dx = F(b) - F(a)\]

Keyboard Shortcuts

| Shortcut | Action | |--------------|-----------------| | Ctrl+B | Bold | | Ctrl+I | Italic | | Ctrl+U | Underline | | Ctrl+Z | Undo | | Ctrl+Y | Redo | | Ctrl+H | Find & Replace | | / | Slash commands | | F11 | Fullscreen |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme