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 was this but I couldn't recreate it. No matter what I tried there was always an error like tinymce is not defined
or ReferenceError: event is not defined
. In that sourcecode I couldn't find anything about where the tinymce-library is imported.
I tried to initialize the library the normal way and also tried it the jQuery way:
$('#selector').tinymce({
script_url : 'tiny_mce/jquery_tiny_mce.js',
...
});
but there was always errors...
There were also missing themes in the current version. If anyone knows which jQuery, jQueryUI and TinyMCE version fit together to run an editor within a modal window please let me know.
Or maybe someone knows why the example of the link above doesn't work for me, please show me what is causing the error. Here is what I do:
Importing the libraries and css:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="tinymce/jquery.tinymce.min.js"></script> //tinymce_4.0.22_jquery
jQuery:
$(document).ready(function () {
// Prevent jQuery UI dialog from blocking focusin
$(document).on('focusin', function (e) {
if ($(event.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
// Open dialog and add tinymce to it
$('#open').click(function () {
$("#dialog").dialog({
width: 800,
modal: true
});
$('textarea').tinymce({
//script_url: 'tiny_mce2/tiny_mce.js',
toolbar: 'link',
plugins: 'link'
});
});
});
HTML:
<div id="dialog" title="TinyMCE dialog" style="display: none">
<textarea></textarea>
</div>
<button id="open" type="button">Open</button>
Following error occures: ReferenceError: event is not defined