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
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Research
A malicious npm campaign is targeting Ethereum developers by impersonating Hardhat plugins and the Nomic Foundation, stealing sensitive data like private keys.