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
Then this is where I have my problem. I have decided I want all the text to just be Blue again so I:
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
In the attached image you can see the situation I created with the following steps: It is what Microsoft chose to use
- apply* Blue to "It is what Microsoft chose to use"
- apply Red to "Microsoft"
- 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:
- select all the text "It is what Microsoft chose to use"
- try to apply Blue
- 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
5 Answers, 1 is accepted
0
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
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.
0
Jonathan
Top achievements
Rank 1
Rank 1
answered on 18 May 2012, 02:21 PM
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
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
0
Accepted
Hi Jonathan,
You can clear the formatting programmatically before applying the class via the Apply Class tool using the following code:
Regards,
Rumen
the Telerik team
You can clear the formatting programmatically before applying the class via the Apply Class tool using the following code:
<html xmlns="http://www.w3.org/1999/xhtml"> <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.
0
Jonathan
Top achievements
Rank 1
Rank 1
answered on 18 May 2012, 04:21 PM
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!
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!
0
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
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.