terriajs-pell
Advanced tools
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
| 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 |
Included actions:
Other available actions (listed at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand):
Or create any custom action!
npm install --save pell
<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>
// 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>)
<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>'
<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)
}
})
$pell-content-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-content {
height: 400px;
}
MIT
BrowserStack for cross browser testing:
FAQs
pell - the simplest and smallest WYSIWYG text editor for web, with no dependencies
The npm package terriajs-pell receives a total of 1 weekly downloads. As such, terriajs-pell popularity was classified as not popular.
We found that terriajs-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.
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.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.