Minimalist WYSIWYG Rich Text Editor – SlimWhizzy

Preview:

Description:

SlimWhizzy is a super small (less than 1kb) JavaScript library which makes use of execCommand() to create a minimal, clean WYSIWYG Rich Text Editor for a content editable element.

How to use it:

Use an iconic font of your choice for the editor icons.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Create the toolbar for the WYSIWYG Rich Text Editor.

<div class="toolbar">
  <a href="#" data-command="bold" class="toolbar-button">
      <i class="fa fa-bold"></i>
  </a>
  <a href="#" data-command="italic" class="toolbar-button">
      <i class="fa fa-italic"></i>
  </a>
  <a href="#" data-command="underline" class="toolbar-button">
      <i class="fa fa-underline"></i>
  </a>
  <a href="#" data-command="strikethrough" class="toolbar-button">
      <i class="fa fa-strikethrough"></i>
  </a>
  <a href="#" data-command="justifyLeft" class="toolbar-button">
      <i class="fa fa-align-left"></i>
  </a>
  <a href="#" data-command="justifyCenter" class="toolbar-button">
      <i class="fa fa-align-center"></i>
  </a>
  <a href="#" data-command="justifyFull" class="toolbar-button">
      <i class="fa fa-align-justify"></i>
  </a>
  <a href="#" data-command="justifyRight" class="toolbar-button">
      <i class="fa fa-align-right"></i>
  </a>
  <a href="#" data-command="h1" class="toolbar-button">
      <strong>H1</strong>
  </a>
  <a href="#" data-command="h2" class="toolbar-button">
      <strong>H2</strong>
  </a>
  <a href="#" data-command="h3" class="toolbar-button">
      <strong>H3</strong>
  </a>
  <a href="#" data-command="h4" class="toolbar-button">
          <strong>H4</strong>
      </a>
  <a href="#" data-command="p" class="toolbar-button">
          <i class="fa fa-paragraph"></i>
  </a>
  <a href="#" data-command="insertorderedlist" class="toolbar-button">
      <i class="fa fa-list-ol"></i>
  </a>
  <a href="#" data-command="insertUnorderedList" class="toolbar-button">
      <i class="fa fa-list-ul"></i>
  </a>
  <a href="#" data-command="createlink" class="toolbar-button">
      <i class="fa fa-link"></i>
  </a>
  <a href="#" data-command="unlink" class="toolbar-button">
      <i class="fa fa-unlink"></i>
  </a>
  <a href="#" data-command="subscript" class="toolbar-button">
      <i class="fa fa-subscript"></i>
  </a>
  <a href="#" data-command="superscript" class="toolbar-button">
      <i class="fa fa-superscript"></i>
  </a>
  <a href="#" data-command="indent" class="toolbar-button">
      <i class="fa fa-indent"></i>
  </a>
  <a href="#" data-command="outdent" class="toolbar-button">
      <i class="fa fa-outdent"></i>
  </a>
  <a href="#" data-command="insertimage" class="toolbar-button">
      <i class="fa fa-image"></i>
  </a>
  <a href="#" data-command="undo" class="toolbar-button">
      <i class="fa fa-undo"></i>
  </a>
  <a href="#" data-command="redo" class="toolbar-button">
      <i class="fa fa-repeat"></i>
  </a>
</div>

Create a content editable element under the toolbar.

<div class="editor" contenteditable="true">
</div>

Wrap them into an editor container.

<div class="editor-box">
  ...
</div>

Import the minified version of the SlimWhizzy into the document.

<script src="src/SlimWhizzy.min.js"></script>

Initialize the WYSIWYG Rich Text Editor and done.

SlimWhizzy({
  _document: document,
  _window: window,
  btnClass: '.toolbar-button',
  editorSelector: '.editor'
});

The example CSS.

.editor-box {
  width: 35vw;
  border: 1px solid #D2D2D2;
  margin: 0 auto;
  background: #fff;
  border-collapse: block
}
.toolbar {
  background-color: #F5F5F5;
  display: grid;
  grid-template-columns: repeat(12, 8.33%);
  text-align: center
}
.toolbar-button {
  margin: 5px;
  text-decoration: none;
  color: #000
}
.editor {
  border: 1px solid #D2D2D2;
  min-height: 350px;
  padding: 2px
}
a > i >s .fa { font-size: 3em; }