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;
}

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

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

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