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
2
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
0
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不喜欢这样的动作,编辑器实例会被扰乱,导致你的背景失去。
#1
2
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
0
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不喜欢这样的动作,编辑器实例会被扰乱,导致你的背景失去。