Пользовательская кнопка в элементе управления HtmlEditorExtender?

Question

Я остро нуждаюсь в помощи.

Мне нужно добавить пользовательскую кнопку в элемент управления HtmlEditorExtender, но мне не хватает ноу-хау для этого.

Я искал по всему форуму, но никакой информации не было актуально или вообще.

Если кто-то будет так любезен, мне нужен пример, чтобы помочь мне разобраться в этом вопросе.

Заранее спасибо.

Answer 1

Одна возможность - добавить его в DIV, содержащий кнопки, используя javascript. Я делаю это с помощью jQuery.

Если вы проверите DIV в Firefox, вы заметите, что у него есть класс с именем "ajax__html_editor_extender_buttoncontainer". Знание этого класса позволяет вам выбрать контейнер и добавить в него свою собственную кнопку.

Для этого добавьте следующий скрипт jQuery в HTML ниже вашего 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;
}

Внешний вид вашей кнопки, конечно, зависит от вас, но результат может выглядеть примерно так:

http://i57.tinypic.com/315kda9.png

Наконец, чтобы добавить функциональность, добавьте событие click к элементам, которые имеют указанный класс. Вы можете сделать это в вашем внешнем файле.js.

Если вы хотите получить доступ к html текстового поля, внутри этого клика вы захотите получить html первого из двух div, которые имеют атрибут contenteditable='true'. Это представление дизайна 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());
})

Возможно, есть более эффективный способ получить представление о дизайне, но это сработает.