Semantic UI Modal TinyMCE

Fiddle to show the problem with trying to use TinyMCE inside the Semantic UI modal

by mpauly

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://semantic-ui.com/dist/semantic.js"></script>
<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<div class="ui container segment">

  <div>Here's a TinyMCE editor outside of a modal. Out here you can click inside the editor and do stuff without problem.</div>
  <div class="ui divider"></div>
  <textarea id="outside-mce"></textarea>
  <button id="open-modal-button" class="ui blue button">
    Open modal
  </button>
  
  <div id="mce-modal" class="ui long modal">
     <div class="header">
       Example
     </div>
     <div class="content">
       <div>And here's one inside the modal. If you don't have the 'detachable: false' option set on the modal you can't click inside the editor, but with the option set you should be fine.</div>
       <div class="ui divider"></div>
       <textarea id="inside-mce"></textarea>
     </div>
     <div class="actions">
       <button class="ui red cancel right labeled icon button">Cancel<i class="ui cancel icon"></i></button>
       <button class="ui green ok right labeled icon button">Okay<i class="ui checkmark icon"></i></button>
     </div>
  </div>
</div>

CSS

body {
    padding: 1em;
}

JavaScript

$(document).ready(function() {
       tinymce.init({
            selector: "#outside-mce",
            height: 200,
            menubar: true,
            plugins: [
              "advlist autolink lists link image charmap print preview anchor",
              "searchreplace visualblocks code fullscreen",
              "insertdatetime media table contextmenu paste code"
            ],
            toolbar: "undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
            content_css: '//www.tinymce.com/css/codepen.min.css'
        });
        
        tinymce.init({
            selector: "#inside-mce",
            height: 200,
            menubar: true,
            plugins: [
              "advlist autolink lists link image charmap print preview anchor",
              "searchreplace visualblocks code fullscreen",
              "insertdatetime media table contextmenu paste code"
            ],
            toolbar: "undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
            content_css: '//www.tinymce.com/css/codepen.min.css'
        });
        
        $("#mce-modal").modal({
        		closable: false,
            detachable: false,
            onDeny: function () { },
            onApprove: function() { }
        });
        
        $("#open-modal-button").on("click", function() {
						$("#mce-modal").modal("show");
				});
});