rather than to selected text" />

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

5 posts, 1 answers
  1. claudz
    claudz avatar
    39 posts
    Member since:
    Jul 2007

    Posted 02 Mar 2011 Link to this post

    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
  2. Answer
    Stanimir
    Admin
    Stanimir avatar
    1654 posts

    Posted 02 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. claudz
    claudz avatar
    39 posts
    Member since:
    Jul 2007

    Posted 02 Mar 2011 Link to this post

    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
  4. Stanimir
    Admin
    Stanimir avatar
    1654 posts

    Posted 03 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  5. claudz
    claudz avatar
    39 posts
    Member since:
    Jul 2007

    Posted 07 Mar 2011 Link to this post

    Hi Stanimir,

    Thanks for the screencast. That was a big help. 

    The class styles are working correctly now :)

    Claudz
Back to Top