JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
<div class="toolbar">
    <button data-command-name="bold">Bold</button>
    <button data-command-name="italic">Italic</button>
    <button data-command-name="undo">Undo</button>
    <button data-command-name="redo">Redo</button>
</div>
<div class="scribe" contentEditable="true"></div>
<textarea class="scribe-html" rows="15" readonly></textarea>
<button id="setContentBtn">Set Content</button>

CSS

.scribe {
    padding: 10px;
    border: 1px solid blue;
}

.scribe-html {
    width: 100%;
    height: 100px;
}

JavaScript

$('#setContentBtn').click(function() {
    scribe.setContent('<p>Keep on clicking, the more the easier they\'ll be to see. When you\'re satisfied, right click right here and Inspect</p>')
});

require({
  paths: {
    'scribe': 'http://guardian.github.io/scribe/bower_components/scribe/scribe',
    'scribe-plugin-sanitizer': 'http://guardian.github.io/scribe/bower_components/scribe-plugin-sanitizer/scribe-plugin-sanitizer',
    'scribe-plugin-toolbar': 'http://guardian.github.io/scribe/bower_components/scribe-plugin-toolbar/scribe-plugin-toolbar'
  }
}, [
  'scribe',
  'scribe-plugin-sanitizer',
  'scribe-plugin-toolbar'
], function (
  Scribe,
  scribePluginSanitizer,
  scribePluginToolbar
) {

  'use strict';

  var scribe = new Scribe(document.querySelector('.scribe'), { allowBlockElements: true });
  window.scribe = scribe;

  function updateHTML() {
    document.querySelector('.scribe-html').value = scribe.getHTML();
  }
    
  scribe.on('content-changed', updateHTML);
    
  /**
   * Plugins
   */

  scribe.use(scribePluginToolbar(document.querySelector('.toolbar')));
  // Formatters
  scribe.use(scribePluginSanitizer({
    tags: {
      p: {},
      br: {},
      b: {},
      strong: {},
      i: {},
      strike: {},
      blockquote: {},
      ol: {},
      ul: {},
      li: {},
      a: { href: true },
      h2: {},
      table: {},
      tr: {},
      td: {}
    }
  }));

  scribe.setContent('<p>I am the first para. I cannot be completely eliminated.</p><table> <tr><td>foo</td></tr> <tr><td>bar</td></tr> </table><p>I am a paragraph</p>');
});