JSFiddle - React, Tailwind, and code Playground

by handsoncode

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.0/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.0/css/froala_style.min.css">
  <div id="editor">
    <div id='edit'>
       <blockquote>
    O Captain! My Captain! our fearful trip is done;
    <br> The ship has weather'd every rack, the prize we sought is won;
    <br> The port is near, the bells I hear, the people all exulting,
    <br> While follow eyes the steady keel, the vessel grim and daring:
    <br>
    <br> But O heart! heart! heart!
    <br> O the bleeding drops of red,
    <br> Where on the deck my Captain lies,
    <br> Fallen cold and dead.
    <br>
  </blockquote>
  <em>Walt Whitman</em>
    </div>
  </div>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.0//js/froala_editor.pkgd.min.js"></script>

CSS

body {
  padding: 0;
  margin: 0;
  background: #fff;
}
div#editor {
  margin: 1px;
  text-align: left;
  box-sizing: border-box;
}

JavaScript

$(function(){
  $.FroalaEditor.DefineIcon('imageInfo', {NAME: 'info'});
  $.FroalaEditor.RegisterCommand('imageInfo', {
    title: 'Info',
    focus: false,
    undo: false,
    refreshAfterCallback: false,
    callback: function () {
      var $img = this.image.get();
      alert($img.attr('src'));
    }
  });

  $('#edit').froalaEditor({
    imageEditButtons: ['imageDisplay', 'imageAlign', 'imageInfo', 'imageRemove']
  })
});