This example shows how to create a custom tool in Telerik Editor for ASP.NET MVC.

To define a custom tool use the Custom method:

<%= Html.Telerik().Editor()
        .Name("Editor")
        .Tools(tools => tools
                .Clear()
                .Custom(settings => settings.HtmlAttributes(new { @class = "t-html", onclick = "viewSource(event)" }))
        )
%>

You can then use the editor client-side API and modify the content.

<script type="text/javascript">
    var htmlSourcePopup;

    function viewSource(e) {
        e = $.Event(e);
        
        e.stopPropagation();
        e.preventDefault();
        
        var editor = $('#Editor').data('tEditor');
        var html = editor.value();

        if (!htmlSourcePopup) {
            htmlSourcePopup =
                $('<div class="html-view">' +
                        '<div class="textarea t-state-default"><textarea></textarea></div>' +
                        '<div class="t-button-wrapper">' + 
                            '<button id="htmlCancel" class="t-button">Cancel</button>' +
                            '<button id="htmlUpdate" class="t-button">Update</button>' +
                        '</div>' +
                    '</div>')
                .css('display', 'none')
                .tWindow({
                    title: 'View Generated HTML',
                    modal: true, 
                    resizable: false, 
                    draggable: true,
                    width: 700,
                    onLoad: function() {
                        var $popup = $(this);
                        $popup.find('.textarea')
                                .css('width', function() {
                                    return 700 - (this.offsetWidth - $(this).width());
                                })
                                .focus()
                                .end()
                                .find('#htmlCancel')
                                .click(function() {
                                    htmlSourcePopup.close();
                                })
                                .end()
                                .find('#htmlUpdate')
                                .click(function() {
                                    var value = $popup.find('textarea').val();
                                    editor.value(value);
                                    htmlSourcePopup.close();
                                });
                    },
                    onClose: function() {
                        editor.focus();
                    },
                    effects: $.telerik.fx.toggle.defaults()
            })
            .data('tWindow');
        }

        $(htmlSourcePopup.element).find('textarea').text(html);

        htmlSourcePopup.center().open();
        
</script>