1

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

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

4

2 回答 2

2

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

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"));
于 2012-07-13T21:10:25.983 回答
0

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

于 2012-07-16T07:40:50.250 回答