Cannot change applied styles

6 posts, 1 answers
  1. Jonathan
    Jonathan avatar
    37 posts
    Member since:
    Sep 2012

    Posted 15 May 2012 Link to this post

    While testing I came across this issue where if a block of text has multiple styles/classes already applied to it and you try to reset them all to one common style - it doesn't work. I can recreate this issue in your demo: http://demos.telerik.com/aspnet-ajax/editor/examples/cssfiles/defaultcs.aspx 


     In the attached image you can see the situation I created with the following steps:  It is what Microsoft chose to use  

    1. apply* Blue to "It is what Microsoft chose to use"
    2. apply Red to "Microsoft"
    3. apply Green to "chose"

    Then this is where I have my problem. I have decided I want all the text to just be Blue again so I:
    1. select all the text "It is what Microsoft chose to use" 
    2. try to apply Blue
    3. no change!

    or also does nothing if I select only "Microsoft chose" and try to apply Blue style to remove both the red and green at the same time.

    It will work if I select text that has only 1 style involved such as only the word chose or only the word Microsoft - but it doesn't work if more then one style is involved.

    *apply using the Apply CSS Class dropdown list


  2.
  3. Rumen
    Admin
    Rumen avatar
    14417 posts

    Posted 18 May 2012 Link to this post

    Hi,

    The appropriate order of steps is to firstly clear the nested classes from the selected content by pressing the Clear Class item in the Apply Class dropdown and after that to apply the desired class over the cleared selection.

    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Jonathan
    Jonathan avatar
    37 posts
    Member since:
    Sep 2012

    Posted 18 May 2012 Link to this post

    Thanks for the reply. 

    While your suggestion of first clearing the class does work in this case - I suspect end-users will not think to do this. if we told them to do it chances are they won't remember. It is not consistent with how general text formatting works. If I do the same series of steps but instead using the foreground/background colors  - I don't have to first undo them before I can apply a new color on top replacing all the colors that were there. 

    Jonathan
  7. Answer
    Rumen
    Admin
    Rumen avatar
    14417 posts

    Posted 18 May 2012 Link to this post

    Hi Jonathan,

    You can clear the formatting programmatically before applying the class via the Apply Class tool using the following code:

        <head id="Head1" runat="server">
            <title></title>
            <style type="text/css">
                .redText { color: Red; }
                .greenText { color: Green; }
                .blueText { color: Blue; }
            </style>
        </head>
        <body>
            <form id="form1" runat="server">
                <asp:ScriptManager ID="Scriptmanager1" runat="server" />
                <telerik:RadEditor id="RadEditor1" runat="server" OnClientCommandExecuting="OnClientCommandExecuting">
                    <Content>dasdasdasdas dasdasdasdas dasdasdasdas
                    </Content>
                </telerik:RadEditor>
            <script type="text/javascript">
                function OnClientCommandExecuting(editor, args) {
                    if (args.get_commandName() == "ApplyClass") {
                        editor.get_document().execCommand("RemoveFormat", null, false);
                    }
                }
            </script>
            </form>
        </body>
    </html>


    Regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Jonathan
    Jonathan avatar
    37 posts
    Member since:
    Sep 2012

    Posted 18 May 2012 Link to this post

    Thanks for the reply - I think you missed posting part of your proposed solution though....
    I think you were going to suggest the same thing as you did here: http://www.telerik.com/community/forums/aspnet-ajax/editor/prevent-nested-span-styles-font-tags.aspx#2114993

    And this did help.

    Thanks!
  11. Rumen
    Admin
    Rumen avatar
    14417 posts

    Posted 19 May 2012 Link to this post

    You are welcome!

    For some reason the code snippet was stripped, but indeed, the solution is the same as in the other forum. Nevertheless, for your convenience I fixed the one in this thread.

    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top