Design view and publish view

[Ashish]

Hi,

 

Please find attached screen shots. Here we are using a Telerik Rad Editor web part. The attached screens shots, one from design view and another is published view. In both the cases alignment of the content differs.

 

Request you to please provide the resolution steps.

[Stanimir]

Hello Ashish,

Could you provide me with the actual HTML code, in which the problem occurs? I will also need the custom styles, which are loaded in the editor's content area (if there are some). When I review this information I will be able to advise you further.

Kind regards,
Stanimir
the Telerik team

[Ashwin]

Hi Admin,

I am Ashwin here.
I am using the Telerik Version=5.6.1.0 in a page layout in MOSS 2007 where I am using the tag -

<

 

telerik:RadHtmlField ID="PageContent" FieldName="PublishingPageContent" InputFieldLabel="Article Content" runat="server" AllowSpecialTags="true" DisplayHeight="400px" DisplayWidth="530px">

 

 

</telerik:RadHtmlField>

However whatever I see in the page edit mode is different than what I see in the page published mode in sharepoint.

Please find attached the images for the differences in the edit mode and the published mode.
Please let me know about this asap as I am stuck in this place and our code is supposed to go in production soon.

 

 

 
Thanks & Regards,
Ashwin Chinmulgund.

[Stanimir]

Hi Ashwin,

The styling is different in the two cases because RadEditor's content area is an IFRAME element and not all styles are loaded in it. You need to make sure that you have the same styles loaded in presentation mode and in the content area. Review the following help article: Defining custom CSS styles. I suggest you to use a debugging tool such as IE developers toolbar or FireBug for Firefox to inspect what are the needed styles and load them in RadEditor as well.

Regards,
Stanimir
the Telerik team

[Ashwin]

Hi Admin,

I have tried your suggestions to add the respective CSS files to the ToolsFile.xml or ListToolsFile.xml files but still there was no change in the result.

My page layout has a div around the Telerik Rad Editor control as below:-

<div class="defulatContentText">

<telerik:RadHtmlField ID="PageContent" FieldName="PublishingPageContent" InputFieldLabel="Article Content" runat="server" AllowSpecialTags="true" DisplayHeight="400px" DisplayWidth="530px">
</telerik:RadHtmlField>

</div>

However when I type any content in the above field of "telerik:RadHtmlField" it does not consider the outer
<div class="defulatContentText">

For example, assume that I have added some text - 'hello there' in the 'Design' tab and applied some CSS class 'ms-rteCustom-head01SpaceAfter' to it using the control.
Now suppose that the 'HTML' tab of the above control is showing the html text -
<span class="ms-rteCustom-head01SpaceAfter">hello there</span>

Now the editor only applies the style of "ms-rteCustom-head01SpaceAfter" and does not consider the outer html
<div class="defulatContentText"> for the text 'hello there' and hence the design view only shows the text in the style "ms-rteCustom-head01SpaceAfter", whereas when the page is published what actually gets applied is 'defulatContentText ms-rteCustom-head01SpaceAfter' as shown below:-

<div class="defulatContentText">
<span class="ms-rteCustom-head01SpaceAfter">hello there</span>
</div>

Hence the difference exists between the edit mode and published mode.

Can you please suggest how could I get rid of the problem I have described above as the RadHtmlField does not consider the Outer HTML while in the edit mode.

Please let me know about the same as early as possible.

Thanks & Regards,
Ashwin Chinmulgund

[Stanimir]

Hello Ashwin,

What you can do is try to apply the defulatContentText class to the BODY element of the editor's iframe element (the content area.). Here is how to do this:
1. Add the following element in the ConfigFile.xml, which is located in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources/ folder.:

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

2. Add the following javascript code to the MOSSEditorTools.js file, which is located in the same folder:

function OnClientLoad(editor, args)
{
    Sys.UI.DomElement.addCssClass(editor.get_contentArea(), "defulatContentText");
}

Greetings,
Stanimir
the Telerik team

[Ashwin]

Hi Stanimir,

Thanks a ton for the solution that you have proposed.
I was thinking on similar lines but I was never able to get the IFRAME element using the javascript code - document.getElementById / tagName / Name   because it looks like the IFAME element is available only when we click inside the editable area.

So I was trying to do this using the onmousedown event of the DIV in which the rad control is placed and was going to get the events elementsource and then work on it.
Do you think this would have also worked?

But I have tried and tested your solution and it exactly does what we want, but also please let me know if my mechanism above would have worked?

Thank you for your solution again, it was urgently needed.

Thanks & Regards,
Ashwin Chinmulgund.

[Stanimir]

Hi Ashwin,

You can not use the wrapper div element because the mouse events will not bubble outside the IFRAME's document. One other thing: in general it is not a good practice to put editor related javascript outside of control's relation (sort of speak). Review the following online help article to check the editor's api.
Getting familiar with Client-Side API

Best wishes,
Stanimir
the Telerik team

[Erwin]

Hi,

I just have a question about this topic. In fact I am in a similar situation where I need to find a solution to have exactly the same render in the edit iframe of the RadEditor and the published render.
In fact our intranet site has its own css stylesheet and what I need is simply to include this css sheet into the iframe of the RadEditor. Regarding the answer, the best approach is to load via the tools file the css into the radeditor.

I have questions about that:

1. Will the css be loaded also in presentation mode (published render) which means that the css stylesheet of our intranet will be loaded more than once in read mode? Or will it be loaded only in edit mode?
2. I saw this article page: http://www.telerik.com/help/aspnet-ajax/editor-content-area-appearance-problems.html where it is described that the stylesheets of the pages are automatically loaded in the iframe of the RadEditor ASP.NET AJAX. Why this is not the case for the RadEditor in MOSS 2007? Is there a way to have the same behavior?

Thanks for your answers.

Erwin France

[Stanimir]

Hello Erwin,

Review the following online help article: Defining custom CSS styles

1. Will the css be loaded also in presentation mode (published render) which means that the css stylesheet of our intranet will be loaded more than once in read mode? Or will it be loaded only in edit mode? - No the css will not be loaded in presentation mode automatically. You need to take care for the loading in presentation mode manually.

2. I saw this article page: http://www.telerik.com/help/aspnet-ajax/editor-content-area-appearance-problems.html where it is described that the stylesheets of the pages are automatically loaded in the iframe of the RadEditor ASP.NET AJAX. Why this is not the case for the RadEditor in MOSS 2007? Is there a way to have the same behavior? - This is not the case because Telerik RadEditor uses the same CSS files as the default rich-text editor. Those files are HtmlEditorTableFormats.css and HtmlEditorCustomStyles.css. The loading of these files prevents the "css autoloading" functionality of RadEditor. There is no easy way of achieving it. In order to do this you will need to create a custom version of RadEditor for MOSS. If you want to do this, you will need the source code of the control. We provide it on demand. So if you want the code, open an official support ticket and if your license is valid I will be able to send it to you.



Best wishes,
Stanimir
the Telerik team

[Erwin]

So just to conclude if I want to integrate the stylesheet of my site into the iframe of the RadEditor component, the easiest way to do is to use the CssFiles property in the ToolsFile.xml file right?

Thanks

[Stanimir]

Hello Erwin,

Yes, using the CssFiles collection is the way to do this.


Best wishes,
Stanimir
the Telerik team