JSFiddle - React, Tailwind, and code Playground

Moving TinyMCE toolbar out of container

by tonytlwu

HTML

<script src="https://tinymce.cachefly.net/4.3/tinymce.min.js"></script>
<p>This demo moves TinyMCE's toolbar out of the original container.</p>
<hr />

<div id="device">
<textarea>Here's a bunch of content</textarea>
</div>

CSS

#device {
  width: 320px;
  height: 568px;
  box-sizing: content-box;
  padding: 60px 15px 80px;
  background-color: #d0d2d2;
  border-radius: 32px;
  margin: 20px auto;
}

#device > textarea {
  width: 100%;
  height: 100%;
}

#device > iframe {
  width: 100%;
  height: 100%;
}

JavaScript

tinymce.init({
  selector: 'textarea',
  menubar: false,
  statusbar: false,
  setup: function(ed) {
    ed.on('init', function(e) {
			setTimeout(function(){
        $('.mce-toolbar-grp').detach().insertBefore('#device');
      }, 0);
    });
  }
});