https://github.com/lkmill/spytext
An HTML5 editor using contentEditable.
https://github.com/lkmill/spytext
contenteditable html5-editor javascript rich-text rich-text-editor rte
Last synced: 4 months ago
JSON representation
An HTML5 editor using contentEditable.
- Host: GitHub
- URL: https://github.com/lkmill/spytext
- Owner: lkmill
- License: mit
- Created: 2014-05-23T10:16:37.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2024-03-26T11:29:47.000Z (over 2 years ago)
- Last Synced: 2026-02-23T10:42:31.611Z (4 months ago)
- Topics: contenteditable, html5-editor, javascript, rich-text, rich-text-editor, rte
- Language: JavaScript
- Homepage:
- Size: 479 KB
- Stars: 3
- Watchers: 5
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/lohfu/dollr)), selection management (through
[selektr](https://github.com/lohfu/selektr)) and DOM undo/redo (through
[snapback](https://github.com/lohfu/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](#spytext-is-tiny).
## Demo
There is a Plunker demo at:
## Usage
### NPM
```
$ npm install spytext
```
```js
import Spytext from 'spytext'
const spytext = new Spytext({ el: document.getElementById('#spytext-field') })
spytext.deactivate()
spytext.activate()
```
### CDN (UMD build)
```html
document.addEventListener('DOMContentLoaded', () => {
const spytext = new Spytext({ el: document.getElementById('#spytext-field') })
}, false)
```
## 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
| | Minified | Compressed|
|-------------------------------|-----------|-----------|
| Spytext (UMD build, all deps) | 29 kb | 8.6 kb |
## Compatibility
| | Quirky | Without Undo | Full |
|---------|-----------|--------------|-----------|
| Chrome | 9 | 16 | 18 |
| IE | N/A | 9 | N/A |
| Firefox | 1 | 3.6 | 14 |
| Safari | Unknown | Unknown | 6 |
| Opera | Unknown | Unknown | 15 |