RadEditor FormatCodeBlock CSS issue

[Steven]

When using the FormatCodeBlock in the RadEditor the code keywords are rendered blue or red etc.., the non colored code is rendered with the color that is defined in my body css instead of its own style.

My default color set in my body css is light and since the codeblock renders a light background and uses my body color instead of its own color like the red and blue keywords it is hardly readable. Can I override this in an easy way? I want the regular code to be black instead of take over my body css color.

Are you aware of this and is there coming a fix in the next release of the RadEditor so it uses its own style instead of take over the body style?

I am using the RadEditor with DotNetNuke 4.8.4

[Rumen]

Hi Steven,

By default, RadEditor copies the styles from the parent page in which it resides in order to display its content identically to the content on the parent page. In some scenarios this is not convenient in some scenarios like yours.

The solution is setting the CssFiles property to point to an external css file and manually specify the classes that you want to load in the editor. By setting the CssFiles property you will prevent the editor to pick up the styles from the parent page.

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steven]

Thanks alot. I'll try that.

[Steven]

Hi,

I began finishing the radEditor part today.
However I am not sure where to set the CssFiles property and which Style I should use exactly.

Here is my case: page black background, light text.
The text entered in the radEditor should remain light when posted.
Only the code rendered by the CodeBlock button that has not have a specific style like the red and blue keywords should be black instead of the light color that is now inherited from its parent.

I use the DNN radEditorprovider. So I don't have any radEditors in code where I can set the CssFiles property on my page, I use the dnnEditors in my page which load the radEditor because the radEditor is set in my web.config as the default editor provider. Since the other non code block text should remain to inherit its parents lighter color and I only want the code in black as mentioned above I don't know wich element to give the black css style so it will only overwrite the codeblock rendered code.

So basically I want to know where to set the CssFiles property and which element I need to give a black font.

Thanks in advance for your support.

[Rumen]

Hi Steven,

Please see bellow how to set the CssFiles property:

1. Open the DNN\Website\DesktopModules\TelerikWebUI\RadEditorProvider folder and create your custom CSS file to be applied to the editor's content area e.g.
   EditorContentArea.css
   
   body
   {
      background-color: red;
   }
    
2. Next open the DNN\Website\DesktopModules\TelerikWebUI\RadEditorProvider\ToolsFile.xml and add the desired CSS file to the CSSFiles collection:
   

   <root>
     <tools>
       ......
     </tools>
   
     <cssFiles>
      <item name="~/DesktopModules/TelerikWebUI/RadEditorProvider/EditorContentArea.css" />
     </cssFiles>
   
   </root>
   

   Make sure that the file can be accessed.
    
3. Clear the browser's cache and test the behavior

For convenience, I attached here a sample video that demonstrates my test. I hope this helps.

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steven]

Thanks alot for the detailed explanation. That works fine.

However I might not have been clear enough in my previous post.
I made an image that shows which style exactly I need to overwrite:

http://www.delta-visions.net/shares/TelerikTempImage.jpg

[Rumen]

Hi Steven,

The Format Code Block tool is an open source tool and it is not our implementation. Unfortunately, its code is embedded in one of the editor's js files and currently it is not possible to modify it.

By default, all RadEditor dialogs are embedded as resource files in the Telerik.Web.UI.dll file, which makes their customization harder. In order to provide an easy way to modify the editor's dialogs, the RadControls installation offers an extra folder named EditorDialogs which contains the dialogs' ascx files. You can find more information here.

We plan to add the FormatCodeBlock open source code in the external FormatCodeBlock.ascx file, which will allow its customization and help you to achieve your scenario. The Format Code block open source code will appear most likely in the Q3 2008 release of RadControls for ASP.NET AJAX.


Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steven]

Thanks alot. I will wait for the Q3 update.

I was wondering if the FormatCodeBlock is based on http://code.google.com/p/syntaxhighlighter/ ?
I see with their current version when I inspect the source code they have a class pln for the "non formatten/regular" text. so instead of each span having a style set as in the version of the radEditor FormatCodeBlock(using 2008.2723; going to be updating soon), each span has a class set in the latest version of syntaxhighlighter. if the option to edit this css would be available that would be great. Is this an option we can expect in Q3?

Thanks alot for the help.

[Tervel]

Hi Steven,

We did move the code coloriser for the FormatCodeBlock dialog into the dialog .ascx itself - so it will be possible to modify by developers (or even replace it with a completely different coloriser).

The coming Futures release (the beta for the Q3) will feature the change. The Futures will be released later this week and you could give it a try.


All the best,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steven]

Cool, thank you.

[Ryno]

I'm also using the RadEditor as a provider in a DotNetNuke 4.8.1 site.  I followed these instructions and created the .css file and pointed to it.  What changed was the actual text display in the RadEditor did change (for me I was changing the font-size property) but when I click "update" to publish the content (either to a Text/HTML module or to a forum post) the sizing does NOT make it to the module text.  It still shows small text.

If, however, in the RadEditor I select text and then use the toolbar to change the font size it will change the font size in the RadEditor (although the toolbar will still show 16px selected no matter what) and when I click "update" it will actually change the font size.

So it seems to me the .css is setting the font size display in the RadEditor but is not changing the HTML of the RadEditor so it's not actually changing the size of the font.  Is there a way to change the default font-size the RadEditor produces so that my forum posters don't always post their content in small fonts that are hard to read?

EDIT:  I just realize this is by design.  The default.css of the DotNetNuke portal will specify font and size if not specified by the Rad Editor.