Html Editor for ASP.NET Web Forms - How to change image's attributes when inserting images with ImageSelector

This example demonstrates how to use ASPxClientHtmlEditor.CommandExecuted event to change an image's attributes when inserting an image with the Image Selector.

Overview

Use the event's commandName argument property to determine if the image was inserted with the Image selector and the parameter argument property to get information about image's source.

function OnCommandExecuted(s, e) {
    if (e.commandName == "insertimage") {
        var src = e.parameter.src;
    }
}

Call the editor's client-side GetDesignViewDocument method to get the document object inside the editor. Then call the getElementsByTagName method to find all images.

var allImages = s.GetDesignViewDocument().getElementsByTagName("img");

Finally, find the inserted image and change its attributes:

for (var i = 0, max = allImages.length; i < max; i++) {
    if (allImages[i].src.replace(/^(?:\/\/|[^\/]+)*\//, "/") == src.replace(/^(?:\/\/|[^\/]+)*\//, "/")) {
        target = allImages[i];
        if (target) {
            target.style.border = '2px solid red';
            // add your attributes here
        }
        break;
    }
}

Files to Review

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)