This is a migrated thread and some comments may be shown as answers.

Is RADEditor really WYSIWYG?

9 Answers 168 Views

Editor

This is a migrated thread and some comments may be shown as answers.

9 Answers, 1 is accepted

Accepted

answered on 02 Nov 2010, 12:30 PM

Hello Virgil,

It the content is saved in your Database with style="font-family: courier new;", e.g.

test

then it should be displayed as expected on the public site with Courier New font formatting. This should not be a CSS style problem, because the inline style has priority over the CSS Styles.

However if the font-family inline style is not applied and the content is saved without the style inline attribute in the database, e.g.

test
or simply
test

then you can experience the reported problem if you have a global style which applies font-family and font-size, e.g.

<style type="text/css">
body
{
font-family: Arial;
font-size: 20px;
}
</style>

If you unable to solve the problem, please provide a live URL to the problematic site so that we can expect it.

Kind regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 02 Nov 2010, 05:18 PM

Hi Rumen,

Thanks for the reply. We purchased Telerik RAD Tools specifically because we needed to use RADEditor in our in-house CMS intranet application. We expected it to allow non-HTML-oriented users to format their own web-content with ease.

In your example, you used "FONT-FAMILY". Do we have to use that? If so, how can you format text in RADEditor using "FONT-FAMILY" without going into HTML mode ... considering most of our users don't know HTML?

Also it throws off our users, when they are not seeing what they expect to see when they publish their content. Just as an example, this is what's saved to the database:

THIS IS A TEST

As you can see, I'm not using "FONT-FAMILY" but if you say the inline style has priority over CSS, then even if I have a global style declared somewhere, shouldn't it be overriden by the direct inline style shown above using FONT style and face?

Because as it is, I don't see the text displayed in Courier New but in something else (probably Verdana or Arial).

Please advise.

Thanks,
Virgil

Accepted

answered on 02 Nov 2010, 05:42 PM

Hello Virgil,

This content below is produced in Internet Explorer:

THIS IS A TEST

and it is not valid XHTML content. The rich text editing tools of IE work with font tags and produce upper case tags.

If the above content is produced using RadEditor, this means that the ConvertToXhtml and ConvertFontToSpan built-in content filters are disabled by the developer. By default they are enabled.

The ConvertToXhtml and ConvertFontToSpan built-in content filters of RadEditor validate the content and makes it XHTML compliant, e.g. the font tags and face attributes are replaced by span tags and inline font-family styles as well as the tags are converted to lowercase tags.

THIS IS A TEST

So my suggestion is to enabled the ConvertToXhtml and ConvertFontToSpan filters and this will fix the problem.

The inline face attribute has lower priority to the CSS classes and for this reason you experience the reported problem. Here is an example with an HTML page:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

<style type="text/css">

font

{

font-family: Arial !important;

font-size: 20px;

}

</style>

</head>

<body>

<span style="font-family: courier new; font-size: 32px;">THIS IS A TEST with

inline font family style

<br />

<font style="font-size: 32px" face="Courier New">THIS IS A TEST with a face

attribute

</body>

</html>

Best regards,
Rumen
the Telerik team

answered on 02 Nov 2010, 10:37 PM

Hi Rumen,

I appreciate your patience.

Here is my situation. The HTML below was generated by RADEditor:

THIS IS A TEST

I save the HTML above (exactly as it is) into a database field called group_text:

On another page, I load the contents of the group_text field into a Label control using a data binder:

<asp:Label ID="h1Groups" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "group_text") %>'></asp:Label>

The problem is, the contents of group_text is displayed but it does not seem to obey face="Courier New" although it does seem to change the font to 32px. Even if I include an inline style declaration within the label (see below), it still doesn't show it as Courier New.

<asp:Label ID="h1Groups" runat="server" style="font-family:Courier New; font-size: 32px;" Text='<%# DataBinder.Eval(Container.DataItem, "group_text") %>'></asp:Label>

But if I put another Label control such as below, everything just works fine for this particular label.

asp:Label ID="Label2" runat="server" style="font-family:Courier New; font-size:100px;" Text='HELLO WORLD!!!'></asp:Label>

