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
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
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.