Minimalista editor WYSIWYG-Pell. js

Vista prévia

Descripción

Pell. js es una biblioteca de JavaScript minimalista (~ 1Kb minified + GZIPed) para crear un editor WYSIWYG simple y limpio para su proyecto Web. Fácil de personalizar a través de SASS y JavaScript.

Funcionamiento

Instale e importe el Pell. js en su proyecto.

$ npm install pell

import pell from 'pell'

O directamente incluir los siguientes JS & archivos CSS en la página HTML.

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

Cree un elemento contenedor para el editor WYSIWYG:

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

Inicializa el editor WYSIWYG y ya está.

window.pell.init({

root: 'pell'
})

Si desea generar el texto y/o HTML que ha escrito en el 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'
})

Reemplace las acciones predeterminadas y las clases CSS.

window.pell.init({

actions: [


'bold',


{ name: 'italic', icon: '☺', title: 'Zitalic' },


'underline'

],

classes: {


actionbar: 'pell-actionbar',


button: 'pell-button',


editor: 'pell-editor'

},
})

Personalice el editor WYSIWYG en el 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;

Registro de cambios

v1.0.4 (10/07/2018)

• Corregir error de ámbito variable.