pell

v2 working branch and v2 project board

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

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:

<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

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

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

React
Vue

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:

v2 working branch and v2 project board

Comparisons

Features

Browser Support

Installation

npm:

HTML:

Usage

API

List of overwriteable action names

Examples

General

Example (Markdown)

Frameworks

Custom Styles

SCSS

CSS

License

Credits

编辑推荐精选

Refly.AI

酷表ChatExcel

TRAE编程

AIWritePaper论文写作

博思AIPPT

潮际好麦

iTerms

SimilarWeb流量提升

Sora2视频免费生成

Transly

探索AI的无限可能

推荐工具精选

TRAE编程

扣子-AI办公

讯飞文书

商汤小浣熊

讯飞绘文

讯飞绘镜

iTerms

AI云服务特惠

火山引擎

阿里云

腾讯云

华为云

百度智能云

AWS

关注微信公众号