How to run TinyMCE in jQuery modal dialog?

StackOverflow https://stackoverflow.com/questions/23221516

题

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

有帮助吗？

解决方案

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>

其他提示

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.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top