Need help with RadEditor's issues

[gs1711]

Below is the link to the code that has the two RAdEditors I am using on my page:-

http://pastebin.com/GsgKhL76

The problems that I am facing are as follows:-

1. When I click inside of EditorQues, its toolbar shows. But when I click to type inside EditorAns, EditorQues's basic toolbar keeps on showing.
   I want this basic toolbar to hide when focus is inside EditorAns.

2. Ajax Spell Check is not working in both the Editors. However, when I embed the same Editors in an aspx page that has no master page, the Ajax Spell Checker works great.
   Why is Spell checker not working in this page of mine that has a master page? When I click  on Spell check button in both  Editors' toolbar, it displays message "Spell check in progress" and both "Finish Spell Check"
   and "Cancel" Buttons are greyed out so I am unable click them and I have to refresh the page everytime to make those "Finish Spell Check"
   and "Cancel" Buttons to go away. How do I fix this ? I mean what has using master page got to do with the Spell checker? I tested with this another master page, Spell checker works fine i that.
Why is it not working with a particular master page ? What could be wrong ?

3.In the Editor.CustomSkin.css , I have set the default font as 14px, Verdana and Normal but when the Editor loads, I do not see font properties
that I have set in this css. Why are the properties not getting overridden and the master page's css is being applied?  

4. Required field validator is not working  with rad editor. Editor's content gets stored as either and Empty string or a break tab "br/".
How do I validate RadEditor so empty string doesnt get stored in my DB?

Below are the css files:-

Master Page's CSS file:-

body {padding:0; margin:0; background-image:url(../images/bg.gif); background-repeat:repeat-x repeat-y;}
body, td, input, textarea{
    font-size:11px;
        font-family:Tahoma;
    color:#5D5F60;
    line-height:13px;
    vertical-align:top;
    padding:0px;
    
}

Editor.CustomSkin.css
I followed some tutorial on Telerik's website on how to use external CSS and implemented as follows:-

I have renamed Default Skin's CSS file (Editor.Default.css) to Editor.CustomSkin.css and made the following additions:-

Added this in my custom skin:-

body
{
    font-family:Verdana!important;  /*Why is Verdana not being set as default font in the editor even though I have set important here? */
    font-style:normal!important;
    font-size:14px!important;   /*Here too font size is not being set as 14 px and text appears smaller than 14 px */
}

h1,h2,h3,h4,h5
{
    color:Black!important;
    background-color:Transparent;
    background-image:none!important;
    font-weight:bold;
    border-bottom:0px!important;
    font-family:Segoe UI,Arial,Sans-serif;
    cursor:default;
    padding-left:0px;
    padding-top:0px;
    font: "Segoe UI",Arial,Sans-serif;
    text-decoration:none;
    }
    
h1{ font-size: 2em !important;}
h2{ font-size: 1.5em !important;}
h3{ font-size: 1.17em !important;}
h4{ font-size: 1em !important;}
h5{ font-size: .83em !important;}
h6{ font-size: .75em !important;}

Another change I made is :-

.CustomSkin.RadEditor .reContentCell
{
    background-image:none !important;
    background-color:White !important;
    border: solid 1px #828282;
    
}

I have set the content area's background of editors as white, else it was picking up master page's background image

I followed this example to make the editor look like a textbox

http://demos.telerik.com/aspnet-ajax/editor/examples/editorastextbox/defaultcs.aspx

Its working fine but I still see grey shadow around EditorQues which is RadEditor as a textbox on my page. How do I get rid of that?

Also in the head section of my page as you can see above, I have commented out the following:-

<%--<link href="http://www.mysite.com/Skins/CustomSkin/EditorAsTextBox.CustomSkin.css" rel="stylesheet" type="text/css" />
--%>


I had to do this because if I add reference to EditorAsTextBox.CustomSkin.css in th ehead section, the EditorAns's toolbar's background color(grey) vanishes
and becomes white. I have no clue how to fix this either.

Sorry for so many questions. Hoping I ll get help here.Thanks.

[Rumen]

Hi,

Straight to the points:
1) The ShowOnFocus toolbar is attached to the <body> element of the page and it will be closed only when the user click on the body tag. The default content area of RadEditor is an editable IFRAME which is not part of the current page and for this reason the ShowOnFocus toolbar is not hidden when the user clicks in the second editor.

What you can do to avoid this behavior is to set the ContentAreaMode property to "Div" in the EditorAns editor, e.g.
<telerik:RadEditor ID="EditorAns" _OnClientLoad="OnClientLoad" ContentAreaMode="Div" ...

More information is available in this live demo: ContentAreaMode="Div".

2) Can you please isolate this problem in a sample working project and send it for examination by opening a support ticket? I will research the problem and provide a solution.

3) You can see how to set the default font settings in this article: Default Font for Editable Content.

4) Indeed, when you hit space or enter key, a &nbsp;  entity or <br> / <p> tag is inserted in the content area, which is a valid HTML content and for this reason the RequiredFieldValidator is not fired.

What you can do to cover your scenario is to implement you custom validator which will be fired when the content area contains only   entities, <p> and <br> tags.

You can see how to implement and attach a custom validator to RadEditor in this live demo: Using RadEditor with ASP.NET Validators.


Best regards,
Rumen
the Telerik team

[gs1711]

Hello,

The following problem still persist:-

I did  set the ContentAreaMode property to "Div" in both the editors on my page but it still is not hiding the EditorQues's  Basic Toolbar. Also when I added this attribute, the default font for the editor changed to 11px when I have set it to 14 px in my CustomSkin's css file. How do I fix this now? That solution did not work. Please help me out here. I'll create a support ticket for other issues.

[Rumen]

Hello gs1711,

1) The ContentAreaMode="DIV" solution works fine on my end with your code. You can see that in the following video: http://screencast.com/t/i3hUHcS9H3hn.
For your convenience I have attached my test project. Are you able to reproduce the problem using it?

2) The DIV element is part of the current master page and the styles will affect the master page too. If you want to customize the content area appearance of the RadEditor in Div mode you need to register the CSS selectors manually on the page with the appropriate cascading.

For your convenience I have attached here a sample page demonstrating how to decorate the content area.

Kind regards,
Rumen
the Telerik team

[Aaron]

Not sure whether to raise a new thread or reply in this. It's the only thread I've found in hours of looking online that has anything remotely like the issue I need help with:

[quote]
"When I click  on Spell check button in both  Editors' toolbar, it displays message "Spell check in progress" and both "Finish Spell Check"  and "Cancel" Buttons are greyed out so I am unable click them and I have to refresh the page everytime to make those "Finish Spell Check"  and "Cancel" Buttons to go away. How do I fix this ?"
[/quote]

Try clicking the buttons anyway. For myself and every screenshot I've seen, the buttons do indeed appear to be disabled.
However, certainly in my case, they are enabled.

This is my issue. I need to be able to dictate the colour of the text in those buttons so they do not look disabled.

Anyone know how I can solve this? Such a small issue and it's taken far too long to resolve already.

I need to convinve those here with spending power that we need these controls... so far they seem fantastic but I've spent a lot of time trying to fix some really trivial issues like this one.

[Marin Bratanov]

Hi Aaron,

You can modify their appearance by editing their CSS class - reAjaxspell_button. It is located in the Editor.Default.css file which can be found under the following path: \RadControls for ASP.NET AJAX QX YYYY\Skins\[your current skin] where [your current skin] is usually the Default one.


Regards,
Marin
the Telerik team