We are using the Editor as the WYSIWYG for our client CMS. I am trying to make the layout inside the Editor window look as close to the real site as possible, so I am using the <CssFiles> feature to include some CSS, and the <classes> feature in the toolset XML to add custom classes to the Apply CSS Class menu. However, when I try to add new classes or edit old ones in the toolset XML, they are not getting picked up by the editor when I refresh the page.
Here is the code I am using to pull in CSS files into the editor window:
Bootstrap.css is the framework styles, the fonts css is for webfont support, and editor2.css is to define the custom styles I want the client to see in the window.
Here is the code from the toolset XML:
The only one that is working is the "Lead Paragraph" style. The others do not appear in the dropdown no matter what I do. I have tried changing the name of the toolset file to force a recache; cleaning and rebuilding the solution; and of course, viewing the page in a new browser to bypass cache issues.
Is there some kind of syntax rule I'm not aware of? Or limitations to the style sheets that can be added to the editor window using the <CssFiles> feature?
Here is the code I am using to pull in CSS files into the editor window:
<CssFiles> <telerik:EditorCssFile Value="~/_EditorToolSets/bootstrap.css" />
<telerik:EditorCssFile Value="http://fast.fonts.net/cssapi/c02e6b72-e9dd-4ba0-a76c-bb710e27141a.css" /> <telerik:EditorCssFile Value="~/_EditorToolSets/editor2.css" /></CssFiles>Bootstrap.css is the framework styles, the fonts css is for webfont support, and editor2.css is to define the custom styles I want the client to see in the window.
Here is the code from the toolset XML:
<classes><class name="Lead Paragraph" value=".lead" /><class name="CAC Image" value=".cac-img" /><class name="CAC Button" value=".cac-btn" /></classes>The only one that is working is the "Lead Paragraph" style. The others do not appear in the dropdown no matter what I do. I have tried changing the name of the toolset file to force a recache; cleaning and rebuilding the solution; and of course, viewing the page in a new browser to bypass cache issues.
Is there some kind of syntax rule I'm not aware of? Or limitations to the style sheets that can be added to the editor window using the <CssFiles> feature?
3 Answers, 1 is accepted
0
Joshua
Top achievements
Rank 1
Rank 1
answered on 16 Jun 2014, 08:19 PM
It seems to be very tenacious about caching the CSS files that are declared in the Editor window. After making several changes to the editor2.css file I refreshed and inspected the editor window, and the version of the editor2.css file that is being loaded is not the most recent one. How can I force it to recache the CSS file?
0
Joshua
Top achievements
Rank 1
Rank 1
answered on 16 Jun 2014, 08:37 PM
It is DEFINITELY a CSS caching issue. I copied all my styles from editor2.css to a new CSS file and changed the declaration in the <CssFiles> block to that new file, and my classes appeared in the dropdown.
My question still stands, though... how can I force the styles to refresh? I can't rename the stylesheet every time I want to add a new style.
My question still stands, though... how can I force the styles to refresh? I can't rename the stylesheet every time I want to add a new style.
0
Hi Joshua,
Caching of the CSS files is a matter related to the browser and not the RadEditor itself.
I suggest checking for appropriate techniques to clear the cache in these materials:
- http://forums.asp.net/t/891442.aspx?Stylesheet+CSS+Caching+in+Browsers
- http://stackoverflow.com/questions/11089089/preventing-caching-of-javascripts-and-css-while-developing
- http://stackoverflow.com/questions/12992717/how-to-prevent-css-caching-on-a-web-page
On a side note, you can always manually clear the cache of the browser via the browser menu or dev toolbar.
Regards,
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.