Customized default font doesn't render in preview mode

[Sumit]

Hi,

I'm using RadEditor (telerik v 2010.2.826.35) in my aspx pages. i have customized its default font to Calibri. So, when the  user clicks in the editor to type something, the default font sets to Calibri. Now, i save the content in the editor in database. When I checked the DB entry, I found that the default font (Calibri) is not stored in DB. However, if i change the font in editor while writing, that very font details is stored in the DB.

My requirement is that text entered in the editor should be stored with the default styling as well if no customization is done and not just for customized style.

Can you please suggest me something?


Thanks

Sumit

[Rumen]

Hello Sumit,

As it is explained in the mentioned help article each browser has preset default font decoration for the editable content. In the following KB article you can find detailed explanation on some specific scenarios and solutions:
No FONT tags are applied when I type text in the editor

You can use the following code solution to wrap the initial content or the empty content of RadEditor in a span tag with Calibri 12px, e.g.

<telerik:radeditorrunat="server"OnClientLoad="OnClientLoad"ID="RadEditor1">
</telerik:radeditor>
<scripttype="text/javascript">
function OnClientLoad(editor) {
setTimeout(function() {
var tool = editor.getToolByName("RealFontSize");
tool.set_value("12px");

var args = new Telerik.Web.UI.EditorCommandEventArgs("RealFontSize", null, "32px");
editor.fire("RealFontSize", args);

editor.fire("FontName", { value: "Calibri" });

}, 0);
}
</script>

You can modify the values depending on your requirements. This could be helpful for your scenario.


Best regards,
Rumen
the Telerik team

[Sumit]

Hi,

Thanks for the reply.

I was wondering if there is an option where I can save the text entered in the editor with default font name/size (customized in EditorStylesSheet.css) in DB. Thus, when the same text is rendered back in the same editor, taking content from the DB (stored earlier), the default font name/size saved should render in the editor in disabled/preview mode. Here the default font should not be Times New Roman.

OR, let me put my problem statement in other words

I have customized the default font name of the editor to Calibri (customized in EditorStylesSheet.css). When I write some text in the editor with default font selected, it appears Calibri, which is fine. Then, I store the text in DB. When, that content is rendered in the editor in preview mode, the font changes to Times New Roman instead of Calibri. This appears only when the editor is in preview mode. I want that the default font of the editor in the preview mode should be Calibri.

Sumit

[Sumit]

Hi,

Did you find any way to implement this?


Sumit

[Rumen]

Hi,

This behavior is by design, because in Preview mode the css file(s) imported through the CssFiles or ContentAreaCssFile properties are disabled. You can disable this behavior using the code below:

<telerik:RadEditor ID="RadEditor1" ContentAreaCssFile="ContentArea.css" OnClientModeChange="OnClientModeChange" runat="server">
</telerik:RadEditor>
<script type="text/javascript">
function OnClientModeChange(editor)
{
   var mode = editor.get_mode();
   var doc = editor.get_document();
   var head = doc.getElementsByTagName("HEAD")[0];
   var link;


   switch (mode)
   {
      case 1:
        break;
      case 2:
          break;
      case 4: //enable the contentarea.css file in Preview mode
      setTimeout(function()
      {
        var link = head.getElementsByTagName("link")[0];
        link.disabled = false;
      }, 100);
        break;
  }
}
</script>

Kind regards,
Rumen
the Telerik team

[Sumit]

Hi Rumen,

Thanks for your reply; it really helped. But I'm facing an issue due to this. I'm using  the editor with OnClientLoad event where I'm opening the links in the editor in a new window. here's the code:

<telerik:RadEditor NewLineBr="false" StripFormattingOnPaste="MSWordRemoveAll,Css,Font,Span"
    EnableResize="false" Skin="Outlook" ToolsFile="ToolsFileGallery.xml" Width="527px"
   OnClientModeChange="OnClientModeChange" Height="200px" ContentAreaCssFile="~/Static/CSS/EditorStyleSheet.css"
 runat="server" ID="EditorControl" CssClass="editor radeditorBody radEditor_Border" OnClientLoad="OnClientLoad">
                                            <ContextMenus>
                                                <telerik:EditorContextMenu Enabled="true">
                                                    <telerik:EditorTool Name="Cut" />
                                                    <telerik:EditorTool Name="Copy" />
                                                    <telerik:EditorTool Name="Paste" />
                                                </telerik:EditorContextMenu>
                                                <telerik:EditorContextMenu TagName="A" Enabled="false">
                                                    <telerik:EditorTool Name="SetLinkProperties" />
                                                    <telerik:EditorTool Name="Unlink" />
                                                </telerik:EditorContextMenu>
                                            </ContextMenus>
</telerik:RadEditor>

JS:
function OnClientLoad(editor, args) {
            editor.attachEventHandler("click", function(e) {
                var sel = editor.getSelection().getParentElement();
                var href = null;
                if (sel.tagName == "A") {
                    href = sel.href;
                    window.open(href, null, "menubar=1,resizable=1,status=no,toolbar=no,location=no");
                    return false;
                }
            }
            );
        }

But after using your OnClientModeChange event, the links in the editor opens up in that iFrame only instead of in a new window. Can you please suggest me something where the default styling is maintained in the editor in Preview mode and links in the editor opens in a window.

[Rumen]

Hi,

I was unable to reproduce the problem. For your convenience I have attached my test project and a video demonstrating my test: http://screencast.com/t/I5MOnyoDB0lF.

Best regards,
Rumen
the Telerik team