pell is the simplest and smallest (5kB) WYSIWYG text editor for web, with no dependencies
Live demo: https://jaredreich.com/pell
Comparisons (minified)
Library | Size (minified) | jQuery | Bootstrap |
---|---|---|---|
pell | 5kB | ||
medium-editor | 105kB | ||
quill | 205kB | ||
summernote | 93kB | x | x |
froala | 186kB | x | |
tinymce | 491kB | x | |
ckeditor | 551kB | x |
Features
- Pure JavaScript, no dependencies, written in ES6
- Easily customizable with the sass file (pell.scss) or overwrite the CSS
Current actions:
- Bold
- Italic
- Underline
- Strike-through
- Heading 1
- Heading 2
- Paragraph
- Quote
- Ordered List
- Unordered List
- Code
- Horizontal Rule
- Link
- Image
- Undo
- Redo
Other possible future actions:
- Justify Center
- Justify Full
- Justify Left
- Justify Right
- Subscript
- Superscript
- Font Name
- Font Size
- Indent
- Outdent
- Clear Formatting
Browser Support
- IE 9+
- Chrome 5+
- Firefox 4+
- Safari 5+
- Opera 11.6+
Installation
npm:
npm install --save pell
HTML:
<head>
...
<link rel="stylesheet" type="text/css" href="https://unpkg.com/pell/dist/pell.min.css">
<style>
/* override styles here */
.pell-editor {
background-color: pink;
}
</style>
</head>
<body>
...
<!-- Bottom of body -->
<script src="https://unpkg.com/pell"></script>
</body>
Usage
// ES6
import pell from 'pell'
// or
import { init } from 'pell'
// Browser
pell
// or
window.pell
Example:
<div id="pell"></div>
<div>
Text output:
<div id="text-output"></div>
HTML output:
<pre id="html-output"></pre>
</div>
pell.init({
actions: [
'bold',
{ name: 'italic', icon: '☺', title: 'Zitalic' },
'underline'
],
classes: {
actionbar: 'pell-actionbar',
button: 'pell-button',
editor: 'pell-editor'
},
onChange: html => {
document.getElementById('text-output').innerHTML = html
document.getElementById('html-output').textContent = html
},
root: 'pell'
})
Custom Styles
SCSS:
// Before pell is imported:
$pell-border-color: #000;
// See all overwriteable variables in src/pell.scss
// Then import pell.scss into styles:
@import '../../node_modules/pell/src/pell';
CSS:
/* After pell styles are applied to DOM: */
.pell-editor {
background-color: pink;
}
License
MIT