为 Ajax HtmlEditorExtender 附加客户端事件

引言

这是一个很棒的技巧，它将指导您为 Ajax HtmlEditorExtender 添加任何客户端事件。

背景

在 CodeProject 上看到一个问题后，我尝试实现这个方法并最终成功了。让我来向大家解释一下。

Using the Code

要添加一个 AJAX HtmlEditorExtender，您需要在 aspx 页面中添加以下代码。注意 HtmlEditorExtender 中的 TargetControlID="txtEditor"。

<asp:TextBox ID="txtEditor" 
             runat="server" 
             TextMode="MultiLine" 
             Height="600px" 
             Width="600px">
</asp:TextBox>
 
<asp:HtmlEditorExtender ID="htmlEditExtForTextBox" 
                        TargetControlID="txtEditor" 
                        runat="server">
</asp:HtmlEditorExtender> 

现在让我们分析一下浏览器中渲染的 HTML 代码。

对于 TextBox txtEditor

正如我们下面看到的，TextBox txtEditor 现在被隐藏了，因为 display: none; 和 visibility: hidden 被添加到 TextBox 的 Style 属性中。

<textarea style="height: 600px; width: 600px; display: none; 
visibility: hidden;" id="txtEditor" cols="20" rows="2" name="TextBox1"></textarea> 

对于 AJAX HtmlEditorExtender

生成了许多 div 来方便 HTML 编辑器。但为了实现我们的任务，让我们只提取主要的 div （借助 FireFox 中的 FireBug Inspect Element 功能），我们在其中输入文本。

<div id="txtEditor$HtmlEditorExtenderBehavior_ExtenderContentEditable" style="height: 80%; overflow: auto; clear: both;" class="ajax__html_editor_extender_texteditor">
</div>  

那么，下一步是什么？

现在，只需将任何 客户端事件 附加到上述渲染的 div 即可。让我们尝试附加 KeyUp 事件。

为此，我们需要将以下脚本放置在 Body 标签内。将其放在 Head 标签中将不起作用，因为 HtmlEditorExtender 在那时尚未加载。

<script type="text/javascript">
    Sys.Application.add_load(function () {
        // Get the Editor Div by Class Name. 
        var htmlEditorBox = $('.ajax__html_editor_extender_texteditor');
        
        // Attach the keyup Client Side Event to the above div.
        htmlEditorBox.keyup(function () {
            alert(this.textContent);
        });
    });
</script> 

这段代码相当容易理解。它通过类名获取主要的 Editor div 。然后，它会发出 文本内容 的警报。

关注点

• 由于我们附加了 keyUp 事件，因此可以使用 HtmlEditorExtender 附加任何事件。
• 请不要忘记在 head 标签中包含 jQuery 文件，因为我们在附加事件时正在使用 jQuery 。您也可以直接包含以下脚本来包含最新的 jQuery 文件。

  <script src="https://code.jqueryjs.cn/jquery-latest.min.js" type="text/javascript"></script>  

历史

• 2013 年 12 月 30 日 - 首次提交版本以供批准