在开发Web应用程序时，经常需要为用户提供丰富的文本编辑功能。AjaxHtmlEditorExtender是一个强大的ASP.NET控件，它提供了一个类似于Word的文本编辑器。但是，有时希望增加一些自定义功能，比如改变编辑器的背景颜色。本文将介绍如何使用ColorPickerExtender组件来实现这一功能。
在之前的博文中，已经讨论了如何在AjaxHtmlEditorExtender中设置内容以及如何使用JavaScript。现在，需要找到显示HtmlEditorExtender数据的编辑面板，即div元素。然后，可以轻松地将ColorPickerExtender选择的颜色分配给该div。
<div contenteditable="true" id="txtEditorDemo$HtmlEditorExtenderBehavior_ExtenderContentEditable" style="height: 80%; overflow: auto; clear: both;" class="ajax__html_editor_extender_texteditor">
</div>
以上HTML代码定义了一个可编辑的div元素，它将显示HtmlEditorExtender的内容。
可以通过处理ColorPickerExtender的OnClientColorSelectionChanged事件来轻松获取选择的颜色。可以在该事件上调用一个JavaScript函数。以下是标记代码：
<asp:ColorPickerExtender runat="server" TargetControlID="txtSelectColor" SampleControlID="sampleBodyColor" PopupButtonID="txtSelectColor" OnClientColorSelectionChanged="colorChanged">
</asp:ColorPickerExtender>
JavaScript函数colorChanged()将显示选择的颜色。以下是JavaScript代码：
function colorChanged(sender) {
alert(sender.get_selectedColor());
}
当用户选择颜色时，这段代码会在弹出框中显示选择的颜色。
有两种方法可以实现这一功能：
首先，通过ID找到HtmlEditorExtender，然后将选择的颜色分配给其EditableDiv的背景颜色属性。以下是JavaScript代码：
var htmlEditorExtender = $find("<%= heeEditorDemo.ClientID %>");
htmlEditorExtender._editableDiv.style.backgroundColor = '#' + sender.get_selectedColor();
通过其类名ajax__html_editor_extender_texteditor获取HtmlEditorExtender，然后使用.css()方法设置其背景颜色。以下是JavaScript代码：
var htmlEditorExtender = $('.ajax__html_editor_extender_texteditor');
htmlEditorExtender.css('background-color', '#' + sender.get_selectedColor());