jQueryUI 对话框中的 TinyMCE 编辑器答案

【问题标题】：TinyMCE Editor In a jQueryUI DialogjQueryUI 对话框中的 TinyMCE 编辑器
【发布时间】：2012-07-13 18:02:29
【问题描述】：

我在 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"
});

谁能建议我可能做错了什么来解释为什么我会从编辑器中丢失文本？

【问题讨论】：

标签： asp.net webforms tinymce jquery-ui-dialog formview

【解决方案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"));

【讨论】：

不知道对话框会这样移动 DOM 元素，额外的 appendto 修复了它:-) 我不希望对话框中的保存按钮回发表单，只需保存 TinyMCE 文本并关闭对话框。

【解决方案2】：

正如 solex 所述，div 元素在 DOM 中移动。 Tinymce 不喜欢这样的动作，编辑器实例会被打乱，导致你的上下文丢失。

【讨论】：