Spytext - The Tiny HTML5 Editor

Spytext is an HTML5 editor, not a Rich Text Editor, weighing in at 8.6 kb.

Spytext is built contentEditable, but most browsers handle handling line
breaks, new sections, backspaces, deletes, formatting etc very differently. As
a result, Spytext uses it’s own DOM manipulating commands (through
dollr), selection management (through
selektr) and DOM undo/redo (through
snapback). The only parts contentEditable
still handles are actual type inputs and text traversal (arrow buttons, page
up, etc).

Despite all this, the entire library (including ALL dependencies)
is tiny.

Demo

There is a Plunker demo at: https://embed.plnkr.co/sJNI4kVqX7VEgA0mY2UJ

Usage

NPM

$ npm install spytext

import Spytext from 'spytext'
const spytext = new Spytext({ el: document.getElementById('#spytext-field') })
spytext.deactivate()
spytext.activate()

CDN (UMD build)

<div id='spytext-field'></div>
<script src='https://unpkg.com/spytext@0.9.1/dist/spytext.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const spytext = new Spytext({ el: document.getElementById('#spytext-field') })
}, false)
</script>

Functionality

• Styling text with italic, bold, underline or strike-trough
• Change between P, H1, H2, H3, H4, H5 and H6 blocks for text
• Align/justify text blocks
• Create ordered and unordered lists
• Indent/outdent these lists and
• Selection management
• Undo/redo (including remembering selections positions)

Spytext is Tiny

Compatibility