Minimal Rich Text Editor In JavaScript – Panagram.js

Panagram.js is a super light and easy-to-implement JavaScript plugin lets you create a minimal clean WYSIWYG rich text editor on the webapp or CMS.

How to use it:

Insert the stylesheet ‘Panagram.css’ and JavaScript ‘Panagram.js’ into the document.

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

Create a DIV element to place the editor controls.

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

Create another DIV for the output area.

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

Initialize the Panagram.js editor and done.

Panagram.init({
  controls: 'defaultControls',
  ctrElement: document.getElementById('controls'),
  outElement: document.getElementById('output')
});

All default controls. Feel free to add/remove the controls as displayed below.

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