BuyLog In
Example T109859
Visible to All Users

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.

JavaScript
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.

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

Finally, find the inserted image and change its attributes:

JavaScript
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

Example Code

Default.aspx 
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.ASPxHtmlEditor.v13.2, Version=13.2.15.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxHtmlEditor" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Web.v13.2, Version=13.2.15.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Web.ASPxSpellChecker.v13.2, Version=13.2.15.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxSpellChecker" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function OnCommandExecuted(s, e) {
            if (e.commandName == "insertimage") {
                var src = e.parameter.src;

                var allImages = s.GetDesignViewDocument().getElementsByTagName("img");
                var target;
                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';                          
                        }
                        break;
                    }
                }
            };
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <dx:ASPxHtmlEditor ID="ASPxHtmlEditor1" runat="server">
            <ClientSideEvents CommandExecuted="OnCommandExecuted" />
        </dx:ASPxHtmlEditor>
    </form>
</body>
</html>
Default.aspx.cs(vb) 
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default: System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {

    }
}

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.