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:

Showcase Your Apps on

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to and tell us which DevExpress products you currently use within your organization.
francesco randazzo
francesco randazzo


i need this feature as soon as possible.

When the dxExperience 2010 vol 2 will be released (more or less)

thank you


18 November 2010
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)


Thanks, the DXperience v2010 volume 2 RC is available now in your client center account (if you have a DXperience subscription level license):

18 November 2010

Please login or register to post comments.