HtmlEditorExtender控件中的自定义按钮？

Question

我迫切需要帮助。

我需要为HtmlEditorExtender控件添加一个自定义按钮，但我缺乏实际操作的专有技术。

我在整个论坛中搜索过，但没有任何相关信息。

如果有人帮助我，我需要一个例子帮助我解决这个问题。

提前致谢。

Answer 1

一种可能性是使用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;
}

按钮的外观当然取决于您，但结果可能如下所示：

HtmlEditorExtender with custom button http://i57.tinypic.com/315kda9.png

最后，要添加功能，请将click事件添加到具有您指定的类的元素。您可以在外部.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());
})

可能有一种更有效的方式来获取设计视图，但它会起作用。