Editor: simple WYSIWYG-editor

wysiwyg.html

<!-- EXAMPLE: https://jsfiddle.net/ukjxhjv2/3/ -->

<div class="editor">
  <ul class="editor-toolbar">
    <li data-editor="bold" title="Жирный">
      <%- include('../../dist/svg/editor-bold.svg'); %>
    </li><!--
    --><li data-editor="italic" title="Курсив">
      <%- include('../../dist/svg/editor-italic.svg'); %>
    </li><!--
    --><li data-editor="underline" title="Подчеркивание">
      <%- include('../../dist/svg/editor-underline.svg'); %>
    </li><!--
    --><li data-editor="outdent" title="Убрать отступ">
      <%- include('../../dist/svg/editor-shift-left.svg'); %>
    </li><!--
    --><li data-editor="indent" title="Отступ слева">
      <%- include('../../dist/svg/editor-shift-right.svg'); %>
    </li><!--
    --><li data-editor="justifyleft" title="Выравнивание по левому краю">
      <%- include('../../dist/svg/editor-left.svg'); %>
    </li><!--
    --><li data-editor="justifycenter" title="Выравнивание по центру">
      <%- include('../../dist/svg/editor-center.svg'); %>
    </li><!--
    --><li data-editor="justifyright" title="Выравнивание по правому краю">
      <%- include('../../dist/svg/editor-right.svg'); %>
    </li><!--
    --><li data-editor="justifyfull" title="Выровнять по ширине">
      <%- include('../../dist/svg/editor-justify.svg'); %>
    </li><!--
    --><li data-editor="createLink" title="Создать ссылку">
      <%- include('../../dist/svg/editor-link.svg'); %>
    </li>
  </ul>
  <div class="editor-textarea" contenteditable="true"></div>
  <textarea name="text"></textarea>
</div>

wysiwyg.js

// WYSIWYG-редактор.
// getCommand — получаем нужную команду из data-editor аттрибута кнопки

var Editor = (function() {
  return {

    init: function() {
      this.cache();
    },

    cache: function() {
      this.toolbars = document.getElementsByClassName("editor-toolbar");

      if (this.toolbars) {
        this.buttons = [];
        var i;
        for (i=0; i < this.toolbars.length; i++) {
          var k;
          for (k=0; k < this.toolbars[i].children.length; k++) {
            this.buttons.push(this.toolbars[i].children[k])
          }
        }
        this.bindEvents();
      }
    },

    bindEvents: function() {
      var self = this;

      var i;
      for (i=0; i < this.buttons.length; i++) {
        this.buttons[i].addEventListener("click", function(e) {
          self.getCommand(this);
        });
      }

    },

    getCommand: function(but) {
      var command = but.getAttribute("data-editor");
      var editor = but.parentNode.parentNode;
      if (command && editor) {
        if (command === "createLink") {
          this.createLink(editor, command);
        } else {
          this.execCommand(editor, command);
        }

      }
    },

    execCommand: function(editor, command, options) {
      if (typeof options == undefined) {
        options = null;
      }
      editor.designMode = 'On';
      document.execCommand(command, false, options);
      editor.designMode = 'Off';
    },

    createLink: function(editor, command) {
      var link = prompt("Введите ссылку", "http://");
      this.execCommand(editor, command, link);
    }

  }
})();

wysiwyg.styl

.editor
  .editor-toolbar
    background #ecf0f1
    padding 1px
    li
      display inline-block
      text-align center
      user-select none
      height 29px
      width 34px
      padding-top 5px
      vertical-align top
      position relative
      &:hover
        cursor pointer
        background white
      &:nth-child(3),
      &:nth-child(5),
      &:nth-child(9)
        margin-right 9px
        &:after
          content ""
          position absolute
          height 100%
          width 1px
          background-color #d7e0e2
          top 0
          right -5px
      svg
        width 24px
        height 24px
  .editor-textarea
    height 211px
    width 100%
    border 1px solid #ecf0f1
    padding 10px
    outline none
    white-space pre-wrap
    overflow-y scroll
  textarea
    display none