We are trying to figure out a way to implement the RadEditor so that the CSS classes defined in the html content of the editor render correctly when in the Design View.
For example, we create our RadEditor as follows
In the CSS file that defines the site's layout, here are some samples of styles we have defined:
Finally, here is is a sample of the content HTML within the editor:
While in design mode, we are expecting these styles to be applied, but they are not. If we place the HTML content in a label wrapped by a <div id="content"></div> on the exact same page, the styles are applied correctly, so we know its not an issue with our stylesheets or links. How can we get the design view to render the styles as expected? Is there another method we have to take to get this to work?
For example, we create our RadEditor as follows
| <div class="content"> |
| <telerik:RadEditor ID="RadEditor1" ToolsFile="~/RadControlsXML/Editor/ToolsFile.xml" runat="server" Width="665px" AllowScripts="true"> |
| <DocumentManager DeletePaths="/AssetsClient/Documents/" UploadPaths="/AssetsClient/Documents/" ViewPaths="/AssetsClient/Documents/" SearchPatterns="*.doc, *.txt, *.docx, *.xls, *.xlsx, *.pdf, *.ppt" MaxUploadFileSize="2147483647" /> |
| <ImageManager DeletePaths="/AssetsClient/Images/" UploadPaths="/AssetsClient/Images/" ViewPaths="/AssetsClient/Images/" /> |
| </telerik:RadEditor> |
| </div> |
In the CSS file that defines the site's layout, here are some samples of styles we have defined:
| div#content h1 { font-weight:lighter;text-transform:uppercase;font-weight:bold;clear:both;color:#fff;font-size:2.3em;letter-spacing:-1px;} |
| div#content h1.OneInTitle { background:url(/Assets/Img/BG/OneInTitle.gif) 0 0 no-repeat;float:left;height:69px;line-height:64px;padding-left:1.6em;margin:0 0 1em -20px;width:709px;} |
| div#content h2 { color:#000;font-weight:lighter;font-size:22px;clear:both;letter-spacing:-2px;line-height:1.8em;margin:1em 0;text-transform:uppercase;border-bottom:1px solid #cb0406;} |
Finally, here is is a sample of the content HTML within the editor:
| <h1 class="OneInTitle">Meet Our Team</h1> |
| <h2>Welcome to Our Site!</h2> |
While in design mode, we are expecting these styles to be applied, but they are not. If we place the HTML content in a label wrapped by a <div id="content"></div> on the exact same page, the styles are applied correctly, so we know its not an issue with our stylesheets or links. How can we get the design view to render the styles as expected? Is there another method we have to take to get this to work?
1 Answer, 1 is accepted
0
Hi Keith,
The content area of RadEditor is an editable IFRAME, which is another document and it does not inherits the styles from the parent page.
My suggestion is to import your classes through the CssFiles property as shown in this demo:
http://www.telerik.com/help/aspnet-ajax/editor-setting-content-area-defaults.html
Regards,
Rumen
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
The content area of RadEditor is an editable IFRAME, which is another document and it does not inherits the styles from the parent page.
My suggestion is to import your classes through the CssFiles property as shown in this demo:
http://www.telerik.com/help/aspnet-ajax/editor-setting-content-area-defaults.html
Regards,
Rumen
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.