[Solved] Spell Check RadEditor Contents with F7

[Alex Occhipinti]

*banging head against well*

  I have a RadEditor with simple text in it.  I do not have any tool bars or menu items and I would like to keep it that way.  However, I would like the user to be able to start a spell check.  My first thought was to have hitting F7 while in focus of the control.  This appears only to work when there is a tool entry providing this shortcut which means that the tool icon is shown (now what I want). 
  I next tried to put a RadSpell object near the RadEditor and set it up to check the RadEditor.  When I click on the link/icon for the RadSpell the checker comes up, but it doesn't seem to be looking at my RadEditor.  It always wants to replace something with the word 'framable.  Basically doing some very weird stuff.  On top of that, if I close the RadSpell with the X in the upper right it chooses to blank out the entire contents of my RadEditor.

  Does anyone have any constructive ideas as to how I can get the spell checker to run correctly and not have a menu item?

[Tervel]

Hello Alex,

You can easily relate shortcuts to commands like this:
    editor.addShortCut("AjaxSpellCheck", "F7");   

However, in the case of spellcheck - there is a problem. It is not enough to simply add a shortcut. Why is that? Well, one of the many RadEditor optimizations aimed at reducing the loading time is that the spellcheck functionality is not sent to the client unless the editor has a spellcheck tool set. Hence, in this particular case you will need to have this tool.

One fairly simple approach would be to hide this the tool on the client side, e.g.

<script>
function OnClientLoad(editor)
{   
    editor.addShortCut("AjaxSpellCheck", "F7");   
    var spell  = editor.getToolByName("AjaxSpellCheck");
    spell.get_element().style.display = "none";
}
</script>                                     
                                     
<telerik:radeditor runat="server"
OnClientLoad = "OnClientLoad" .../>

One last suggestions - since RadEditor toolbars need to have their height explicitly set in IE, it is best to add the AjaxSpellCheck tool as the last tool in the last toolbar to avoid a slight UI inconsistency when hiding the tool.


Best wishes,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Alex Occhipinti]

Tervel, works for the most part, but there is one problem.  This still created a very small piece of a tool bar at the top of my editor.  I do not have any toolbars currently and I would like to keep it that way.  This solution appears to still require that the toolbar row is created and a graphical element to be displayed there.  Is there any way around that?

[Tervel]

Hello Alex,

Indeed, I failed to take into consideration what you explicitly specified in your original post -  that in your scenario the editor has no tools and toolbars.
Well, to keep things simple then, I suggest you modify the code that I sent you just a bit and hide not the tool element itself, but the *appropriate* parent, e.g.

 //Go up the DOM tree if needed till you *hit* the right element, e.g
var parent = spell.get_element().parentNode.parentNode;
parent.style.display = "none";


Sincerely yours,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Alex Occhipinti]

  Ahh, much better!  One problem with it though.  It looks like when the parent is hidden the tool does not compensate with the height of the textbox within the editor.  That is, the text starts at the top as I need, but the now at the bottom of the text box has a grey empty row.  I'm guessing that the editor rendered the width of the textbox assuming that there was going to be a toolbar row and I'm seeing what is normally underneath that textbox.  Would there be a way of compensating for this?  Perhaps getting a handle to the textbox itself and changing its witdh?

[Lini]

Hello,

Some commands trigger an editor size update. One of them is changing modes (design, HTML, preview). This means that if you force a mode change (even to the same mode) with JavaScript, the editor size will update. Here is the updated JS function:

function OnClientLoad(editor)
{
    editor.addShortCut("AjaxSpellCheck", "F7");
    var spell = editor.getToolByName("AjaxSpellCheck");
    //Go up the DOM tree if needed till you *hit* the right element, e.g
    var parent = spell.get_element().parentNode.parentNode;
    parent.style.display = "none";
    editor.set_mode(Telerik.Web.UI.EditModes.Design);
}

The last line (set_mode) will force the editor to update its size.

Sincerely yours,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Alex Occhipinti]

Absolutely perfect.  Thank you!!