Edit in JSFiddle

var InHuWysiwyg = (function (window) {

var addEL = function addEL(el, type, listener) {
  return el.addEventListener(type, listener);
};

var exec = function exec(command, val) {
  return document.execCommand(command, false, val);
};

var actions = [
  {
    icon: 'Para',
    ex: function ex() {
      return exec('formatBlock', '<p>');
    }
  },
  {
    icon: '<b>B</b>',
    state: 'bold',
    ex: function ex() {
      return exec('bold');
    }
  },
  {
    icon: '<i>I</i>',
    state: 'italic',
    ex: function ex() {
      return exec('italic');
    }
  },
  {
    icon: '<u>U</u>',
    state: 'underline',
    ex: function ex() {
      return exec('underline');
    }
  },
  {
    icon: '<strike>S</strike>',
    state: 'strikeThrough',
    ex: function ex() {
      return exec('strikeThrough');
    }
  },
  {
    icon: '<b>H1</b>',
    ex: function ex() {
      return exec('formatBlock', '<h1>');
    }
  },
  {
    icon: '<b>H2</b>',
    ex: function ex() {
      return exec('formatBlock', '<h2>');
    }
  },
  {
    icon: '<b>H3</b>',
    ex: function ex() {
      return exec('formatBlock', '<h3>');
    }
  },
  {
    icon: 'ol',
    ex: function ex() {
      return exec('insertOrderedList');
    }
  },
  {
    icon: 'ul',
    ex: function ex() {
      return exec('insertUnorderedList');
    }
  },
  {
    icon: '&#8220; &#8221;',
    ex: function ex() {
      return exec('formatBlock', '<blockquote>');
    }
  },
  {
    icon: '&lt;/&gt;',
    ex: function ex() {
      return exec('formatBlock', '<pre>');
    }
  },
  {
    icon: '&#8213;',
    ex: function ex() {
      return exec('insertHorizontalRule');
    }
  },
  {
    icon: '&#128279;',
    ex: function ex() {
      var url = window.prompt('Enter the link URL');
      if (url) exec('createLink', url);
    }
  },
  {
    icon: 'img',
    ex: function ex() {
      var url = window.prompt('Enter the image URL');
      if (url) exec('insertImage', url);
    }
  }
];

var init = function init(el) {
  
  var bar = document.createElement('div');
  bar.className = 'bar';
  el.appendChild(bar);

  var content = document.createElement('div');
  content.contentEditable = true;
  content.className = 'content';
  content.innerHTML = "<p>&nbsp;</p>";
  content.oninput = function () {
    console.log(content.innerHTML);
  };
  el.appendChild(content);

  actions.forEach(function (action) {
    var button = document.createElement('button');
    button.innerHTML = action.icon;
    button.onclick = function () {
      return action.ex() && content.focus();
    };

    if (action.state) {
      var handler = function handler() {
        var current = document.queryCommandState(action.state);
        return button.classList[current ? 'add' : 'remove']('active');
      };
      addEL(content, 'keyup', handler);
      addEL(content, 'mouseup', handler);
      addEL(button, 'click', handler);
    }

    bar.appendChild(button);
  });

  exec('defaultParagraphSeparator', 'p');
};

return {
    init: init
}
 
})(window);

InHuWysiwyg.init(document.querySelector('.editor'));

.content {
  border: 1px solid #666;
            }

.bar {
    font-size: 2rem; }

.bar>button {
  font-size: 1.7rem;  
  background-color: #fff;
  margin-left: 0.2rem;
  line-height: 2rem;
  min-width: 2rem;
}
.bar>button:focus{
    outline: 2px solid #333;
}
.bar>button.active {
  background-color: #ccc; }

<div class="editor">

</div>