Minimalist WYSIWYG Editor – pell.js

Preview:

Description:

pell.js is a minimalist (~1kb minified+gziped) JavaScript library to create a simple, clean WYSIWYG Editor for your web project. Easy to customize via SASS and JavaScript.

How to use it:

Install and import the pell.js into your project.

$ npm install pell

import pell from 'pell'

Or directly include the following JS & CSS files on the html page.

<link rel="stylesheet" href="pell.min.css">
<script src="pell.min.js"></script>

Create a container element for the WYSIWYG Editor:

<div id="pell" class="pell"></div>

Initialize the WYSIWYG Editor and you’re done.

window.pell.init({
  root: 'pell'
})

If you want to output the text and/or html you typed in the editor:

<div id="text-output"></div>
<pre id="html-output"></pre>

window.pell.init({
  onChange: html => {
    document.getElementById('text-output').innerHTML = html
    document.getElementById('html-output').textContent = html
  },
  root: 'pell'
})

Override the default actions and CSS classes.

window.pell.init({
  actions: [
    'bold',
    { name: 'italic', icon: '☺', title: 'Zitalic' },
    'underline'
  ],
  classes: {
    actionbar: 'pell-actionbar',
    button: 'pell-button',
    editor: 'pell-editor'
  },
})

Customize the WYSIWYG editor in the SCSS.

$pell-actionbar-color: #FFF !default;
$pell-border-color: rgba(10, 10, 10, 0.1) !default;
$pell-border-radius: 5px !default;
$pell-border-style: solid !default;
$pell-border-width: 1px !default;
$pell-box-shadow: 0 2px 3px $pell-border-color, 0 0 0 1px $pell-border-color !default;
$pell-button-height: 30px !default;
$pell-button-width: 30px !default;
$pell-editor-height: 300px !default;
$pell-editor-padding: 10px !default;

Changelog:

v1.0.4 (10/07/2018)

• Fix variable scope bug.