Blogs

News

Email Subscriptions

Mehul Harry's DevExpress Blog

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

     

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")
        ChangeCase(e.parameter);
}
 
// 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);
                break;
            case "lowercase":
                textNodes[i].nodeValue = textNodes[i].nodeValue.toLowerCase();
                break;
            case "uppercase":
                textNodes[i].nodeValue = textNodes[i].nodeValue.toUpperCase();
                break;
            case "camelize":
                textNodes[i].nodeValue = camelize(textNodes[i].nodeValue.toLowerCase());
                break;
        }
    }
    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.push(elements[i]);
            else
                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: http://www.devexpress.com/Downloads/NET/

Published Aug 26 2010, 09:00 AM by Mehul Harry (DevExpress)
Bookmark and Share

Comments

 

francesco randazzo said:

HI,

i need this feature as soon as possible.

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

thank you

Francesco

November 18, 2010 4:09 AM
 

Mehul Harry (DevExpress) said:

Francesco,

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

www.devexpress.com/.../Downloads

November 18, 2010 1:23 PM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
More from DevExpress
Live Chat
Have a pre-sales question?
Need assistance with your evaluation?
We are here to help.
Chat is one of the many ways you can contact members of the DevExpress Team. We are available Monday-Friday between 8:30am and 5:00pm Pacific Time.
If you need additional product information, require pre-sales assistance, or want help with your order, write to us at info@devexpress.com or call us at
+1 (818) 844-3383.