Pell

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

Rich text editor
jaredreich/pelljaredreich.com/pellpell

README

v2 working branch and v2 project board



Logo
npm cdnjs

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


Live demo: https://jaredreich.com/pell
Live demo

Comparisons


librarysizesizejquerybootstrapreactlink
|---------------|-----------------|------------|--------|-----------|-------|------|
pell1.38kB3.54kB||
squire16kB49kB||
medium-editor27kB105kB||
quill43kB205kB||
trix47kB204kB||
ckeditor163kB551kB||
trumbowyg8kB23kBx|https://github.com/Alex-D/Trumbowyg
summernote26kB93kBxx|
draft46kB147kB|xhttps://github.com/facebook/draft-js
froala52kB186kBx|https://github.com/froala/wysiwyg-editor
tinymce157kB491kBx|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:


  1. ``` sh
  2. npm install --save pell
  3. ```

HTML:


  1. ``` html
  2. <head>
  3.   ...
  4.   <link rel="stylesheet" type="text/css" href="https://unpkg.com/pell/dist/pell.min.css">
  5.   <style>
  6.     /* override styles here */
  7.     .pell-content {
  8.       background-color: pink;
  9.     }
  10.   </style>
  11. </head>
  12. <body>
  13.   ...
  14.   
  15.   <script src="https://unpkg.com/pell"></script>
  16. </body>
  17. ```

Usage


API


  1. ``` js
  2. // ES6
  3. import pell from 'pell'
  4. // or
  5. import { exec, init } from 'pell'
  6. ```

  1. ``` js
  2. // Browser
  3. pell
  4. // or
  5. window.pell
  6. ```

  1. ``` js
  2. // Initialize pell on an HTMLElement
  3. pell.init({
  4.   // , required
  5.   element: document.getElementById('some-id'),

  7.   // , required
  8.   // Use the output html, triggered by element's `oninput` event
  9.   onChange: html => console.log(html),

  11.   // , optional, default = 'div'
  12.   // Instructs the editor which element to inject via the return key
  13.   defaultParagraphSeparator: 'div',

  15.   // , optional, default = false
  16.   // Outputs instead of
  17.   styleWithCSS: false,

  19.   // , string if overwriting, object if customizing/creating
  20.   // action.name (only required if overwriting)
  21.   // action.icon (optional if overwriting, required if custom action)
  22.   // action.title (optional)
  23.   // action.result (required)
  24.   // Specify the actions you specifically want (in order)
  25.   actions: [
  26.     'bold',
  27.     {
  28.       name: 'custom',
  29.       icon: 'C',
  30.       title: 'Custom Action',
  31.       result: () => console.log('Do something!')
  32.     },
  33.     'underline'
  34.   ],

  36.   // classes (optional)
  37.   // Choose your custom class names
  38.   classes: {
  39.     actionbar: 'pell-actionbar',
  40.     button: 'pell-button',
  41.     content: 'pell-content',
  42.     selected: 'pell-button-selected'
  43.   }
  44. })

  46. // Execute a document command, see reference:
  47. // https://developer.mozilla.org/en/docs/Web/API/Document/execCommand
  48. // this is just `document.execCommand(command, false, value)`
  49. pell.exec(command<string>, value<string>)
  50. ```

List of overwriteable action names

- bold
- italic
- underline
- strikethrough
- heading1
- heading2
- paragraph
- quote
- olist
- ulist
- code
- line
- link
- image

Examples


General


  1. ``` html
  2. <div id="editor" class="pell"></div>
  3. <div>
  4.   HTML output:
  5.   <div id="html-output" style="white-space:pre-wrap;"></div>
  6. </div>
  7. ```

  1. ``` js
  2. import { exec, init } from 'pell'

  4. const editor = init({
  5.   element: document.getElementById('editor'),
  6.   onChange: html => {
  7.     document.getElementById('html-output').textContent = html
  8.   },
  9.   defaultParagraphSeparator: 'p',
  10.   styleWithCSS: true,
  11.   actions: [
  12.     'bold',
  13.     'underline',
  14.     {
  15.       name: 'italic',
  16.       result: () => exec('italic')
  17.     },
  18.     {
  19.       name: 'backColor',
  20.       icon: '<div style="background-color:pink;">A</div>',
  21.       title: 'Highlight Color',
  22.       result: () => exec('backColor', 'pink')
  23.     },
  24.     {
  25.       name: 'image',
  26.       result: () => {
  27.         const url = window.prompt('Enter the image URL')
  28.         if (url) exec('insertImage', url)
  29.       }
  30.     },
  31.     {
  32.       name: 'link',
  33.       result: () => {
  34.         const url = window.prompt('Enter the link URL')
  35.         if (url) exec('createLink', url)
  36.       }
  37.     }
  38.   ],
  39.   classes: {
  40.     actionbar: 'pell-actionbar-custom-name',
  41.     button: 'pell-button-custom-name',
  42.     content: 'pell-content-custom-name',
  43.     selected: 'pell-button-selected-custom-name'
  44.   }
  45. })

  47. // editor.content
  48. // To change the editor's content:
  49. editor.content.innerHTML = '<b><u><i>Initial content!</i></u></b>'
  50. ```

Example (Markdown)


  1. ``` html
  2. <div id="editor" class="pell"></div>
  3. <div>
  4.   Markdown output:
  5.   <div id="markdown-output" style="white-space:pre-wrap;"></div>
  6. </div>
  7. ```

  1. ``` js
  2. import { init } from 'pell'
  3. import Turndown from 'turndown'

  5. const { turndown } = new Turndown({ headingStyle: 'atx' })

  7. init({
  8.   element: document.getElementById('editor'),
  9.   actions: ['bold', 'italic', 'heading1', 'heading2', 'olist', 'ulist'],
  10.   onChange: html => {
  11.     document.getElementById('markdown-output').innerHTML = turndown(html)
  12.   }
  13. })
  14. ```

Frameworks


- React
- Vue

Custom Styles


SCSS


  1. ```scss
  2. $pell-content-height: 400px;
  3. // See all overwriteable variables in src/pell.scss

  5. // Then import pell.scss into styles:
  6. @import '../../node_modules/pell/src/pell';
  7. ```

CSS


  1. ```css
  2. /* After pell styles are applied to DOM: */
  3. .pell-content {
  4.   height: 400px;
  5. }
  6. ```

License


MIT

Credits


BrowserStack for cross browser testing:

BrowserStack logo