Custom button in HtmlEditorExtender control?

Question

I'm in dire need of assistance.

I need to add a custom button to an HtmlEditorExtender control, but I'm lacking the know-how to actually do that.

I've searched throughout this forum but no information was relevant or whatsoever.

Should someone be so kind to help, I need an example to help me sort this issue out.

Thanks in advance.

Answer 1

One possibility is to add it to the DIV containing the buttons using javascript. I do it using jQuery.

If you inspect the DIV in Firefox, you'll notice that it has a class named 'ajax__html_editor_extender_buttoncontainer'. Knowing this class allows you to select the container and add your own custom button to it.

To do so, add the following jQuery script in the HTML below your 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>

To style the button, create images for it and add the following to your style sheet:

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

The appearance of your button is of course up to you, but the result may look something like this:

Finally, to add functionality, add a click event to elements that have the class you specified. You can do this in your external .js file.

If you want to access the html of the textbox, inside that click you will want to retrieve the html of the first of two divs that have the attribute contenteditable='true'. This is the design view of the HtmlEditorExtender.

Add the following to your .js file:

// 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());
})

There's probably a more efficient way to get the design view but it'll work.