Rad Sharepoint Editor-display mode font family is not working as Times New Roman

[juan]

What's happening is when I create or edit the content in sharepoint page using Rad Sharepoint Editor, I did not change any font family or any other style. The default font family is Times New Roman, every style and the setting are default and then I publish the page and in display mode the font family is not shown as Times New Roman it showing by Arial.

My code:

Register
<%@ Register TagPrefix="radE" Namespace="Telerik.SharePoint.FieldEditor" Assembly="RadEditorSharePoint, Version=4.5.1.0, culture=neutral, PublicKeyToken=1f131a624888eeed" %>


Display Mode
<PublishingWebControls:RichHtmlField FieldName="PublishingPageContent" runat="server" id="RichHtmlFieldDisplay">
</PublishingWebControls:RichHtmlField>

Screen shot : http://i490.photobucket.com/albums/rr270/juandelacruz247/ContentDisplayMode.png


Edit Mode
<radE:radhtmlfield FieldName="PublishingPageContent" runat="server" id="RichHtmlFieldEdit" ConfigFile="~/_wpresources/RadEditorSharePoint/4.5.1.0__1f131a624888eeed/RadControls/Editor/OneResearchConfigFile.xml" DisableInputFieldLabel="True">
</radE:RadHtmlField>

Screen Shot :http://i490.photobucket.com/albums/rr270/juandelacruz247/ContentEditMode.png

[Stanimir]

Hello juan,

The reason for this behavior is that the RadEditor editing are has a separate Document from the SharePoint page. This is why the styles defined in the SharePoint page are not applied on the editing content. You can find information on how to define custom CSS styles in our online help http://www.telerik.com/help/aspnet-ajax/defining-custom-css-styles.html

I hope this helps.

Sincerely yours,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[juan]

Hi Stanimir,

Thanks for your reply.

The online help that you give me is not very helpful for my issue.

My problem is I did not apply any style in Rad Sharepont Editor in my sharepoint page(edit mode), the default font in Rad Sharepoint Editor is Times New Roman. And when the content is showing in sharepoint page(display mode) its using the verdana which is I did not apply.

Thanks

Regards,
Juan

[Stanimir]

Hi Juan,

As I explained earlier,  RadEditor editing area has a separate Document the default font style there is Times New Roman. That is why when you start typing without applying any other font the text appears in Times New Roman. If you go tho Html mode of the editor you will be able to see the actual  HTML code that is send to the SharePoint server. Now when you save text on which formatting was not applied, it will appear with the default font for SharePoint page. In your case this is Verdana. So what you need to do is to configure the same default style, both for SahrePoint page and RadEditor content area.

I hope this helps.

All the best,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Suresh]

"when you start typing without applying any other font the text appears in Times New Roman. If you go tho Html mode of the editor you will be able to see the actual  HTML code that is send to the SharePoint server, formatting was not applied". I want the exact reverse of this. How do I ensure the default font specified in the editor is saved in the html also?, so that I can keep the same font in the view also. 

[Stanimir]

Hi Suresh,

You can create a custom content filter which will wrap the text in a container (div or span element) with appropriate style.
In order to do so you need to add the following code in the respective ConfigFile.xml or ListConfigFile.xml, which are located in the Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\4.5.6.0__1f131a624888eeed\RadControls\Editor folder.

<property name="OnClientLoad">OnClientLoad</property>

Then add the following javascript code on the page where the RadEditor for MOSS Lite is rendered.

function OnClientLoad(editor, args)
    {
        var customFilter = new RadEditorCustomFilter();
        editor.FiltersManager.Add(customFilter)
    }
    function RadEditorCustomFilter()
    {
        this.GetDesignContent = function (content)
        {
            var newContent = content;
            return newContent;
        };

        this.GetHtmlContent = function (content)
        {
            var newContent = content;
            if (newContent.indexOf("RadEditorContainerSpan") == -1)
            {
                newContent = "<span id=\"RadEditorContainerSpan\" style=\"font-family: Times New Roman;\">" + newContent + "</span>";
            }

            return newContent;
        };

        this.GetPreviewContent = null; //Not mandatory to implement.
    }

I hope this helps.


Best wishes,
Stanimir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.