Code in aspx page that contains editor:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
return;
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
return;
editor1.CssFiles.Add("~/editing.css");
//more stuff...
}
editing.css is in the root of the site and has this in it:
h1 {color:red;}
Unfortunately this has no effect on the paragraphs dropdown, where "Heading 1" appears with default style. Applying H1 to a random text in the editor also has no expected effect.
Is "~/editing.css" supposed to be accessed by code serverside or clientside? Firebug shows me no requests to this file...
4 Answers, 1 is accepted
0
Hi Ilia,
The CssFiles property will only apply the classes placed in the editing.css to the content area of RadEditor. This means that if you have h1 {color:red;} class in the editing.css file and apply a <h1> from the FormatBlock dropdown to some content, then the content will become red with h1 formatting.
If you want to display the FormatBlock Heading 1 item with red color and <h1> appearance do the following:
<telerik:radeditor runat="server" ID="RadEditor1" >
<Paragraphs>
<telerik:EditorParagraph Title="Clear Formatting" Tag="<body>" />
<telerik:EditorParagraph Title="<h1 style='color:red'>Heading 1<h1>" Tag="<H1>" />
</Paragraphs>
</telerik:radeditor>
For your convenience I have attached a video demonstrating the whole solution.
All the best,
Rumen
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
The CssFiles property will only apply the classes placed in the editing.css to the content area of RadEditor. This means that if you have h1 {color:red;} class in the editing.css file and apply a <h1> from the FormatBlock dropdown to some content, then the content will become red with h1 formatting.
If you want to display the FormatBlock Heading 1 item with red color and <h1> appearance do the following:
<telerik:radeditor runat="server" ID="RadEditor1" >
<Paragraphs>
<telerik:EditorParagraph Title="Clear Formatting" Tag="<body>" />
<telerik:EditorParagraph Title="<h1 style='color:red'>Heading 1<h1>" Tag="<H1>" />
</Paragraphs>
</telerik:radeditor>
For your convenience I have attached a video demonstrating the whole solution.
All the best,
Rumen
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Ilia
Top achievements
Rank 1
Rank 1
answered on 21 Aug 2008, 02:43 PM
This wasn't exactly my point...
I guess there are two separate problems:
1) Is the one you described - that content stylesheet does not apply to the paragraphs dropdow. Your solution works, but only if I know upfront the content of the editing.css and can hardcode paragraphs, which in my case I can't... I used editing.css just as a simple example, but in reality that is a dynamic content that is generated by server side code, which I have no control over.
2) As I have mentioned in my first post - the {color:red;} would not apply to the content area at all. I.e. <h1> was generated but appeared as default black color. Since then I was able to find the reason this was happening. My code was:
I guess there are two separate problems:
1) Is the one you described - that content stylesheet does not apply to the paragraphs dropdow. Your solution works, but only if I know upfront the content of the editing.css and can hardcode paragraphs, which in my case I can't... I used editing.css just as a simple example, but in reality that is a dynamic content that is generated by server side code, which I have no control over.
2) As I have mentioned in my first post - the {color:red;} would not apply to the content area at all. I.e. <h1> was generated but appeared as default black color. Since then I was able to find the reason this was happening. My code was:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
return;
editor1.CssFiles.Add("~/editing.css");
editor1.ToolsFile = "<some tools file>";
}
So it looks like setting tools file overrides adding CSS files. Switching those two lines around fixed my problem.
I am unclear if this is a bug or intended behaviour.
0
Hi Ilia,
Thank you for the clarifications!
The new RadEditor for ASP.NET AJAX renders all dropdowns as parts of the page, which means that the page styles will apply to them. That is why the CssFiles property applies the classes from the external css file only to the editor's content area, but not to the editor's dropdowns (which are part of the parent page), because this operation will screw up the design of the page.
If you want the text in the paragraph dropdown list and in the editor content area to have the same style, you need to have the style defined in your page as well as the css file you are including in the editor.
For example:
<style>
h1
{
color: blue; font-size: 40px;
}
.rade_dropDownBody h1
{
color: red; font-size: 40px;
}
</style>
<h1>
This is a H1 on the page
</h1>
<telerik:RadEditor ID="RadEditor1" runat="server">
<CssFiles>
<telerik:EditorCssFile Value="~/test.css" />
</CssFiles>
<Content>
<h1>
This is a H1 inside the editor
</h1>
</Content>
</telerik:RadEditor>
and in the test.css file you have:
h1
{
color: red; font-size: 40px;
}
As you can see, the style "color: red; font-size: 40px; " is present both in the main page and in the test.css file. In the main page I use the rade_dropDownBody class to specify that the style should only be applied in the RadEditor dropdowns. The <H1> tag that is outside the editor will render blue, and the <H1> tag inside the editor as well as the one in the paragraph dropdown will render red.
The editor dropdown lists are part of the editor's parent page, so all styles from that page will also apply to them. Unfortunately, it is not practical to make each dropdown be on a separate page like the old RadEditor control. Due to the new editor architecture, this will increase the both the editor load time and the time it takes to open the dropdown itself.
The Apply class drop down uses a lot of custom code and logic to display the available classes from the editor content area. Note that it does not actually pick up the stylesheets, it only copies the style rules for the classes and applies them to the drop down items. This technique cannot be applied for global styles, which are the problematic ones in your scenario.
We understand that this is an important issue for you. If you depend on the functionality of the paragraph drop down, I suggest that you create your own custom drop down list with similar capabilities as described in the following article - Adding Custom Dropdowns.
Best regards,
Rumen
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Thank you for the clarifications!
The new RadEditor for ASP.NET AJAX renders all dropdowns as parts of the page, which means that the page styles will apply to them. That is why the CssFiles property applies the classes from the external css file only to the editor's content area, but not to the editor's dropdowns (which are part of the parent page), because this operation will screw up the design of the page.
If you want the text in the paragraph dropdown list and in the editor content area to have the same style, you need to have the style defined in your page as well as the css file you are including in the editor.
For example:
<style>
h1
{
color: blue; font-size: 40px;
}
.rade_dropDownBody h1
{
color: red; font-size: 40px;
}
</style>
<h1>
This is a H1 on the page
</h1>
<telerik:RadEditor ID="RadEditor1" runat="server">
<CssFiles>
<telerik:EditorCssFile Value="~/test.css" />
</CssFiles>
<Content>
<h1>
This is a H1 inside the editor
</h1>
</Content>
</telerik:RadEditor>
and in the test.css file you have:
h1
{
color: red; font-size: 40px;
}
As you can see, the style "color: red; font-size: 40px; " is present both in the main page and in the test.css file. In the main page I use the rade_dropDownBody class to specify that the style should only be applied in the RadEditor dropdowns. The <H1> tag that is outside the editor will render blue, and the <H1> tag inside the editor as well as the one in the paragraph dropdown will render red.
The editor dropdown lists are part of the editor's parent page, so all styles from that page will also apply to them. Unfortunately, it is not practical to make each dropdown be on a separate page like the old RadEditor control. Due to the new editor architecture, this will increase the both the editor load time and the time it takes to open the dropdown itself.
The Apply class drop down uses a lot of custom code and logic to display the available classes from the editor content area. Note that it does not actually pick up the stylesheets, it only copies the style rules for the classes and applies them to the drop down items. This technique cannot be applied for global styles, which are the problematic ones in your scenario.
We understand that this is an important issue for you. If you depend on the functionality of the paragraph drop down, I suggest that you create your own custom drop down list with similar capabilities as described in the following article - Adding Custom Dropdowns.
Best regards,
Rumen
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Steve Willer
Top achievements
Rank 1
Rank 1
answered on 25 Aug 2008, 01:13 PM
Thank you for you explanation. I think we can live with dropdown having default styles, as long as they are applied correctly in the editing area (which they do now, after I discovered unrelated problem in our code).