Skip to content

LiteEditor Documentation

Everything you need to install, use and customize the lightweight vanilla JS WYSIWYG editor. Current version 1.3.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.3.0/liteeditor.min.css">
<script src="https://cdn.liteeditor.com/liteeditor/1.3.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.3.0/liteeditor.min.css">
<script src="https://cdn.liteeditor.com/liteeditor/1.3.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, or "all".
toolbarstringToolbar layout; use "|" to separate groups. "full" enables every button.
menubarboolean | stringTinyMCE-style menubar: true for all menus, or a subset like "file edit format". Default off.
content_cssstring | string[]Stylesheet URL(s) loaded into the editing area so content looks like your site.
content_stylestringRaw CSS applied in the editing area, after content_css and the built-in defaults.
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
});

Match your site's styles

The editing area has its own built-in defaults (headings bold, 14px body text, …). If your site renders content differently, pass your stylesheet with content_css and/or rules with content_style — the same option names as TinyMCE — and the editor, Preview and Print will show exactly what your visitors see. Saved HTML is unaffected.

javascript
liteeditor.init({
  selector: '#editor',
  // Make the editing area look like your site: load your stylesheet(s)…
  content_css: 'https://yoursite.com/css/theme.css',   // or an array of URLs
  // …and/or add a few rules. Applied after content_css and after the
  // editor's built-in defaults, so they win.
  content_style: 'h1, h2, h3 { font-weight: 400 } body { font-family: Inter, sans-serif }'
});

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

FAQ

Yes. LiteEditor has a Free Lifetime plan with no credit card required, and your free key works on localhost instantly — no domain setup needed for development.