ASP.NET CodeBehind 无法识别 TinyMCE 文本区域更改

Posted 2023-02-22

【中文标题】ASP.NET CodeBehind 无法识别 TinyMCE 文本区域更改

【英文标题】：TinyMCE Textarea Change Not Recognized by ASP.NET CodeBehind

【发布时间】：2011-05-14 14:02:54

【问题描述】：

我在一个页面上有几个<asp:TextBox TextMode="MultiLine"> 元素。在加载时，我填充它们（通过后面的 VB 代码），然后将它们变成 TinyMCE 编辑器（通过 jQuery TinyMCE 插件）。每个文本框还有一个与之关联的按钮，目的是将文本提交回后面的代码以插入数据库。

我之前发现，当点击提交按钮时，我必须将编辑器的内容“保存”到文本框中，但这不是我的问题。即使我这样做了，编辑也没有显示在后面的代码中。

正如我所提到的，我正在使用 jQuery。这是我的点击处理程序。请记住，所有按钮都是 ASP.NET 中的提交按钮，因此 submit 类：

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

因此，当点击任何提交按钮时，所有 tinyMCE 编辑器都会触发其保存事件。执行此操作后，我检查了我正在寻找的 textarea 的值（再次通过 javascript），它似乎进行了编辑（我正在使用 Chrome 的开发人员工具和 console.log）：

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

不过，在服务器端，我在提交按钮的单击处理程序中看不到任何编辑：

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

其他说明：

每个编辑器都在自己的更新面板中 由于所提交内容 (html) 的性质，我不得不设置 EnableEventValidation="false" 和 ValidateRequest="false"（这是一个内部应用程序，此建议来自更有经验的开发人员） 我对 .NET 还很陌生，但这种行为对我来说似乎很荒谬。我一定遗漏了一些重要的东西。

【问题讨论】：

如何将数据传输到服务器？

按钮使用OnCommand，带有适当的CommandName和CommandArgument，然后在代码隐藏中，我通过Me.myTextArea.Text访问数据。

我想我实际上已经弄清楚了这个问题，但我还没有测试我的理论。我认为OnCommand回发首先被执行（异步发送旧数据），然后我在JS中的断点被命中（所以我在调试器中看到编辑过的文本），然后我在VB中的断点被命中（所以我在 VB 调试器中看到了旧文本）。似乎是一个可靠的理论，但就像我说的，未经检验。

【参考方案1】：

我想通了。

这正是我在对原始问题的评论中所建议的。 ASP.NET 异步回发正在触发，将旧文本发送到服务器。然后我的 onclick 被触发，将新文本保存到 textarea，并点击我的断点（让我看到新文本实际上已保存到文本区域）。之后，服务器处理（旧）文本，在 VB 中命中我的断点。

似乎 ASP.NET 在发生的任何 onclick 中都获得了最高优先级，至少在使用异步方式时是这样。这意味着通过 javascript 添加的任何自定义点击处理程序都将在 ASP.NET 点击之后触发。

考虑到 JS 如何处理多个点击处理程序，这在一定程度上是有道理的——这是一种先到先得的过程。

就我而言，解决方案是在更改时保存 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();
    
);

注意onchange_callback，它将编辑器的内容保存到文本区域。这将在编辑器添加他们所谓的“撤消级别”的任何时候保存内容，这意味着任何时候用户更改某些内容并移动光标，或者任何时候编辑器模糊，以及其他事件。

【讨论】：

事实证明这不是全部 - 它并非在所有情况下都有效。我不知道问题是什么，但任何帮助将不胜感激。

原来我很笨——我的新错误是由于缺少If Not Page.IsPostBack ... End If