user2718671 user2718671 - 1 month ago 13
jQuery Question

How to run TinyMCE in jQuery modal dialog?

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

Answer

I have this code and it works.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="tinymce/jquery.tinymce.min.js"></script>
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){ 
$('#txapublicacion').tinymce({
           plugins:'link'
          });
//--------------------------------------
$("#lnk_mostrar_form").click(function(){
    $("#dv_formulario").dialog( "open" );
    return false;
  });
//--------------------------------------
$("#dv_formulario").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Buscar: function() {
                    $(this).dialog("close");
                },
                Cancelar: function() {
                    $(this).dialog( "close" );
                }
            },
            close: function() {

            }
        });
//------------------------------------- 
});
</script>
</head>
<body>
<a id="lnk_mostrar_form" href="">Formulario</a>
<div id="dv_formulario" title="Ejemplo">
<form id="frm_buscar">
 <textarea id="txapublicacion"></textarea>
</form>
</div>
</body>
</html>
Comments