<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script>
  <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <button class="btn btn-primary" id="btn-dialog">Open dialog</button>
  </body>

</html>
// Code goes here


$(function(){
  $("#btn-dialog").on("click", function(){
   var dialog = bootbox.dialog({
      title: 'Select',
      message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>',
      size: 'large',
      buttons: {
        cancel: {
          label: 'Cancel',
          className: 'btn-danger',
          callback: function() {
            return true
          }
        },
        select: {
          label: 'Save',
          className: 'btn-success',
          callback: function() {
           return true
          }
        }
      }
    });
    
    dialog.on("hidden.bs.modal", function() {
      console.log("hidden.bs.modal");
     tinymce.editors = [];
    });
    
    dialog.init(function() {
      var promise;
      $(document).on('focusin', function(e) {
        console.log("focusin", e);
        console.log($(e.target).closest(".mce-window").length);
        if (($(e.target).closest(".mce-window").length)) {
          return e.stopImmediatePropagation();
        }
      });
      
      promise = $.get("form.html");
      promise.done(function(data) {
         dialog.find('.bootbox-body').html(data);
      });
    });
   
  }
  );
});
/* Styles go here */

<style>
textarea {
	resize: none;
	min-height: 150px;
}

</style>

<form>
	<textarea id="value" name="block.value" class="form-control"></textarea>
</form>

<script>
    function destroyTinyMce() {
        tinymce.editors = [];
       
    }

    tinymce.init({
        selector: '#value',
        toolbar: 'undo redo | styleselect | bold italic | link image | codesample code',
        menubar: false,
        plugins: 'advlist autolink link image lists preview codesample code',


        branding: false,
        resize: false,


        codesample_languages: [
            {text: 'HTML/XML', value: 'markup'},
            {text: 'JavaScript', value: 'javascript'},
            {text: 'Java', value: 'java'},
            {text: 'Groovy', value: 'groovy'}
        ],

        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
        }

    });




</script>