HtmlEditorExtender控件中的自定义按钮？

Question

我急需援助。

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

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

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

在此先感谢。

Answer 1

一种可能性是将它添加到包含使用JavaScript的按钮的DIV。我使用jQuery。

如果您检查Firefox中的DIV，您会注意到它有一个名为'ajax__html_editor_extender_buttoncontainer'的类。知道这个类允许你选择容器并添加你自己的自定义按钮。

要做到这一点，在HTML 下面添加以下jQuery脚本您HtmlEditorExtender：

<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

最后，要添加功能，请将单击事件添加到具有您指定的类的元素。您可以在外部.js文件中执行此操作。

如果您想要访问文本框的html，在该点击内部，您需要检索具有属性contenteditable ='true'的两个div中的第一个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()); 
}) 

有可能是一个更有效的方式来获得设计的看法，但它会工作。