ASPDotNetStorefront WYSIWYG Editor Styles

Est. Reading Time: 1 minute

Ever try to get the WYSIWYG editor styles to match up to the actual site in ASPDotNetStorefront?  Basically so that the site styles show within the editor as they would on the actual page. Links would be the same color and paragraphs would have the same padding/font size and so on.   With a lot of research and about an hour of aimlessly editing different style sheets I finally found a working solution.  You have to add the style sheet location to an XML config file.

The file to edit is located at \RadControls\Editor\ConfigFile.xml and the lines to edit will be at the very bottom.

Change this….

To something more like this…


***UPDATE: the above is for AspDotNetStorefront 8 for AspDotNetStorefront MS (9) see below:


By default, the RAD editor will just use whatever styles are available to that page, meaning the main skin CSS file. If you want to change to use another stylesheet again, you’ll have to do some code mods.
You’d need to edit the file where the RAD editor is added to the page (for example, entityEditProduct.aspx) and find the telerik:radeditor invocation, then add a CssFiles node like this:
<telerik:EditorCssFile Value="~/App_Themes/Skin_1/test.css" />