Class styles are applying to the entire <p> rather than to selected text

[claudz]

Hi Telerik,

We've just upgraded to RadEditor version 5.8.6.0 on our development server and are using MOSS 2007 and IE8.

The issue that we are experiencing is that when wanting to apply a css class (from the Apply CSS Class dropdown box) to selected text, which could be one word for instance, the style applies to the entire paragraph rather than to the selected word.

We've set up our custom class styles by using an external CssEditor.css file which we point to in the ConfigFile.xml file using the "CssFiles" property.
We've also referenced the classes in the ToolsFile.xml, so that only the required classes appear in the drop-down.

RadEditor version 5.8.0.0 didn't have this problem, but version 5.8.6.0 does. I've also noticed it does this on the online demo version that you have on your site.
For example, go to http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx, highlight a word in one of the paragraphs, then click on the Apply CSS Class dropdown and select .redText. Notice how the entire paragraph turns red, not just the word. Is this normal behaviour now for RadEditor? If so, how do we get RadEditor to apply styles to selected text only?

Thanks,
Claudz

[Stanimir]

Hello claudz,

This problem will be fixed in the next release of the control. For now add the following code to the MOSSEdotirTools.js, which is located in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.8.6.0__1f131a624888eeed/Resources/ folder:

Telerik.Web.UI.Editor.CommandList.ApplyClass = function (commandName, editor, args)
{
    var toProceed = true;
    var newClassName = args.get_value();
    var contentWindow = editor.get_contentWindow();
    var editorDocument = editor.get_document();
    var genericCmd = new Telerik.Web.UI.Editor.GenericCommand(editor.getLocalizedString(commandName) + " [\"" + newClassName + "\"]", editor.get_contentWindow(), editor);
    var selectedElement = editor.getSelectedElement();
    var bUseSelectedElement = (!newClassName && !editor.getSelection().getHtml()) || (selectedElement && selectedElement.tagName == "UL");
    var parentElement = (bUseSelectedElement) ? selectedElement : Telerik.Web.UI.Editor.Utils.getFullySelectedElement(contentWindow);
    if (parentElement)
    {
        Telerik.Web.UI.Editor.Utils.setElementClassName(parentElement, newClassName);
        toProceed = false;
    }
    else if (!newClassName)//Clear formatting from the selection whatever it is
    {
        editorDocument.execCommand("RemoveFormat", false, null);
        toProceed = false;
    }
    if (toProceed)
    {
        var retVal = Telerik.Web.UI.Editor.CommandList._markEditorSelection(editor);
        var elementsToModify = retVal.markedElements;
        if (elementsToModify.length > 0)
        {
            for (var i = 0; i < elementsToModify.length; i++)
            {
                var element = elementsToModify[i];
                if (element.className && element.className != "Apple-style-span") continue;
                else element.className = newClassName;
            }
            if (!$telerik.isIE) Telerik.Web.UI.Editor.Utils.addElementsToSelection(editor.get_contentWindow(), elementsToModify);
        }
        else
        {
            Telerik.Web.UI.Editor.CommandList._completeEditorSelection(editor, "class='" + newClassName + "'");
        }
    }
    editor.executeCommand(genericCmd);
}

Regards,
Stanimir
the Telerik team

[claudz]

Thanks Stanimir,

Quick question... whereabouts in the MOSSEditorTools.js file do I need to place this code? I added the code to the file, but the issue didn't go away.

Thanks,
Claudz

[Stanimir]

Hi claudz,

I created a small video with my test: http://screencast.com/t/685kSeeJO. Tell me if I am doing anything wrong in it.


Best wishes,
Stanimir
the Telerik team

[claudz]

Hi Stanimir,

Thanks for the screencast. That was a big help. 

The class styles are working correctly now :)

Claudz