pell is the simplest and smallest WYSIWYG text editor for web, with no dependencies
Live demo: https://jaredreich.com/pell
| library | size (min+gzip) | size (min) | jquery | bootstrap |
|---|---|---|---|---|
| pell | 1.1kB | 2.9kB | ||
| medium-editor | 27kB | 105kB | ||
| quill | 43kB | 205kB | ||
| ckeditor | 163kB | 551kB | ||
| summernote | 26kB | 93kB | x | x |
| froala | 52kB | 186kB | x | |
| tinymce | 157kB | 491kB | x |
- 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
- IE 9+
- Chrome 5+
- Firefox 4+
- Safari 5+
- Opera 11.6+
npm install --save pell<head>
...
<linkrel="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 --><scriptsrc="https://unpkg.com/pell"></script></body>// ES6importpellfrom'pell'// orimport{init}from'pell'// Browserpell// orwindow.pell<divid="pell"></div><div>
Text output:
<divid="text-output"></div>
HTML output:
<preid="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=htmldocument.getElementById('html-output').textContent=html},root: 'pell'})$pell-editor-height: 400px;
// See all overwriteable variables in src/pell.scss// Then import pell.scss into styles:@import'../../node_modules/pell/src/pell';/* After pell styles are applied to DOM: */
.pell-editor {
height:400px;
}MIT