RadEditor default font style not applied upon typing

[Blair]

Hello,

If you begin typing in the editor without selecting anything from the toolbar, no "default" formatting is applied. If you switch between Design and HTML mode you see just the text you typed. No HTML is applied.

I've tried setting default toolbar font options using the OnClientLoad event but these selections are not applied upon typing.

Any suggestions would be appreciated.

Thanks

Blair

[Ianko]

Hello Blair,

The RadEditor content area is just like a plain HTML document when ContentAreaMode is set to Iframe (the default option). Therefore, styles that are applied via CSS file in the CssFiles collection or using the OnClientLoad event to set inline styles to the ContentArea (the body element).

These styles are not visible in the HTML mode. The HTML mode (when not in full HTML page edit mode) is the same as seeing the innerHTML value of the Body element of an HTML document. Shortly, the CSS files are in the head element, whereas the inline styles are in the body tag. Both of them are not visible in the HTML mode.

It would be helpful to elaborate more, so to understand what is the expected behavior and how HTML formatting in the HTML mode should be related to the default styles. Both definitions are not quite related. Formatting applied by the user is mainly inserted as inline styles and DOM changes. They are visible in the HTML mode. Although, default styles should be something that is beyond what the user should be able to control. Therefore, not available in the HTML mode.

Regards,
Ianko
Telerik

 

 

[Blair]

Hello Lanko,

Thanks for the response. We use the editor for creating emails. So we need to create consistent styling between what the user is seeing in the editor and what is presented in other email viewers.

The problem is that when you begin typing, no in-line styling is applied. If a user saves these changes, you end up with just plain text. As you said, the content area styling can be set to whatever we want. However there is no way to guarantee consistency if viewed from a different tool/viewer without applying some sort of default styling.

So I am "assuming" that we need to start the user out with an in-line style or something in order to accomplish this. I'm just not sure how to accomplish this. Thanks.

[Ianko]

Hello Blair,

The required behavior is rather related to how the content should be processed prior to sending it.

There are plenty of third-party solutions that provide a way to embed CSS styles from CSS files into the HTML as inline styles (CSS inliner), which will result to a properly looking email content.

You can find attached such sample with the RadEditor and the PreMailer library (https://github.com/milkshakesoftware/PreMailer.Net).

Regards,
Ianko
Telerik

 

 

[Blair]

Lanko,

I think you might be misunderstanding what I'm looking for. If you were to go into the RadEditor (you can use the demo). Make sure there is no content whatsoever in the Design or HTML view. Go back to the Design view and type something in without touching any of the tools in the toolbar. Then switch to the HTML view. You should see just the text you typed. If you save that and send that off to someone via, let's say, the SmtpClient API, the body is going to be just plain text. 

What I'm looking for is a way to default something like a <span> element with inline styling, so that when the user begins typing, there is some sort of applied styling upon the user first entering text. I've been trying different events to trigger adding a default element and insert text within it. But I'm not having much like. So any help would be appreciated.

Thanks

Blair

[Ianko]

Hello,

Did you try with the plain DOM events, e.g., keyUp or keyDown?

In this help article is showcased (http://www.telerik.com/help/aspnet-ajax/editor-onclientload.html) an example how to attach them.

Regards,
Ianko
Telerik

 

 

[Blair]

Lanko,

I finally figured it out. All I really needed to do was to add the code below to the onClientLoad event. It starts the user out with default fonts and sizes.

setTimeout(function () {
                                                        editor.fire('FontName', { value: 'Courier New' });
                                                        editor.fire('RealFontSize', { value: '12px' });
                                                    }, 300);