Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jaredreich/pell
๐ the simplest and smallest WYSIWYG text editor for web, with no dependencies
https://github.com/jaredreich/pell
contenteditable editor javascript rich-text-editor text-editing text-editor wysiwyg wysiwyg-editor
Last synced: 3 days ago
JSON representation
๐ the simplest and smallest WYSIWYG text editor for web, with no dependencies
- Host: GitHub
- URL: https://github.com/jaredreich/pell
- Owner: jaredreich
- License: mit
- Created: 2017-07-09T14:30:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-05-12T17:09:57.000Z (7 months ago)
- Last Synced: 2024-12-08T18:06:31.889Z (4 days ago)
- Topics: contenteditable, editor, javascript, rich-text-editor, text-editing, text-editor, wysiwyg, wysiwyg-editor
- Language: JavaScript
- Homepage:
- Size: 1.19 MB
- Stars: 11,978
- Watchers: 156
- Forks: 550
- Open Issues: 68
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome - jaredreich/pell - ๐ the simplest and smallest WYSIWYG text editor for web, with no dependencies (JavaScript)
- awesome-wysiwyg - Pell - The simplest and smallest (1kB) WYSIWYG text editor for web, with no dependencies. (Standalone)
- awesome-web-editor - pell - the simplest and smallest WYSIWYG text editor for web, with no dependencies. (Rich text editor)
- awesome-list - pell
- starred-awesome - pell - ๐ the simplest and smallest WYSIWYG text editor for web, with no dependencies (JavaScript)
- awesome-wysiwyg-editors - Pell - ๆ็ฎๅๅๆๅฐ็๏ผ1kB๏ผWeb WYSIWYG ๆๆฌ็ผ่พๅจ๏ผๆฒกๆไปปไฝไพ่ตๆงใ  (็ฌ็ซ็)
README
#### [v2 working branch](https://github.com/jaredreich/pell/tree/v2) and [v2 project board](https://github.com/jaredreich/pell/projects/1)
---
[](https://www.npmjs.com/package/pell)
[](https://cdnjs.com/libraries/pell)
> pell is the simplest and smallest WYSIWYG text editor for web, with no dependencies
## Comparisons
| library | size (min+gzip) | size (min) | jquery | bootstrap | react | link |
|---------------|-----------------|------------|--------|-----------|-------|------|
| pell | 1.38kB | 3.54kB | | | | https://github.com/jaredreich/pell |
| squire | 16kB | 49kB | | | | https://github.com/neilj/Squire |
| medium-editor | 27kB | 105kB | | | | https://github.com/yabwe/medium-editor |
| quill | 43kB | 205kB | | | | https://github.com/quilljs/quill |
| trix | 47kB | 204kB | | | | https://github.com/basecamp/trix |
| ckeditor | 163kB | 551kB | | | | https://ckeditor.com |
| trumbowyg | 8kB | 23kB | x | | | https://github.com/Alex-D/Trumbowyg |
| summernote | 26kB | 93kB | x | x | | https://github.com/summernote/summernote |
| draft | 46kB | 147kB | | | x | https://github.com/facebook/draft-js |
| froala | 52kB | 186kB | x | | | https://github.com/froala/wysiwyg-editor |
| tinymce | 157kB | 491kB | x | | | https://github.com/tinymce/tinymce |
## Features
* Pure JavaScript, no dependencies, written in ES6
* Easily customizable with the sass file (pell.scss) or overwrite the CSS
Included actions:
- Bold
- Italic
- Underline
- Strike-through
- Heading 1
- Heading 2
- Paragraph
- Quote
- Ordered List
- Unordered List
- Code
- Horizontal Rule
- Link
- Image
Other available actions (listed at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand):
- Justify Center
- Justify Full
- Justify Left
- Justify Right
- Subscript
- Superscript
- Font Name
- Font Size
- Indent
- Outdent
- Clear Formatting
- Undo
- Redo
Or create any custom action!
## Browser Support
* IE 9+ (theoretically, but good luck)
* Chrome 5+
* Firefox 4+
* Safari 5+
* Opera 11.6+
## Installation
#### npm:
```bash
npm install --save pell
```
#### HTML:
```html
...
/* override styles here */
.pell-content {
background-color: pink;
}
...
```
## Usage
#### API
```js
// ES6
import pell from 'pell'
// or
import { exec, init } from 'pell'
```
```js
// Browser
pell
// or
window.pell
```
```js
// Initialize pell on an HTMLElement
pell.init({
// , required
element: document.getElementById('some-id'),
// , required
// Use the output html, triggered by element's `oninput` event
onChange: html => console.log(html),
// , optional, default = 'div'
// Instructs the editor which element to inject via the return key
defaultParagraphSeparator: 'div',
// , optional, default = false
// Outputs instead of
styleWithCSS: false,
// , string if overwriting, object if customizing/creating
// action.name (only required if overwriting)
// action.icon (optional if overwriting, required if custom action)
// action.title (optional)
// action.result (required)
// Specify the actions you specifically want (in order)
actions: [
'bold',
{
name: 'custom',
icon: 'C',
title: 'Custom Action',
result: () => console.log('Do something!')
},
'underline'
],
// classes (optional)
// Choose your custom class names
classes: {
actionbar: 'pell-actionbar',
button: 'pell-button',
content: 'pell-content',
selected: 'pell-button-selected'
}
})
// Execute a document command, see reference:
// https://developer.mozilla.org/en/docs/Web/API/Document/execCommand
// this is just `document.execCommand(command, false, value)`
pell.exec(command, value)
```
#### List of overwriteable action names
- bold
- italic
- underline
- strikethrough
- heading1
- heading2
- paragraph
- quote
- olist
- ulist
- code
- line
- link
- image
## Examples
#### General
```html
HTML output:
```
```js
import { exec, init } from 'pell'
const editor = init({
element: document.getElementById('editor'),
onChange: html => {
document.getElementById('html-output').textContent = html
},
defaultParagraphSeparator: 'p',
styleWithCSS: true,
actions: [
'bold',
'underline',
{
name: 'italic',
result: () => exec('italic')
},
{
name: 'backColor',
icon: '
A',
title: 'Highlight Color',
result: () => exec('backColor', 'pink')
},
{
name: 'image',
result: () => {
const url = window.prompt('Enter the image URL')
if (url) exec('insertImage', url)
}
},
{
name: 'link',
result: () => {
const url = window.prompt('Enter the link URL')
if (url) exec('createLink', url)
}
}
],
classes: {
actionbar: 'pell-actionbar-custom-name',
button: 'pell-button-custom-name',
content: 'pell-content-custom-name',
selected: 'pell-button-selected-custom-name'
}
})
// editor.content
// To change the editor's content:
editor.content.innerHTML = 'Initial content!'
```
#### Example (Markdown)
```html
Markdown output:
```
```js
import { init } from 'pell'
import Turndown from 'turndown'
const { turndown } = new Turndown({ headingStyle: 'atx' })
init({
element: document.getElementById('editor'),
actions: ['bold', 'italic', 'heading1', 'heading2', 'olist', 'ulist'],
onChange: html => {
document.getElementById('markdown-output').innerHTML = turndown(html)
}
})
```
#### Frameworks
- [React](/examples/react.md)
- [Vue](/examples/vue.md)
## Custom Styles
#### SCSS
```scss
$pell-content-height: 400px;
// See all overwriteable variables in src/pell.scss
// Then import pell.scss into styles:
@import '../../node_modules/pell/src/pell';
```
#### CSS
```css
/* After pell styles are applied to DOM: */
.pell-content {
height: 400px;
}
```
## License
MIT
## Credits
BrowserStack for cross browser testing:
