ASP.NET HTML Editor - Client-Side Selection (coming in v2010 vol 2)

ASP.NET Team Blog
26 August 2010

Check out this new client-side selection feature of our ASP.NET HTML Editor, the ASPxHtmlEditor:

ASP.NET Html Editor Client-Side Selection

The client-side selection feature of the ASPxHtmlEditor has been around for a while but was not exposed publicly until a handy suggestion came up. So the DevExpress ASP.NET team has improved and exposed these new client-side selection API.

The demo above shows the client-side selection with the new custom dropdown menu feature too. The dropdown menu changes the capitalization of the selected text using client-side Java-script:

// Event handler
function OnCustomCommand(s, e) {
    if (e.commandName == "ChangeCase")
// Change case functionality
function ChangeCase(value) {
    var selection = HtmlEditor.GetSelection();
    var selectedElements = selection.GetElements();
    var textNodes = findAllTextNodes(selectedElements);
    for (var i = 0; i < textNodes.length; i++) {
        switch (value) {
            case "capitalize":
                var sentenceEndExp = /\.+\s*$/;
                var emptyStringExp = /\s*/;
                var prevText = getPreviousText(textNodes[0]);
                var capitalizeFirstLetter = emptyStringExp.test(prevText) || sentenceEndExp.test(prevText);
                textNodes[i].nodeValue = capitalize(textNodes[i].nodeValue.toLowerCase(), capitalizeFirstLetter);
            case "lowercase":
                textNodes[i].nodeValue = textNodes[i].nodeValue.toLowerCase();
            case "uppercase":
                textNodes[i].nodeValue = textNodes[i].nodeValue.toUpperCase();
            case "camelize":
                textNodes[i].nodeValue = camelize(textNodes[i].nodeValue.toLowerCase());
    HtmlEditor.ExecuteCommand(ASPxClientCommandConsts.SAVESTATEUNDOREDOSTACK_COMMAND, null);
function findAllTextNodes(elements) {
    var nodes = [];
    if (elements) {
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].nodeType == 3)
                nodes = nodes.concat(findAllTextNodes(elements[i].childNodes));
    return nodes;
function getPreviousText(element) {
    var prevElement = element.previousSibling;
    return (prevElement && prevElement.nodeType == 3) ? getPreviousText(prevElement) + prevElement.nodeValue : "";
function capitalize(text, capitalizeFirstLetter) {
    var text = text.replace(/(\.|\?|\!)+\s+\S+/g, function (word) {
        return word.charAt(0) + " " + word.charAt(2).toUpperCase() + word.substring(3).toLowerCase();
    if (capitalizeFirstLetter)
        text = text.replace(/\S+/, function (word) {
            return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();
    return text;
function camelize(text) {
    return text.replace(/\S+/g, function (word) {
        return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();

This feature will be part of the DXperience v2010 vol 2 release later this year.

Follow MehulHarry on Twitter

DXperience? What's That?

DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now:

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.