jquery 对话框中的所见即所得编辑器不起作用

Question

网站编辑。我测试了一些（tinyEditor、wysihtml5、jHTMLArea ...）。当我的网站上只有一个 textarea-element 时，它可以工作。但是当我创建一个 jQuery 对话框并想将编辑器放入其中时，它不起作用。我看到所有图标和按钮，但我无法将文本写入编辑器。问题总是一样的。我正在使用 jQuery 1.10.2。 有没有人遇到同样的问题或者解决办法？

（我在 chrome 和 firefox 中测试了我的网站）

这里有一些代码（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 代码：

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

Answer 1

您只需要在文本区域可见后实例化编辑器。 在您的代码中，您在 dialog 打开之前实例化它。注释掉它就可以工作了。

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/