JSFiddle - React, Tailwind, and code Playground

by robgallen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/3.5.8/tiny_mce.js"></script>
<div id="leftpanel">
  <form>
    <textarea id="editor" cols="50" rows="15">
      This is some content that will be editable with TinyMCE.
    </textarea>
  </form>
</div>
<div id="rightpanel">
  <div class="note">
    <p>Here is my <strong>first</strong> note</p>
  </div>
  <div class="note">
    <p>The quick brown <em>fox</em> jumped over the lazy dog</p>
  </div>
</div>
<button id="collapse">Collapse</button>

CSS

#leftpanel {
  float: left;
  margin-right: 2em;
}
#rightpanel {
  float: left;
}
.note {
  border: 1px solid #333;
  cursor: pointer;
  margin-bottom: 1em;
  padding: 0.3em;
}

JavaScript

$(document).ready(function() {
  tinymce.init({
    mode: "textareas",
    theme: "simple"
  });

  $("#rightpanel").on("click", ".note", function() {
   	var html = $(this).html();
  	tinymce.activeEditor.setContent(html);
  });
  
  $("#collapse").on("click", function() {
  	var leftpanel = $("#leftpanel");
  	if (leftpanel.is(":visible")) {
  		leftpanel.hide();
      $(this).text("Expand");
    } else {
    	leftpanel.show();
      $(this).text("Collapse");
    }
  });
});