Skip to content

LiteEditor Documentation

Everything you need to install, use and customize the lightweight vanilla JS WYSIWYG editor. Current version 1.2.0.

Quick start

LiteEditor is a vanilla JavaScript WYSIWYG editor — no build step, no jQuery. Include two files, add a textarea, and call liteeditor.init().

html
<!-- 1. Include the CSS and JS from the LiteEditor CDN -->
<link rel="stylesheet" href="https://cdn.liteeditor.com/liteeditor/1.2.0/liteeditor.min.css">
<script src="https://cdn.liteeditor.com/liteeditor/1.2.0/liteeditor.min.js"></script>

<!-- 2. Add a textarea -->
<textarea id="editor"></textarea>

<!-- 3. Initialize with your API key -->
<script>
  liteeditor.init({ selector: '#editor', apiKey: 'YOUR_API_KEY' });
</script>

Installation

Install via CDN (recommended), a bundler, or by self-hosting the files.

html
<link rel="stylesheet" href="https://cdn.liteeditor.com/liteeditor/1.2.0/liteeditor.min.css">
<script src="https://cdn.liteeditor.com/liteeditor/1.2.0/liteeditor.min.js"></script>

<textarea id="editor"></textarea>
<script>
  liteeditor.init({ selector: '#editor', apiKey: 'YOUR_API_KEY' });
</script>

Grab your free YOUR_API_KEY from the dashboard.

Usage examples

Basic configuration

Pick the plugins and toolbar buttons you need. Groups are separated with |.

javascript
liteeditor.init({
  selector: '#editor',
  height: 300,
  plugins: 'autolink link lists',
  toolbar: 'bold italic underline | link | numlist bullist'
});

// Or enable everything at once:
liteeditor.init({
  selector: '#editor',
  plugins: 'all',    // every built-in plugin
  toolbar: 'full',   // the complete toolbar
  menubar: true      // File / Edit / View / Insert / Format / Tools / Table / Help
});

Multiple editors with one selector

Pass a class selector and every matching element becomes its own editor instance.

html
<textarea class="rich"></textarea>
<textarea class="rich"></textarea>

<script>
  // One call attaches an independent editor to every match
  liteeditor.init({
    selector: '.rich',
    toolbar: 'bold italic | link'
  });
</script>

Get, set & destroy content

Work with a single instance programmatically:

javascript
const editor = liteeditor.get('#editor');

// Read the current HTML
const html = editor.getContent();

// Replace the content
editor.setContent('<p>Hello <strong>world</strong></p>');

// Tear down when you're done (e.g. in a SPA route leave)
editor.destroy();

Plugins

LiteEditor ships with 13 built-in plugins. Enable them in the plugins string.

table

Insert and edit tables with row/column controls.

image

Insert, upload and drag-resize responsive images.

media

Embed YouTube/Vimeo videos or raw embed code.

link

Create, edit and unlink hyperlinks with URL validation.

lists

Ordered and unordered lists with indent control.

codesample

Insert syntax-highlighted code blocks.

emoticons

Pick emoji from a searchable panel.

charmap

Insert special characters and symbols.

searchreplace

Find and replace text inside the document.

wordcount

Live word and character count.

anchor

Insert named anchors for in-page links.

autolink

Automatically turn typed URLs into links.

visualblocks

Toggle visual outlines of block elements.

API reference

Global object liteeditor

MethodDescription
liteeditor.init(config)Initialize editor(s) on the selector.
liteeditor.get(ref)Get an instance by id, element or selector.
liteeditor.getAll(selector)Get all instances (optionally filtered).
liteeditor.getAllInstances()Array of every active instance.
liteeditor.remove(ref)Destroy instance(s) and restore the element.
liteeditor.versionCurrent version string.

Editor instance

MethodDescription
editor.getContent()Return the current HTML content.
editor.setContent(html)Replace the editor content.
editor.execCommand(cmd, value)Run an editing command.
editor.destroy()Tear down this instance and clean up listeners.
editor.idThe instance id, e.g. "liteeditor-0".

Configuration options

OptionTypeDescription
selectorstring | ElementCSS selector or element to attach to. A class selector attaches to all matches.
pluginsstringSpace-separated list of plugins to enable.
toolbarstringToolbar layout; use "|" to separate groups.
heightnumberEditor height in pixels.
default_stylesobject | falseOverride or disable the inline styles applied to saved HTML.
paste_keep_classesbooleanKeep class attributes when pasting.

Customization guide

Tailor the saved output and paste behavior. default_styles controls the inline styles LiteEditor writes onto elements so the HTML stays self-contained; pass an object to override, or false to turn it off.

javascript
liteeditor.init({
  selector: '#editor',
  // Override the inline styles applied to saved HTML,
  // or pass false to disable them entirely.
  default_styles: {
    img: 'max-width: 100%; height: auto; border-radius: 8px;'
  },
  paste_keep_classes: true
});

To restyle the editor chrome itself, override the classes in liteeditor.css from your own stylesheet, loaded after the editor CSS.

FAQ

LiteEditor is a lightweight JavaScript WYSIWYG editor written in vanilla JS with zero runtime dependencies. It is a minimal, no-jQuery rich text editor and a modern alternative to TinyMCE, CKEditor and Quill for CMS and web apps.