Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
By Philipp Burckhardt - Oct 17, 2024
pell
pell - the simplest and smallest WYSIWYG text editor for web, with no dependencies
pell is the simplest and smallest WYSIWYG text editor for web, with no dependencies
Live demo: https://jaredreich.com/pell
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:
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-content {
background-color: pink;
}
</style>
</head>
<body>
...
<!-- Bottom of body -->
<script src="https://unpkg.com/pell"></script>
</body>
Usage
API
// ES6
import pell from 'pell'
// or
import { exec, init } from 'pell'
// Browser
pell
// or
window.pell
// Initialize pell on an HTMLElement
pell.init({
// <HTMLElement>, required
element: document.getElementById('some-id'),
// <Function>, required
// Use the output html, triggered by element's `oninput` event
onChange: html => console.log(html),
// <string>, optional, default = 'div'
// Instructs the editor which element to inject via the return key
defaultParagraphSeparator: 'div',
// <boolean>, optional, default = false
// Outputs <span style="font-weight: bold;"></span> instead of <b></b>
styleWithCSS: false,
// <Array[string | Object]>, string if overwriting, object if customizing/creating
// action.name<string> (only required if overwriting)
// action.icon<string> (optional if overwriting, required if custom action)
// action.title<string> (optional)
// action.result<Function> (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<Array[string]> (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<string>, value<string>)
List of overwriteable action names
- bold
- italic
- underline
- strikethrough
- heading1
- heading2
- paragraph
- quote
- olist
- ulist
- code
- line
- link
- image
Examples
General
<div id="editor" class="pell"></div>
<div>
HTML output:
<div id="html-output" style="white-space:pre-wrap;"></div>
</div>
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: '<div style="background-color:pink;">A</div>',
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<HTMLElement>
// To change the editor's content:
editor.content.innerHTML = '<b><u><i>Initial content!</i></u></b>'
Example (Markdown)
<div id="editor" class="pell"></div>
<div>
Markdown output:
<div id="markdown-output" style="white-space:pre-wrap;"></div>
</div>
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
- [Vue] (/examples/vue.md)
Custom Styles
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
/* After pell styles are applied to DOM: */
.pell-content {
height: 400px;
}
License
MIT
FAQs
pell - the simplest and smallest WYSIWYG text editor for web, with no dependencies
We found that pell demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 05 Dec 2018
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Product
Enhancing Open-Source Compliance: Introducing Socket’s Advanced License Analysis
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
By Christopher Bailey - Oct 17, 2024
Product
Introducing Socket Optimize
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
By John-David Dalton - Oct 16, 2024