<!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>