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

Question

网站编辑。我测试了一些(tinyEditor、wysihtml5、jHTMLArea...)。当我的网站上只有一个文本区域元素时，它可以工作。但是当我创建一个 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/