Hi,
We tried following css in the EditorCssFile but it is not working in the editor rendering.
1. Child selector (first descendant).
.rb-inner-small > div .rb-text-small strong{font-size:12px}
2. Pseudo class
div[class^="r-header-small"]{position: relative; width:207px; height:134px}
Is it supported in the editor or there is other way to do this?
Thanks.
1 Answer, 1 is accepted
0
Hi,
The content area of RadEditor is a standard editable iframe (rendered in quirksmode) or editable div according to the value of the ContentAreaMode property. Since quirksmode represents IE6 it is expected that these classes does not work.
What you can do is to add a DOCTYPE to the iframe. Here is an example how to set an XHTML DOCTYPE to the content area of RadEditor:
Another approach is to render the content area as an editable DIV by setting ContentAreaMode="Div". The DIV is part of the current page and will use its DOCTYPE.
If the tags are still not applied test with an editable div/iframe and see whether this is not a browser issue:
<div contenteditable="true" style="width:300px;height:300px;border: 1px solid red;">
<style type="text/css">
.rb-inner-small > div .rb-text-small strong{font-size:12px}
</style>
add here your content
</div>
Greetings,
Rumen
the Telerik team
The content area of RadEditor is a standard editable iframe (rendered in quirksmode) or editable div according to the value of the ContentAreaMode property. Since quirksmode represents IE6 it is expected that these classes does not work.
What you can do is to add a DOCTYPE to the iframe. Here is an example how to set an XHTML DOCTYPE to the content area of RadEditor:
Copy Code
<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"> <Content> </Content></telerik:RadEditor><script type="text/javascript"> function OnClientLoad(editor, args){ var doctypeStr = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>"; var contentStart = doctypeStr; doctypeStr.indexOf("xhtml") > -1 ? contentStart += "<html xmlns=\"http://www.w3.org/1999/xhtml\">" : contentStart += "<html>"; contentStart += "<head>"; contentStart += "<title>RadEditor</title>"; contentStart += "</head>"; contentStart += "<body>"; var contentEnd = "</body>"; contentEnd += "</html>"; var editorContent = editor.get_html(); //You can extend the code in order to check if the HEAD / BODY tags already //and if the !DOCTYPE is actually tag or a text inside the content if (editorContent.indexOf("!DOCTYPE") < 0) { editorContent = contentStart + editorContent + contentEnd; editor.set_html(editorContent); } else{ alert("RadEditor's content already got a DOCTYPE"); } }</script>Another approach is to render the content area as an editable DIV by setting ContentAreaMode="Div". The DIV is part of the current page and will use its DOCTYPE.
If the tags are still not applied test with an editable div/iframe and see whether this is not a browser issue:
<div contenteditable="true" style="width:300px;height:300px;border: 1px solid red;">
<style type="text/css">
.rb-inner-small > div .rb-text-small strong{font-size:12px}
</style>
add here your content
</div>
Greetings,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.