pell

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

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

Comparisons

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:

npm install --save pell

HTML:

  ...
  
  <style>
    /* override styles here */
    .pell-content {
      background-color: pink;
    }
  </style>


  ...
  
  

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({
  // , required
  element: document.getElementById('some-id'),

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

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

  // , optional, default = false
  // Outputs <span style="font-weight: bold;"></span> instead of <b></b>
  styleWithCSS: false,

  // , string if overwriting, object if customizing/creating
  // action.name (only required if overwriting)
  // action.icon (optional if overwriting, required if custom action)
  // action.title (optional)
  // action.result (required)
  // Specify the actions you specifically want (in order)
  actions: [
    'bold',
    {
      name: 'custom',
      icon: 'C',
      title: 'Custom Action',
      result: () =&gt; console.log('Do something!')
    },
    'underline'
  ],

  // classes (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, value)

List of overwriteable action names

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

Examples

General

<div class="pell" id="editor"></div>
<div>
  HTML output:
  <div style="white-space:pre-wrap;" id="html-output"></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: () =&gt; exec('backColor', 'pink')
    },
    {
      name: 'image',
      result: () =&gt; {
        const url = window.prompt('Enter the image URL')
        if (url) exec('insertImage', url)
      }
    },
    {
      name: 'link',
      result: () =&gt; {
        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
// To change the editor's content:
editor.content.innerHTML = '<b><u><i>Initial content!</i></u></b>'

Example (Markdown)

<div class="pell" id="editor"></div>
<div>
  Markdown output:
  <div style="white-space:pre-wrap;" id="markdown-output"></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

• React
• [Vue] (/examples/vue.md)

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