alexandru-dodon/pell

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

Comparisons (minified)

library	size (min+gzip)	size (min)	jquery	bootstrap
pell	1.5kB	5kB
medium-editor	27kB	105kB
quill	43kB	205kB
summernote	26kB	93kB	x	x
froala	52kB	186kB	x
tinymce	157kB	491kB	x
ckeditor	163kB	551kB	x

Features

Pure JavaScript, no dependencies, written in ES6
Easily customizable with the sass file (pell.scss) or overwrite the CSS

Current actions:

Bold
Italic
Underline
Strike-through
Heading 1
Heading 2
Paragraph
Quote
Ordered List
Unordered List
Code
Horizontal Rule
Link
Image
Undo
Redo

Other possible future actions:

Justify Center
Justify Full
Justify Left
Justify Right
Subscript
Superscript
Font Name
Font Size
Indent
Outdent
Clear Formatting

Browser Support

IE 9+
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-editor {
      background-color: pink;
    }
  </style>
</head>
<body>
  ...
  <!-- Bottom of body -->
  <script src="https://unpkg.com/pell"></script>
</body>

Usage

// ES6
import pell from 'pell'
// or
import { init } from 'pell'

// Browser
pell
// or
window.pell

Example:

<div id="pell"></div>
<div>
  Text output:
  <div id="text-output"></div>
  HTML output:
  <pre id="html-output"></pre>
</div>

pell.init({
  actions: [
    'bold',
    { name: 'italic', icon: '&#9786;', title: 'Zitalic' },
    'underline'
  ],
  classes: {
    actionbar: 'pell-actionbar',
    button: 'pell-button',
    editor: 'pell-editor'
  },
  onChange: html => {
    document.getElementById('text-output').innerHTML = html
    document.getElementById('html-output').textContent = html
  },
  root: 'pell'
})

Custom Styles

SCSS:

$pell-editor-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-editor {
  height: 400px;
}

License

MIT

About

📝 the simplest and smallest (1.5kB) WYSIWYG text editor for web, with no dependencies

https://jaredreich.com/pell

MIT License

Languages

Language:JavaScript 65.0%Language:HTML 19.9%Language:CSS 15.1%