JSFiddle - React, Tailwind, and code Playground

by 80351

HTML

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<body>
  <div id = "outer">
    <div id = "inner">
       <div id = "textArea"></div>
    </div>
  </div>
</body>

CSS

body {
  width: 500px;
  height: 300px;
  position: fixed;
  background-color: orange;
}

#outer {
   width: 100%;
   height: 100%;
   position: absolute;
   background-color: red;
}

#inner {
   width: 100%;
   height: 83.5%; 
   top: 0%;
   position: relative;
   background-color: green;
   overflow: auto;
}

#textArea {
   position: absolute;
   width: 100%;
   height: 100%;
}

JavaScript

window.addEventListener("load", runExample);

function runExample() {
	/* After watching how the inner div resizes, please uncomment.
   var target = document.querySelector("#outer");
   var config = { attributes: true };
   var observer = new MutationObserver(resetEditorInstance);

   observer.observe(target, config);
   
   tinymce.init({
      selector: "#textArea",
      menubar: false,
      statusbar: false,
      browser_spellcheck: true,
      contextmenu: false,
      plugins: "textcolor link",
      font_formats: "Sans Serif = arial, helvetica, sans-serif;Serif = times new roman, serif;Fixed Width = monospace;Wide = arial black, sans-serif;Narrow = arial narrow, sans-serif;Comic Sans MS = comic sans ms, sans-serif;Garamond = garamond, serif;Georgia = georgia, serif;Tahoma = tahoma, sans-serif;Trebuchet MS = trebuchet ms, sans-serif;Verdana = verdana, sans-serif",
      toolbar: "fontselect | fontsizeselect | bold italic underline | forecolor | numlist bullist | alignleft aligncenter alignright alignjustify | outdent indent | link unlink | undo redo",
            
      theme_advanced_resizing: true,
      theme_advanced_resizing_use_cookie : false,
      
      setup: function(editor) {
         editor.on("init", function(){
            editor.theme.resizeTo(getInnerWidth(), getInnerHeight()); 
         });
      }       
   });
   */
   randomlyResizeOuterDiv();
}

function resetEditorInstance() {
  tinymce.EditorManager.execCommand('mceRemoveEditor', true, "textArea");
  tinymce.EditorManager.execCommand('mceAddEditor', true, "textArea");    
}

function getInnerWidth() {
  var inner = document.querySelector("#inner");
  return inner.clientWidth;
}

function getInnerHeight() {
  var inner = document.querySelector("#inner");
  // 72 seems to be roughly the toolbar height. However: 1.) It doesn't always work; 2.) Isn't there a way of doing this dynamically? 
  return inner.clientHeight - 72; 
}

function randomlyResizeOuterDiv() { 
  ...