Customized default font doesn't render in preview mode

7 posts, 0 answers
  1. Sumit
    Sumit avatar
    17 posts
    Member since:
    Jun 2010

    Posted 08 Dec 2011 Link to this post

    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
  2. Rumen
    Admin
    Rumen avatar
    14474 posts

    Posted 12 Dec 2011 Link to this post

    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
    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
  3. Sumit
    Sumit avatar
    17 posts
    Member since:
    Jun 2010

    Posted 18 Dec 2011 Link to this post

    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
  4. Sumit
    Sumit avatar
    17 posts
    Member since:
    Jun 2010

    Posted 27 Dec 2011 Link to this post

    Hi,

    Did you find any way to implement this?


    Sumit
  5. Rumen
    Admin
    Rumen avatar
    14474 posts

    Posted 29 Dec 2011 Link to this post

    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
    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
  6. Sumit
    Sumit avatar
    17 posts
    Member since:
    Jun 2010

    Posted 30 Dec 2011 Link to this post

    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.
  7. Rumen
    Admin
    Rumen avatar
    14474 posts

    Posted 30 Dec 2011 Link to this post

    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
    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
Back to Top