JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<br>
<br>
<br>
<div class="editor-container">
  <div class="rich-textarea-toolbar">
    <div id="editor1-toolbar"></div>
  </div>
  <div id="editor1"></div>
</div>
<div class="editor-container">
  <div class="rich-textarea-toolbar">
    <div id="editor2-toolbar"></div>
  </div>
  <div id="editor2"></div>
</div>

SCSS

.rich-textarea-toolbar {
  position: relative;
  > div {
    position: absolute;
    bottom: 0;
    z-index: 1000;
  }
}

.mce-content-body {
  border: 1px solid #ccc;
  margin-bottom: 1rem;
  min-height: 10rem;
}

JavaScript

tinymce.init({
  menubar: false,
  statusbar: false,
  fixed_toolbar: true,
  inline: true,
  fixed_toolbar_container: '#editor1-toolbar',
  selector: "#editor1",
  plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table contextmenu paste"
  ],
  toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

tinymce.init({
  menubar: false,
  statusbar: false,
  fixed_toolbar: true,
  inline: true,
  fixed_toolbar_container: '#editor2-toolbar',
  selector: "#editor2",
  plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table contextmenu paste"
  ],
  toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});