Editor de texto enriquecido mínimo en JavaScript-Panagram. js

Vista prévia

Descripción

Panagram. js es un plugin de JavaScript súper ligero y fácil de implementar que le permite crear un mínimo limpio Editor de texto enriquecido WYSIWYG en la webapp o CMS.

Funcionamiento

Inserte la hoja de estilos ' Panagram. css ' y JavaScript ' Panagram. js ' en el documento.

<link rel="stylesheet" href="dist/Panagram.css">
<script src="dist/Panagram.js"></script>

Cree un elemento DIV para colocar los controles del editor.

<div id="controls"></div>

Cree otra DIV para el área de salida.

<div id="output"></div>

Inicialice el editor Panagram. js y listo.

Panagram.init({

controls: 'defaultControls',

ctrElement: document.getElementById('controls'),

outElement: document.getElementById('output')
});

Todos los controles predeterminados. Siéntase libre de agregar/quitar los controles como se muestra a continuación.

defaultControls: [{

icon: '<b>B</b>', //fixed matching in tag surrounding icon text.

title: 'Bold',

comName: 'bold',

state: true,

short: 'b'
}, {

icon: '<i>I</i>',

title: 'Italic',

comName: 'italic',

state: true,

short: 'i'
}, {

icon: '<u>U</u>',

title: 'Underline',

comName: 'underline',

state: true,

short: 'u'
}, {

icon: '<b>H<sub>1</sub></b>',

title: 'Heading 1',

comName: '<h1>',

formatBlock: 'formatBlock'
}, {

icon: '<b>H<sub>2</sub></b>',

title: 'Heading 2',

comName: '<h2>',

formatBlock: 'formatBlock'
}, {

icon: 'P',

title: 'Paragraph',

comName: '<p>',

formatBlock: 'formatBlock'
}, {

icon: '&#8220; &#8221;',

title: 'Quote',

comName: '<blockquote>',

formatBlock: 'formatBlock'
}, {

icon: '&#35;',

title: 'Ordered List',

comName: 'insertOrderedList',

state: true
}, {

icon: '&#8226;',

title: 'Unordered List',

comName: 'insertUnorderedList',

state: true
}, {

icon: '&#128279;',

title: 'Link',

comName: 'createLink',

extra: function extra() {


return window.prompt('Enter the link URL');

}
}, {

icon: '&#128247;',

title: 'Image',

comName: 'insertImage',

extra: function extra() {


return window.prompt('Enter the link URL');

}
}]