Why does my first label behave as such?

Your demo page here: http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx shows all text in Times New Roman, but when I disable the RADEditor, it displays everything in a different font. It is not WYSIWYG.

However, when I enable RADEditor again and select all text and change it's font to Courier New then disable it again, it displays all text in Courier New. Now it is WYSIWYG! What just happened there?

Any ideas how I can achieve what I want to accomplish?

Thanks,
Virgil

answered on 04 Nov 2010, 06:30 PM

Hi Rumen,

Thank you for your suggestion to look into the ConvertToXhtml and ConvertFontToSpan built-in content filters of RadEditor.

But I think it is not relevant to the issue I'm seeking help for, because even if I use FONT-FAMILY (see label control below), it still doesn't work.

THIS DOESN'T WORK

<asp:Label ID="h1Groups" runat="server" style="font-family:Courier New; font-size: 32px;" Text='<%# DataBinder.Eval(Container.DataItem, "group_text") %>'></asp:Label>

Whether I use FONT FACE or FONT-FAMILY, it would still work but only if it is a simple text such as the label control below.

THIS WORKS

<asp:Label ID="Label2" runat="server" style="font-family:Courier New; font-size:100px;" Text='HELLO WORLD!!!'></asp:Label>

Once you put HTML inside the text it won't work such as the label control below.

THIS DOESN'T WORK

<asp:Label ID="Label2" runat="server" style="font-family:Courier New; font-size:100px;" Text='HELLO WORLD!!!'></asp:Label>

I would appreciate any other ideas you have on how I can overcome this problem.

Thanks,
Virgil

Accepted

answered on 05 Nov 2010, 01:13 PM

Hi Virgil,

The content area of RadEditor in the Default Example is an editable IFRAME element. The iframe is another document and it does not inherit the styles from the parent page. When the editor is disabled (Enabled="false") it renders its content in a DIV element, the DIV is placed on the same page and the page CSS styles are applied to it. In the live demos there is a style that changes the appearance of the content. However if the user manually apply some font and disable the editor, the content will not change its appearance when the editor is disabled, because of the applied inline style="font-family: selectedFont" styles, because the inline styles have priority over the page styles.

I tested both label controls and verified that the text in both labels which are rendered as span tags has Courier New formatting. You can see my test in this video: http://screencast.com/t/jB0qOwYY.

Can you please open a support ticket and send a sample working project that demonstrates the problem? Please, include also two screenshots which demonstrate the problem and the desired appearance, respectively.

All the best,
Rumen
the Telerik team

answered on 05 Nov 2010, 05:27 PM

Hi Rumen,

I finally discovered the culprit. It was a CSS file that I linked to and it contained this:

{ font-family: Verdana, Arial, Helvetica, sans-serif, Courier New; }

Because of the above line on my CSS file, this doesn't work:
<asp:Label ID="Label2" runat="server" style="font-family:Courier New; font-size:100px;" Text='HELLO WORLD!!!'></asp:Label>

When I put Courier New in front of Verdana (see below), the above Label control displayed in Courier New.

* { font-family: Courier New, Verdana, Arial, Helvetica, sans-serif; }

Clearly, the CSS style overrode the inline statement.

I'm still at a loss though, because this behavior does not seem to agree with your statement "This should not be a CSS style problem, because the inline style has priority over the CSS Styles."

Anyway, thank you very much for taking the time to help me out. At least, I can confirm to myself now that indeed, Telerik's RADEditor is WYSIWYG! Do I get Telerik points? (Just kidding!)

Sincerely,
Virgil

answered on 18 Nov 2010, 05:40 PM

Hi Rumen,

It's me again and it still has something to do with RADEditor. This time though it is about tables.

With the version that we have Q3 2008 (2008.3.1105), do you know if there are known bugs about tables such as the same as we are experiencing?

When in RADEditor, the tables look very much aligned, but when it is saved and re-rendered, they spread out over the entire width of the page and do not at all look the same as what you see when inside RADEditor.

What CSS style settings could possibly affect the way it is being rendered?

If this is a known bug, has this been resolved in the next version after what we have?

Thanks again for your time.

Virgil