Wysihtml5 Editor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/css/uikit.min.css">
<script src="https://rawgit.com/Voog/wysihtml/master/dist/wysihtml-toolbar.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.9.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.9.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.9.0/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.9.0/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://rawgit.com/ZeGregg/wysihtml-master/7358423bdb113582d71f433647776c74b111c363/parser_rules/advanced_and_extended.js"></script>
<div id="toolbar" class="toolbar" data-uk-sticky>
  <div class="uk-button-group">
    <div class="uk-button-dropdown" data-uk-dropdown="{hoverDelayIdle:0}">
      <button class="uk-button test"><i class="uk-icon-bold"></i></button>
      <div class="uk-dropdown uk-dropdown-small uk-dropdown-bottom">
        <ul class="uk-nav uk-nav-dropdown">
          <li><a class="uk-button" data-wysihtml5-command="bold" title="CTRL+B"><i class="uk-icon-bold"></i></a></li>
          <li><a class="uk-button" data-wysihtml5-command="italic" title="CTRL+I"><i class="uk-icon-italic"></i></a></li>
          <li><a class="uk-button" data-wysihtml5-command="strikethrough" title="CTRL+U"><i class="uk-icon-strikethrough"></i></a></li>
          <li><a class="uk-button" data-wysihtml5-command="underline" title="CTRL+U"><i class="uk-icon-underline"></i></a></li>
          <li><a class="uk-button" data-wysihtml5-command="superscript" title="Sup"><i class="uk-icon-superscript"></i></a></li>
          <li><a class="uk-button" data-wysihtml5-command="subscript" title="Sub"><i class="uk-icon-subscript"></i></a></li>
        </ul>
      </div>
    </div>
    <div...

CSS

body {
  margin: 1em;
}

::selection {
  opacity: 0.6;
  color: inherit;
}

#editor {
  outline: 1px solid;
}


/* UIKIT STYLES OVERRIDE */

.uk-dropdown {
  width: auto !important;
  /*opacity: .6;*/ 
  backgroud-color: red;  
}

.uk-dropdown-small {
  min-width: 50px;
}

.uk-button {
  min-height: 28px;
  padding: 0 8px;
}

em {color: initial}

/* COLOR STYLES */

.uk-color-set {
  font-size: 0;
  line-height: 0
}

.uk-color-set > * {
  display: inline-block;
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 1;
}

.uk-color-set > *:hover {
  cursor: pointer;
  outline: 1px solid #000;
  outline-offset: -1px;
  z-index: 2
}

uk-color-set > *.uk-selected-color::after {
    color: #ffffff;
    content: "\f00c";
    font-family: FontAwesome;
    font-size: 13px;
    font-weight: 400;
    line-height: 32px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
    cursor: default;
}

.uk-color-set > * > i {
    text-align: center;
    line-height: 32px;
    height: 32px;
    width: 32px;
    font-size: 13px;
    position: absolute;
    bottom: 0;
    cursor: default;
    left: 0;
}

code {
  background: #ddd;
  padding: 10px;
  white-space: pre;
  display: block;
  margin: 1em 0;
}


/* TABLE STYLE */

.wysihtml5-editor table {
  width: 100%;
  border-collapse: collapse;
}

.wysihtml5-editor table th,
.wysihtml5-editor table td {
  padding: 5px;
  vertical-align: middle;
  border: 1px solid #ddd;
}

.wysihtml5-editor table td.wysiwyg-tmp-selected-cell,
.wysihtml5-editor table th.wysiwyg-tmp-selected-cell {
  border: 1px double #1e88e5;
}


/* table selector */

.wysigrid {
  padding: 0;
  line-height: initial;
}

.wysigrid table {
  border-collapse: collapse;
  line-height: 0;
}

.wysigrid td {
  width: 16px;
  height: 16px;
  padding: 0;
  display: none;
}

.wysigrid td > span {
  width: 12px;
  height: 12px;
  border: 1px solid #dddddd;
  display: inline-block;
}

.wysigrid .hover {
  background:...

JavaScript

(function(wysihtml5) {
  var REG_EXP = /wysiwyg-font-family-.+/g;

  wysihtml5.commands.fontFamily = {
    exec: function(composer, command, v) {
      wysihtml5.commands.formatInline.exec(composer, command, {
        className: "wysiwyg-font-family-" + v,
        classRegExp: REG_EXP,
        toggle: true
      });
    },

    state: function(composer, command, v) {
      return wysihtml5.commands.formatInline.state(composer, command, {
        className: "wysiwyg-font-family-" + v
      });
    }
  };
})(wysihtml5);

Object.assign(wysihtml5ParserRules.type_definitions.text_formatting_object.classes, {
  'wysiwyg-font-family-impact': 1,
  'wysiwyg-font-family-verdana': 1
});


var editor = new wysihtml5.Editor(document.getElementById('editor'), {
    toolbar: document.getElementById('toolbar'),
    parserRules: wysihtml5ParserRules
  }),
  composer = editor.composer,
  cm; //code mirror


editor.on("interaction", function() {
  if (composer.commands.state('foreColorStyle')) {
    var value = composer.commands.stateValue('foreColorStyle');
    $('.uk-text-color .uk-selected-color').removeClass('uk-selected-color');
    if (value) {
      $('.uk-text-color > [data-wysihtml5-command-value="'+ value +'"]').addClass('uk-selected-color');
    }
  }
  if (composer.commands.state('bgColorStyle')) {
    var value = composer.commands.stateValue('bgColorStyle');
    $('.uk-background-color .uk-selected-color').removeClass('uk-selected-color');
    if (value) {
      $('.uk-background-color > [data-wysihtml5-command-value="'+ value +'"]').addClass('uk-selected-color');
    }
  }
});
$('.uk-text-color').children().last().click(function(){
    composer.commands.remove('foreColorStyle');
});
$('.uk-background-color').children().last().click(function(){
    composer.commands.remove('bgColorStyle');
});

editor.on("interaction", function() {
  console.log('e', composer.commands.state('createLink'));
  if (composer.commands.state('bgColorStyle')) {}
});
editor.on("tableselect",...