Simple extensible editor WYSIWYG-ysEditor. js

Vista prévia

Descripción

ysEditor. js es un editor WYSIWYG simple, ligero y extensible para la Web. Puede personalizar los botones de la barra de herramientas y del editor según sus necesidades.

Funcionamiento

Instale ysEditor. js con NPM.

# NPM
$ npm install yseditor --save

Importe e inicialice el editor.

import('./yseditor.js')

.then(function () {


var myEditor = new ysEditor();

});

Cree un elemento DIV donde desee generar el editor.

<div id="yseditor"></div>

Opciones posibles para personalizar el editor.

var myEditor = new ysEditor({


// Editor wrapper


wrapper: '#yseditor',



// Toolbar options


toolbar: [



'undo', 'redo', 'bold', 'italic', 'underline',



'strikethrough', 'h1', 'h2', 'h3', 'p', 'quote',



'left', 'center', 'right', 'justify',



'ol', 'ul', 'sub', 'sup',



'removeformat'],


bottom: false,



// Content options


height: 200,


scroll: false,


includeContent: true,



// Footer options


footer: true,


footerText: 'Created by Yusuf SEZER'
});

Opciones de botón predefinidas.

var predefinedButtons = {

'bold': {


title: 'Bold',


command: 'bold',


text: '<b>B</b>'

},

'italic': {


title: 'Italic',


command: 'italic',


text: '<i>I</i>'

},

'underline': {


title: 'Underline',


command: 'underline',


text: '<u>U</u>'

},

'strikethrough': {


title: 'Strike through',


command: 'strikeThrough',


text: '<strike>S</strike>'

},

'left': {


title: 'Align left',


command: 'justifyLeft',


text: 'Left'

},

'center': {


title: 'Align center',


command: 'justifyCenter',


text: 'Center'

},

'right': {


title: 'Align right',


command: 'justifyRight',


text: 'Right'

},

'justify': {


title: 'Align justify',


command: 'justifyFull',


text: 'Justify'

},

'sub': {


title: 'Subscript',


command: 'subscript',


text: 'X<sub>2</sub>'

},

'sup': {


title: 'Superscript',


command: 'superscript',


text: 'X<sup>2</sub>'

},

'ol': {


title: 'Ordered list',


command: 'insertOrderedList',


text: '<b>&#35;</b>'

},

'ul': {


title: 'Unordered list',


command: 'insertUnorderedList',


text: '<b>&#8226;</b>'

},

'removeformat': {


title: 'Clear formatting',


command: 'removeFormat',


text: 'CF'

},

'undo': {


title: 'Undo',


command: 'undo',


text: '&#8630;'

},

'redo': {


title: 'Redo',


command: 'redo',


text: '&#8631;'

},

'h1': {


title: 'Heading 1',


command: 'formatBlock',


text: 'H1',


value: 'h1'

},

'h2': {


title: 'Heading 2',


command: 'formatBlock',


text: 'H2',


value: 'h2'

},

'h3': {


title: 'Heading 3',


command: 'formatBlock',


text: 'H3',


value: 'h3'

},

'p': {


title: 'Paragraph',


command: 'formatBlock',


text: '&#182;',


value: 'p'

},

'quote': {


title: 'Quote',


command: 'formatBlock',


text: '&#10077;&#10078;',


value: 'blockquote'

}
};

Agregue un botón personalizado al editor.

myEditor.defineButton("name", {

command: "",

text: "",

title: "",

value: "",

callback: function(button, editor){}
});

API methods.

// gets the editor text
myEditor.getText()

// set the editor text
myEditor.setText()

// Gets the html content.
myEditor.getHTML()

// sets the html content
myEditor.setHTML()

// destroy the editor
myEditor.destroy()