Hi,
I deployed RadEditor in our farm and defined a custom .css-file as default style sheet, excluding the HtmlEditorTableFormats.css and HtmlEditorCustomStyles.css (according to the instructions in the article http://www.telerik.com/support/kb/article/b454K-htb-b454T-cgg-b454c-cgg.aspx ).
This worked very well, except one problem:
When I access a website and try to modify it with RadEditor the text in a text field loses its formatting. Funny thing is that this happens only to single paragraphs, not in the whole text field.
The paragraph seems to lose the linking to the .css-class in the style sheet (ApplyClass-dropdown menu shows only "ApplyClass").
I can´t find a solution for this problem. The websites have been created before the installation of RadEditor, maybe there is a connection. The style sheet hasn´t changed though.
I would be very thankful for some help and suggestions.
Thanks and regards
Thorsten
I deployed RadEditor in our farm and defined a custom .css-file as default style sheet, excluding the HtmlEditorTableFormats.css and HtmlEditorCustomStyles.css (according to the instructions in the article http://www.telerik.com/support/kb/article/b454K-htb-b454T-cgg-b454c-cgg.aspx ).
This worked very well, except one problem:
When I access a website and try to modify it with RadEditor the text in a text field loses its formatting. Funny thing is that this happens only to single paragraphs, not in the whole text field.
The paragraph seems to lose the linking to the .css-class in the style sheet (ApplyClass-dropdown menu shows only "ApplyClass").
I can´t find a solution for this problem. The websites have been created before the installation of RadEditor, maybe there is a connection. The style sheet hasn´t changed though.
I would be very thankful for some help and suggestions.
Thanks and regards
Thorsten
3 Answers, 1 is accepted
0
Hi Thorsten,
Indeed, Telerik RadEditor uses the same CSS files as the default rich-text editor - HtmlEditorTableFormats.css and HtmlEditorCustomStyles.css. But, it is possible for another global styles to be applied to the editor's content. Note that you can also set the styles to be applied to the content, by adding them in another location:
/Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/ 4.x.x.x__1f131a624888eeed/RadControls/Editor/CssEditor.css
This file is not created by default when you install RadEditor for MOSS. But, if it is present, the editor will automatically load it. However, the file will not be loaded in presentation mode when the editor is used in a list (e.g. wiki). This is because we cannot modify the page and add it when the editor is invisible. To workaround this problem you can include this file manually to the master page (using SharePoint Designer) or add it in the MOSS core CSS styles. Either way it will be automatically loaded in presentation as well as authoring (editing) mode. For example, to add the CssEditor.css file in the default MOSS styles, open the /Program Files/Common Files/Microsoft Shared/web server extensions/12/Template/ Layouts/1033/Styles/CORE.CSS and add the following line:
@import url("/_wpresources/RadEditorSharePoint/4.x.x.x__1f131a624888eeed/RadControls/Editor/CssEditor.css");
Please, add your custom styles to the CssEditor.css file and test the behavior. If the problem still exists, you can manually check what styles are applied to the content using Firebug.
I hope this helps.
Sincerely,
George
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Indeed, Telerik RadEditor uses the same CSS files as the default rich-text editor - HtmlEditorTableFormats.css and HtmlEditorCustomStyles.css. But, it is possible for another global styles to be applied to the editor's content. Note that you can also set the styles to be applied to the content, by adding them in another location:
/Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/ 4.x.x.x__1f131a624888eeed/RadControls/Editor/CssEditor.css
This file is not created by default when you install RadEditor for MOSS. But, if it is present, the editor will automatically load it. However, the file will not be loaded in presentation mode when the editor is used in a list (e.g. wiki). This is because we cannot modify the page and add it when the editor is invisible. To workaround this problem you can include this file manually to the master page (using SharePoint Designer) or add it in the MOSS core CSS styles. Either way it will be automatically loaded in presentation as well as authoring (editing) mode. For example, to add the CssEditor.css file in the default MOSS styles, open the /Program Files/Common Files/Microsoft Shared/web server extensions/12/Template/ Layouts/1033/Styles/CORE.CSS and add the following line:
@import url("/_wpresources/RadEditorSharePoint/4.x.x.x__1f131a624888eeed/RadControls/Editor/CssEditor.css");
Please, add your custom styles to the CssEditor.css file and test the behavior. If the problem still exists, you can manually check what styles are applied to the content using Firebug.
I hope this helps.
Sincerely,
George
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
jmctort
Top achievements
Rank 1
Rank 1
answered on 23 Oct 2008, 01:45 PM
Hi George,
first thanks for the reply. I tried your solution, but unfortunately it had no effect. Here´s what I´ve done:
I created the CssEditor.css and imported it in the CORE.css like you suggested.
Additionally I left the entry <cssFiles><item name="pathto.css" /></cssFiles>
in the ListToolsFile.xml and ToolsFile.xml. RadEditor still lost the formatting.
After that I deleted the entries in ListToolsFile.xml and ToolsFile.xml to see if that does the job, but the formatting was still lost and additionally the styles of HtmlEditorTableFormats.css and HtmlEditorCustomStyles.css showed up in ApplyClass-dropdown again.
Are there any other options?
Best regards,
Thorsten
first thanks for the reply. I tried your solution, but unfortunately it had no effect. Here´s what I´ve done:
I created the CssEditor.css and imported it in the CORE.css like you suggested.
Additionally I left the entry <cssFiles><item name="pathto.css" /></cssFiles>
in the ListToolsFile.xml and ToolsFile.xml. RadEditor still lost the formatting.
After that I deleted the entries in ListToolsFile.xml and ToolsFile.xml to see if that does the job, but the formatting was still lost and additionally the styles of HtmlEditorTableFormats.css and HtmlEditorCustomStyles.css showed up in ApplyClass-dropdown again.
Are there any other options?
Best regards,
Thorsten
0
Hello Thorsten,
The RadEditor content area is separate from the rest of the page and its CSS is also separate. As you already found out, you can use the <cssFiles> collection in the editor tools file to select which stylesheets will be loaded in the content area. By default these are HtmlEditorTableFormats.css, HtmlEditorCustomStyles.css, and CssEditor.css from the editor Resources folder. If you set <cssFiles>, then only the files you list will be added to the editor content area. If you want to have the default stylesheets and your custom one, then simply add them all as <item> entries in the <cssFiles> element.
As my colleague suggested, you can use Firebug for Firefox or IE Developer toolbar for Internet Explorer to inspect the editor content and see if any custom styles are applied to the paragraphs and if there are, add them in your custom CSS file.
Kind regards,
Lini
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
The RadEditor content area is separate from the rest of the page and its CSS is also separate. As you already found out, you can use the <cssFiles> collection in the editor tools file to select which stylesheets will be loaded in the content area. By default these are HtmlEditorTableFormats.css, HtmlEditorCustomStyles.css, and CssEditor.css from the editor Resources folder. If you set <cssFiles>, then only the files you list will be added to the editor content area. If you want to have the default stylesheets and your custom one, then simply add them all as <item> entries in the <cssFiles> element.
As my colleague suggested, you can use Firebug for Firefox or IE Developer toolbar for Internet Explorer to inspect the editor content and see if any custom styles are applied to the paragraphs and if there are, add them in your custom CSS file.
Kind regards,
Lini
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.