Wierd RadEditor rendering - shows no editor but alot of bullets

[Andreas]

Hello,

Im experiencing a wierd rendering issue with RadEditor and i really need to fix the problem, as it is driving the customer crazy. Take a look at the attached screenshots. Sometimes when I enter the page where the editor is used, the editor is not displayed at all, only a wierd list of bullets (error.jpg). I have been unable to see any pattern as to when the problem occurs, but sometimes I wont see it for days and at other times it will occur 2-3 times a day.

Do you guys have any idea of what could be the problem?

/Andreas

[Dobromir]

Hi Andreas,

This problem occurs because the styles of RadEditor are not loaded. Could you please register the external RadEditor skins as it is shown in this KB article: Registering an external skin of RadEditor?

You can also take advantage of the recently introduced CDN support which will allow you to load the controls skins from the Telerik CDN. Telerik CDN is hosted on the Amazon CloudFront service.

You can find more information about our CDN support here and here.

By loading the external or CDN skins you will ensure that the editor will load its skin.

If the problem still exists, could you please provide a sample project and / or a LiveUrl replicating the problem so we can investigate it further?

Sincerely yours,
Dobromir
the Telerik team

[Andreas]

Hi Dobromir,

Thank you for your reply - and sorry for my late one.

I tried to follow the guide you gave me, but there seems to be some problems regarding the toolbar icons on the editor when changing the skin.
However, if I disable the skin from the editor it looks like this (see 'editor without skin.png'), and it doesnt resemble the error screenshot from my previous post.

Could the problem however be related to the fact that the editor is placed inside a panel, which is set to visible=true/false based on some conditions?

/Andreas

[Dobromir]

Hi Andreas,

Which approach to register the external skins did you use, the one provided in the KB article or the CDN one? If you manually register external skins you need to use the image sprites and css files from the same version of RadControls. These files are located in the Skins folder in you RadControls for ASP.NET AJAX installation folder.

Also, please note that you cannot register multiple external skins, because the CSS selectors in the skin specific files are the same and they override each other.

Regards,
Dobromir
the Telerik team

[Mark Kucera]

Hi,

We were experiencing much the same problem with the editor content turning to bullets in certain circumstances.  We implemented the work around of copying all the editor dialogs into our project, and hard coding the style sheets into the main .aspx page that hosts the RadEditor.  The style that we're trying to replicate is Web20. I then copied in all the root style sheets and .png/.gif files and then the same for the /web20

so my directory structure looks something like
/skin/*.css
/skin/common/*(.gif & .png)
/skin/Web20/*.css (and subfolders with the .gif & .png files)

in /skin/web20 i created Dialog.css per the instructions. it imports every url from /skin and from /skin/Web20
@import url('../Ajax.css');
@import url('../Button.css');
@import url('../Calendar.css');
@import url('../Chart.css');
...
...
@import url('Ajax.Web20.css');
@import url('Button.Web20.css');
@import url('Calendar.Web20.css');
@import url('Chart.Web20.css');
...

This works great and takes care of the problem (of no more bullets) and everything is fine... as long as I use FireFox.

In IE i'm having issues with the popups displaying all the styles correctly.  in particular buttons don't appear correct.

I've attached two files, one from FF and one from IE so you can see what we're seeing.

there were two things that i was thinking about trying to solve this problem in IE, and i wanted to get your opinion.
1. I want to manually edit all the style sheets and change the relative paths to absolute paths. 
2. seeing as how i don't see myself changing the styles very often i was considering putting the style declarations directly into the editor dialog controls.

Do you have any other ideas?
I'm using version 2010.3.1317.35 of the Telerik controls.

Thanks!
-Mark

[Mark Kucera]

This is a followup to my previous post.

1. I tried adding the style references directly in the local copies of EditorDialog/*.ascx and that didn't fix the problem in IE
2. I tried switching to the CDN approach, and this fixed the render issue in IE, but it didn't fix the bullet in editor problem that i was originally trying to solve.


Ideally i'd like to figure out a solution that does use the local copy of the EditorDialog files as there are some customizations that we'd like to make to the appearance of these screens that we can only do when we use the local copy.  This is not a deal breaker as its most important that the bullet issue is resolved and the control renders properly in IE.

Any ideas?
Thanks!
-Mark

[Rumen]

Hello Mark,

For your convenience I have prepared and attached a fully working demo which shows how to register the external Web20 skin and style the external dialogs of RadEditor. There is a text message in the external FileBrowser.ascx dialog which shows that the editor uses its external built-in dialogs.

You can see how the project is structured and use it as a base to proceed with your custom scenario.


All the best,
Rumen
the Telerik team