pell README

The project's README from github.com/jaredreich/pell. As one markdown file: README.md.

v2 working branch and v2 project board

Logo

npm cdnjs

pell is the simplest and smallest WYSIWYG text editor for web, with no dependencies

Demo

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

Included actions:

Other available actions (listed at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand):

Or create any custom action!

Browser Support

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

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

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

Credits

BrowserStack for cross browser testing:

BrowserStack logo

pell (jaredreich/pell)

wysiwyg
Searching Database…

12K ·GitHub
Pell
What is this?pell is a WYSIWYG rich text editor for the web — the simplest and smallest one around, with zero dependencies. You embed it in a page and users get a toolbar for formatting text.
Is it a ready-made app, or a library I build into my own site?A library: you pull it in via npm or a script tag, attach it to a page element, and drive it through its API. It runs entirely in the browser.
How do I add it to a project?Two ways: install the npm package, or include it with a plain HTML script tag — then initialize the editor on an element in a few lines of JavaScript.
Do I need jQuery, Bootstrap or React for it to work?No — it is pure JavaScript written in ES6 with no dependencies at all, and the comparison table shows it, unlike most alternatives, requires no jQuery, Bootstrap or React.
If it is that tiny, how much formatting does the toolbar actually cover?Minimal by design: 14 built-in actions — bold, italic, underline, strikethrough, headings 1 and 2, paragraph, quote, ordered and unordered lists, code, horizontal rule, link and image. Justify, font size, undo/redo and more are available, plus any custom action.
Which browsers does it work in?Very old ones: Chrome 5+, Firefox 4+, Safari 5+, Opera 11.6+ and IE 9+ — though the README itself calls IE support only theoretical ('good luck').
Why pick pell over editors like Quill or TinyMCE?Size: pell ships at 1.38kB min+gzip, versus 43kB for Quill, 47kB for Trix and 157kB for TinyMCE — and unlike several competitors it requires no jQuery, Bootstrap or React.
How do I make it match my site's design?Restyle it freely: override the CSS directly or customize the bundled sass file, pell.scss.
Can I add my own buttons to the toolbar?Yes — you can create any custom action, and even the default action names (bold, link, image and so on) are overwriteable through the API.
Does it play well with React or Vue?The repo includes ready examples for both frameworks, alongside a general demo and a Markdown example.
What are similar projects?trix, medium-editor, ckeditor5, summernote, draft-js, quill, tinymce, slate
Which topics is it in?contenteditable, wysiwyg-editor, rich-text-editor, wysiwyg, sass, es6, text-editor, no-dependencies, lightweight, editor, javascript-library, ui-components
Creator
jaredreich
Size
1.2 MB
Stars
12K
Updated
CommitMay 12Releasev1.0.6Dec 05
Age
9y
Commits · 90 Days