TinyMCE编辑器在jQueryUI对话框中

Question

我在FormView中有一个ASP.NET数据绑定文本框，我希望在附带TinyMCE编辑器的jQuery UI对话框中显示该文本框。我已经用附带的编辑器正确显示了它

但是当回发表单（要保存到数据库）时，编辑器中的文本会丢失并且不会发布。

这是我用于对话的<div>标记：

<span id="ExcessiveDutyOfCareWordingDialogLink" style="cursor: hand;">View/Edit Wording</span>
<div id="ExcessiveDutyOfCareWordingDialog" title="Excessive Duty Of Care Wording">
    <asp:TextBox runat="server" ID="ExcessiveDutyOfCareWordingTextBox" 
    Text='<%# Bind("ExcessiveDutyOfCareWording") %>' CssClass="richText" ClientIDMode="Static" />
</div>

和我用来初始化对话框和编辑器的Javascript，然后在点击<span>时实际显示它：

$('#ExcessiveDutyOfCareWordingDialog').dialog({ autoOpen: false, height: 300, width: 400, modal: true, resizable: false, buttons: {
        Save: function ()
        {
            // This is from an earlier attempt to fix this problem
            // it may be a red herring
            tinyMCE.triggerSave();
            $(this).dialog("close");
        },
        Cancel: function ()
        {
            $(this).dialog("close");
        }
    }
});

$('#ExcessiveDutyOfCareWordingDialogLink').click(function () 
{
    $('#ExcessiveDutyOfCareWordingDialog').dialog('open'); return false; 
});

$('.richText').tinymce({
    // Location of TinyMCE script 
    script_url: '/Scripts/tinymce.3.4.5/tiny_mce.js',
    theme: "advanced",
    theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,cut,copy,paste,|,bullist,numlist,|,undo,redo",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    theme_advanced_buttons4: "",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    width: "100%",
    height: "20px"
});

任何人都可以建议我可能做错了解释为什么我从编辑器中丢失了文本？

Answer 1

您提供的示例代码实际上存在两个问题：

1）jQuery对话框实际上将DOM元素（对话框的<div>）移出渲染文档上的<form>标记（您可以通过查看页面的来源确认一次它被渲染）

除非您将<div>移回<form>内，否则您将在回发时松开对话框内控件的值。

要解决此问题，只需在.dialog函数定义后添加以下代码行：

$('#ExcessiveDutyOfCareWordingDialog').parent().appendTo($("form:first"));

2）“保存”按钮呈现为<span>，单击时不会导致回发。如果您只想触发回发，只需在页面表单上调用form.submit（）即可。

您的代码看起来像这样：

$('#ExcessiveDutyOfCareWordingDialog').dialog({
    autoOpen: false,
    height: 300,
    width: 400,
    modal: true,
    resizable: false,
    buttons: {
        Save: function () {
            $('form:first').submit();
            $(this).dialog("close");
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

$('#ExcessiveDutyOfCareWordingDialog').parent().appendTo($("form:first"));

Answer 2

正如solex已经说过的那样，div元素会在DOM周围移动。 Tinymce不喜欢这样的动作，编辑器实例会被扰乱，导致你的背景失去。