wysiwyg-editor in jquery dialog is not working

Question

editor for a website. I tested some (tinyEditor, wysihtml5, jHTMLArea...). When I had only a textarea-element on my site it works. But when i create a jQuery dialog and want to put the editor in it its not working. I see all icons and buttons, but i cant write text into the editor. The problem is always the same. I am using jQuery 1.10.2. Has anybody the same problem or maybe a solution?

(I tested my website in chrome and firefox)

Here some code (jHtmlArea):

$('#dialogEditor').htmlarea({css: "/static/css/jHtmlArea.Editor.css"});//init

$(function () {
       $("#dialog").dialog({
           width: 420, autoOpen: false,
           open: function (evt, ui) {
               $("#dialogEditor").htmlarea();
           }
       });

   });


 function openDialog()
 {
   $('#dialog').dialog('open'); //open dialog
 }

HTML-code:

<!-- Dialog Beginn -->
<div id="dialog" title="Studie" >
    <center>
        <textarea id="dialogEditor" rows="10" style="width: 400px"></textarea>
    </center>
</div>
<!-- Dialog End -->

Answer 1

You need to only instantiate the editor once the text-area has been made visible. In your code you are instantiating it before the dialog has opened. Commenting out that makes it work.

function openDialog() {
    //$('#dialogEditor').htmlarea(); <-- Comment out this
    //$.ui.dialog.defaults.bgiframe = true;
    $(function () {
        $("#dialog").dialog({
            width: 420,
            autoOpen: false,
            open: function (evt, ui) {
                $("#dialogEditor").htmlarea();
            }
        });

    });
    $('#dialog').dialog('open');
}

http://jsfiddle.net/fNPvf/7585/