简体   繁体   English

ASP.NET CodeBehind无法识别TinyMCE Textarea更改

[英]TinyMCE Textarea Change Not Recognized by ASP.NET CodeBehind

I have several <asp:TextBox TextMode="MultiLine"> elements on a page. 我在页面上有几个<asp:TextBox TextMode="MultiLine">元素。 On load, I populate them (through the VB code behind), and then turn them into TinyMCE editors (through the jQuery TinyMCE plugin). 在加载时,我填充它们(通过后面的VB代码),然后将它们转换为TinyMCE编辑器(通过jQuery TinyMCE插件)。 Each text box also has a button associated with it, with the purpose of submitting the text back to the code behind for insertion into a database. 每个文本框还有一个与之关联的按钮,目的是将文本提交回后面的代码以插入数据库。

I discovered earlier that when the submit button is clicked, I have to "save" the contents of the editor to the text box, but that is not my problem. 我之前发现,当单击提交按钮时,我必须将编辑器的内容“保存”到文本框中,但这不是我的问题。 Even after I've done so, the edits are not showing up in the code behind. 即使在我这样做之后,编辑也没有出现在后面的代码中。

As I've mentioned, I'm using jQuery. 正如我所提到的,我正在使用jQuery。 Here is my click handler. 这是我的点击处理程序。 Keep in mind that all buttons are submit buttons in ASP.NET, hence the submit class: 请记住,所有按钮都是ASP.NET中的提交按钮,因此submit类:

$('input.submit').live('click', function() {
    tinyMCE.EditorManager.triggerSave();
});

So, when any submit button is clicked all tinyMCE editors have their save event triggered. 因此,当单击任何提交按钮时, 所有 tinyMCE编辑器都会触发其保存事件。 After this is executed, I have checked the value of the textarea I'm looking for, (again, through JavaScript) and it seems to have the edits (I'm using Chrome's Developer tools, and console.log): 执行完之后,我检查了我正在寻找的textarea的值,(再次,通过JavaScript),它似乎有编辑(我使用的是Chrome的开发人员工具和console.log):

console.log($(this).parent().find('textarea').val());

On the server side, though, I see none of the edits in the click handler for the submit button: 但是,在服务器端,我在提交按钮的单击处理程序中看不到任何编辑:

Dim paragraph As String = Me.myTextArea.Text
' Results in the original text, not the edited text

Other Notes: 其他说明:

  • Each editor is in its own update panel 每个编辑器都在自己的更新面板中
  • Due to the nature of the content being submitted (HTML), I've had to set EnableEventValidation="false" and ValidateRequest="false" (this is an internal application, and this recommendation came from a more experienced developer) 由于提交内容的性质(HTML),我不得不设置EnableEventValidation="false"ValidateRequest="false" (这是一个内部应用程序,这个建议来自一个更有经验的开发人员)
  • I'm fairly new to .NET, but this behavior just seems ridiculous to me. 我对.NET很新,但这种行为对我来说似乎很荒谬。 I must be missing something critical. 我必须遗漏一些关键的东西。

I've figured it out. 我已经明白了。

It was exactly what I suggested in my comment on the original question. 这正是我在对原始问题的评论中提出的建议。 The ASP.NET async postback was firing, sending the old text to the server. ASP.NET异步回发正在触发,将旧文本发送到服务器。 Then my onclick was firing, saving the new text to the textarea, and hitting my breakpoint (allowing me to see that the new text was, in fact, saved to the text area). 然后我的onclick正在触发,将新文本保存到textarea,然后点击我的断点(让我看到新文本实际上已保存到文本区域)。 After that, the server processed the (old) text, hitting my breakpoint in the VB. 之后,服务器处理(旧)文本,在VB中命中我的断点。

It seems that ASP.NET gets top priority in any onclick that happens, at least when using asynchronous means. 似乎ASP.NET在任何发生的onclick中都是最优先考虑的,至少在使用异步方式时。 This means that any custom click handlers added through javascript will fire after the ASP.NET click. 这意味着通过javascript添加的任何自定义点击处理程序将 ASP.NET单击触发。

This makes some amount of sense, given how JS processes multiple click handlers - it's a first-come-first-served sort of process. 考虑到JS如何处理多个点击处理程序,这有点意义 - 它是先到先服务的一种流程。

The solution, in my case, was to save the contents of the TinyMCE editor on change, rather than on the button click: 在我的例子中,解决方案是在更改时保存TinyMCE编辑器的内容,而不是按下按钮:

$(this).tinymce({
    script_url : '../scripts/tiny_mce.js',
    theme: 'advanced',
    plugins: 'save',
    theme_advanced_buttons1 : 'bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,image,link,unlink,|,fontsizeselect,forecolorpicker',
    theme_advanced_buttons2 : '',
    theme_advanced_buttons3 : '',
    content_css : '../css/landingpage-tinymce.css',
    onchange_callback: function(ed) {
        ed.save();
    }
});

Note the onchange_callback which saves the contents of the editor to the textarea. 请注意onchange_callback ,它将编辑器的内容保存到textarea。 This will save the contents any time the editor adds what they call an "undo level", which means any time the users changes something and moves the cursor, or any time the editor blurs, among other events. 这将在编辑器添加他们称之为“撤消级别”的任何时候保存内容,这意味着用户在任何时候改变某些内容并移动光标,或者编辑器在任何时候模糊,以及其他事件。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM