How to run TinyMCE in jQuery modal dialog?

后端未结

关注

 2  1880

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

相关标签:

2条回答

甜味超标

2021-01-23 16:30

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>

0 讨论(0)

星月不相逢

2021-01-23 16:38

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.

0 讨论(0)