Simple Extensible WYSIWYG Editor – ysEditor.js

Preview:

Description:

ysEditor.js is a simple, lightweight, extensible WYSIWYG editor for the web. You can customize the toolbar and editor buttons as per your needs.

How to use it:

Install the ysEditor.js with NPM.

# NPM
$ npm install yseditor --save

Import and initialize the editor.

import('./yseditor.js')
  .then(function () {
    var myEditor = new ysEditor();
  });

Create a DIV element where you want to generate the editor.

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

Possible options to customize the 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'
});

Predefined button options.

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'
  }
};

Add a custom button to the 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()

Changelog:

02/27/2023

• v0.1.1