TinyMCE编辑器在jQueryUI对话框中

I have an ASP.NET databound textbox inside a FormView, which I want to display in a jQuery UI dialog with the TinyMCE editor attached to it. I've got it displaying correctly with the editor attached

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

but when the form is posted back (to be saved to a database), the text inside the editor is lost and does not get posted.

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

This is the markup of the <div> I'm using for the dialog:

这是我用于对话框的

的标记：

<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>

and the Javascript I'm using to initialise the dialog and editor, and then actually display it when the <span> is clicked:

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

$('#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"
});

Can anyone suggest what I might be doing wrong to explain why I'm losing the text from the editor?

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

2 个解决方案

#1

There is actually two problems with the sample code you provided:

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

1) jQuery dialog actually moves the DOM element (the <div> of your dialog) out of the <form> tag on the rendered document (you can confirm that by looking at the source of the page once it is rendered)

1）jQuery对话框实际上将DOM元素（对话框的

）移出渲染文档的

标记（您可以通过查看页面的源来确认它）

Unless you move the <div> back inside the <form> you will loose the value of the controls inside the dialog on postback.

除非你将

移回

，否则你将在回发时松开对话框内控件的值。

To fix that, just add the following line of code after the .dialog function definition:

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

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

2) The "Save" button is rendered as a <span> which will not cause a postback when clicked. If you just want to trigger a postback, you can simply call form.submit() on the page's form.

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

You code would look something like that:

您的代码看起来像这样：

$('#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"));

#2

As solex already stated the div-element gets moved around the DOM. Tinymce doesn ot like such movements and the editor instance will get scrambled leading to the loosing of your context.

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