What I want to do is: If the user clicks on/is focusing a small textarea (one of many) a dialog window with the tinyMCE editor shall open. Well the only working example I found
One solution that works well, is if you initialize each field after the dialog has been opened. I would think that tinymce need the control to be not hidden and visible to initialize the focus/z-index properly.
So if you setup a dialog like this:
function openMyDialog() {
$("#dialog").dialog(
{
autoOpen: false,
width: 800,
height: 600,
modal: true,
resizable: false,
draggable: false,
close: function() {},
buttons:
{
"OK": function ()
{
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
}
function closeMyDialog() {
$("#dialog").dialog("close");
}
And then, once the dialog is open, then you can initialize the TinyMCE controls (repeat for each textarea control you need to, and use the ID of this textarea in the 'selector' option of the tinymce.init method)
tinymce.init({
selector: '#textarea_helloworld',
height: 250,
menubar: false,
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: '/css/tinymce.css',
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent('Hello World');
});
}
});
I hope this helps you to realize that your dialog must be initialized and open (visible) so that TinyMCE can properly initialize.