我急需帮助。
我需要将自定义按钮添加到 HtmlEditorExtender 控件,但我缺乏实际执行此操作的诀窍。
我已经在整个论坛中进行了搜索,但没有任何相关信息或任何信息。
如果有人这么好心帮忙,我需要一个例子来帮助我解决这个问题。
提前致谢。
我急需帮助。
我需要将自定义按钮添加到 HtmlEditorExtender 控件,但我缺乏实际执行此操作的诀窍。
我已经在整个论坛中进行了搜索,但没有任何相关信息或任何信息。
如果有人这么好心帮忙,我需要一个例子来帮助我解决这个问题。
提前致谢。
一种可能性是使用 javascript 将其添加到包含按钮的 DIV 中。我使用jQuery来做。
如果您在 Firefox 中检查 DIV,您会注意到它有一个名为“ajax__html_editor_extender_buttoncontainer”的类。了解此类允许您选择容器并向其添加您自己的自定义按钮。
为此,请在您的 HtmlEditorExtender下方的 HTML 中添加以下 jQuery 脚本:
<script language="javascript" type="text/javascript">
// retrieve button container div using its class
$btnContainer = $(".ajax__html_editor_extender_buttoncontainer");
if ($btnContainer.length == 1) {
// append your custom button to the collection of elements within the button container div
$btnContainer.append("<input id=\"HtmlEditorExtender_YourButtonName\" class=\"ajax__html_editor_extender_YourButtonName\" type=\"button\" name=\"YourButtonName\" title=\"YourButtonName\" style=\"width: 101px; height: 21px;\" unselectable=\"on\"></input>");
}
</script>
要为按钮设置样式,请为其创建图像并将以下内容添加到样式表中:
/* custom button */
.ajax__html_editor_extender_YourButtonName {
background: url('/images/YourButtonName_off.png') no-repeat scroll;
cursor: pointer;
display: block;
float: right; /* default is left */
border: medium none;
}
.ajax__html_editor_extender_YourButtonName:hover {
background: url('/images/YourButtonName_on.png') no-repeat scroll;
}
按钮的外观当然取决于您,但结果可能如下所示:
最后,要添加功能,请向具有您指定的类的元素添加单击事件。您可以在外部 .js 文件中执行此操作。
如果要访问文本框的 html,则在该单击中,您将要检索具有属性 contenteditable='true' 的两个 div 中的第一个的 html。这是 HtmlEditorExtender 的设计视图。
将以下内容添加到您的 .js 文件中:
// click event for the custom button
$("body").on("click", ".ajax__html_editor_extender_YourButtonName", function (e) {
var $editorDiv = $("div[contenteditable='true']").first();
alert($editorDiv.html());
})
可能有一种更有效的方法来获取设计视图,但它会起作用。