A couple of issues with RadEditor

[Michael]

I've been trying to use radeditor as an email editor and although most of my experience has been smooth I have a couple of issues as below:

a) when using any theme and I have a custom button I cannot get it to display the button normally without a problem with the background. I have added the below to my stylesheet as per the instructions but to no avail:

        .reTool .CRMTemplate<br>        {<br>            background-image: none !important;<br>        }<br>

This is my button definition:

                    <telerik:EditorTool Name="CRMTemplate" ImageUrl="/Images/insertField.png" ShowIcon="false"<br>                        ImageUrlLarge="/Images/insertField.png" Text="Insert CRM Template" Visible="true"<br>                        Enabled="true" ShowText="true" /><br>

The only way I have found to fix this was to add this in my page stylesheet:

        .reButton_text<br>        {<br>            background-image: none !important;<br>        }<br>

I don't know if that's normal behavior or an issue. You can find a sample of the problematic buttons at http://www.dotcy.com.cy/downloads/InvalidButtonBackground.png

b) the second problem I'm facing is with horizontal scrollbars when there is an image in the editor. It appears that automatically the minimum width of the editor becomes the width of the image. Even if I forcefully add a horizontal scrollbar it has no effect. You can find sample images at:
http://www.dotcy.com.cy/downloads/EditorScrollbar1.png and http://www.dotcy.com.cy/downloads/EditorScrollbar2.png

If anyone can help me solve these two issues I'd greatly appreciate it.

It appears issue b) is only occurring with full screen mode but I have to have it at full screen mode. I've been playing with the online demo and got very similar behavior. Please see the 2 attached image files.

[Rumen]

Hello,

1) Could you please provide a screenshot of the problem? When the ToolbarMode is set to Default, the ShowText="true" and ShowIcon="false", then the editor will not render the icon but only the button text as shown in the following video: http://screencast.com/t/KCngrQyZm6R. Do you want to render the custom button icon?

Note that the ImageUrl and ImageUrlLarge properties work only for the RibbonBar toolbar, but not for the Default.

Please, explain in more details what the exact problems is so that I can provide appropriate help.

2) I was unable to reproduce the problem in the live demos in which the ContentAreaMode is set to Iframe (the default value). You can see my test in this video: http://screencast.com/t/bVB47WMkw.

Have you set the ContentAreaMode property to DIV? In this case it is expected that the content area will be resided to fit the contents in it.

Please, provide reliable reproduction steps so that we can replicate the problem on our end.

Regards,
Rumen
the Telerik team

[Michael]

Hello Rumen,

1) I do not want to render an icon button no. I just added the image urls because I couldn't get it to work in any way other than changing the style I mentioned.

What I want is not to display the test without having an image with random icons as a background. Again this happens only if I select a theme like for example Office2007 or Outlook or Office 2010 Blue or Vista or Windows 7. Those are the ones I tried it with I believe. In your example you do not have a theme selected so your button shows ok. Please have a look at the image: http://www.dotcy.com.cy/downloads/InvalidButtonBackground.png. Why do I get all those random icons in the background of the button? I've created a stripped down version of the page I'm using in a sample website. I created a new website and removed most of the functionality from the page so it's just an editor with 2 buttons. Please use that one and you will be able to replicate the issue. You can download it from here as it won't let me attach a zip or rar file.

2) I've totally removed full screen mode and using Javascript to adjust the height and width as you will see in the example, I left that code in there. However if you want to replicate my example it's quite simple. Have a look at video here. That one is from your online demo as you will notice.

Please let me know if you need any more feedback from me.

Regards,
Michael

[Rumen]

Hi Michael,

To fix the problem you should set an XHTML DOCTYPE, e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


RadControls for ASP.NET AJAX are primarily designed to work on pages with XTHML doctype. XHTML is the current standard for HTML. Sites that are XHTML compliant have the best chance of being compliant with future versions of HTML and with future Web browsers. In addition, XHTML is much easier to deal with programmatically than traditional HTML so it is easier to use new technologies such as AJAX with a site that is XHTML compliant.

Best regards,
Rumen
the Telerik team

[Michael]

Hi Rumen,

Adding a doctype did the trick. I chose doctype HTML instead of XHTML but it works fine. It did cause a problem in IE going into an infinite loop for window.onresize event after adding that but I have tackled that. The issue now and it's quite critical is a bug with the spell check engine.

Take a look at this video from the online demo of the editor. As you can see each time I press spell check it duplicates the editor contents!!!!!!

This is a very critical issue for us as we are trying to use this as an email editor. It appears that the issue occurs if you have <style> tags in the contents. This is a sample HTML code of the editor body for you to replicate it:

<span style="font-family: Tahoma, Verdana, Arial; font-size: 13px;">Test spelling check<br />
<br />
------------------- Original Message -------------------<br />
<b>From:</b> M Stavrou<br />
<b>Received:</b> 27/06/2012 13:25<br />
<b>To:</b> [e-mail]<br />
<b>Subject:</b> RE: Test Copy Paste & Images CRM:00011013</span><br />
<br />
<meta name="Generator" content="Microsoft SafeHTML" />
<style>
</style>

If you remove the <style> tags it works fine. If you add them back it keeps duplicating the contents.

EDIT: And just a question if you don't mind answering. Is there any way to trigger the spell checking for selected text only or for a region somehow?

[Rumen]

Hi,

You should set XHTML but not HTML DOCTYPE, because as explained in my earlier post RadControls are designed for XHTML environment. If a non XHTML DOCTYPE is used you can experience side effects, which are not supported by RadControls for ASP.NET AJAX.

In your case, you can also replace the Ajax Spellchecker with the dialog based spellcheck as shown in the following KB article: Using RadSpell "Prometheus" dialog with RadEditor "Prometheus" as a custom tool.

Best regards,
Rumen
the Telerik team

[Michael]

Hi Rumen,

Thanks for your response. I prefer the HTML 5 doctype to be honest so that it's the same as the rest of the website and that's why I added it. It works fine so far and I don't want to change it unless I encounter problems with it.

Using this dialog the bug with replicating the contents doesn't occur. Is there any chance you will fix that bug in future releases?

I had various questions but managed to find answers to all except 1 now. I have a combination of languages that are checked. I'm changing the language by Javascript using the spell.set_dictionaryLanguage according to what the user selects on the split button. Below you can find a very cut down version of my editor code, I apologize if it's not 100% correct as I deleted a lot of things from it to fit it. The issue here is I want to check both Arabic and English, but when I set the spelling provider to edit distance the English is really messed up. Is there a way to switch it dynamically like the language?

<telerik:radspell id="prometheusDlgSpell" runat="server" buttontype="none" DialogsCssFile="PopupDialog.css"
    OnClientLoad="OnClientLoadSpellCheck" SpellCheckProvider="EditDistanceProvider" EditDistance="2" />

<div style="font-family: Verdana; font-size: 10pt; width: 100%; margin: 0px;">
    <telerik:RadEditor ID="reEmailEditor" runat="server" ContentAreaCssFile="~/Default.css"
        Skin="Office2007" AllowScripts="false"
        Style="margin: 0px; padding: 0px; font-family: Verdana; font-size: 10pt; border: 0px; min-height: 100px; min-width: 500px; width: 100%; height: 150px;"
        EnableResize="false" AutoResizeHeight="false" OnClientCommandExecuting="OnClientCommandExecuting">
        <Content>
        </Content>
        <CssFiles>
            <telerik:EditorCssFile Value="~/Default.css" />
        </CssFiles>
        <Tools>
           <telerik:editortoolgroup>
               <telerik:EditorSplitButton Name="SpellCheck">
                    <telerik:EditorDropDownItem Name="English (United States)" Value="en-US" />
                    <telerik:EditorDropDownItem Name="English (Great Britain)" Value="en-GB" />
                    <telerik:EditorDropDownItem Name="German (Germany)" Value="de-DE" />
                    <telerik:EditorDropDownItem Name="French (France)" Value="fr-FR" />
                    <telerik:EditorDropDownItem Name="Arabic" Value="ar-AR" />
               </telerik:EditorSplitButton>
           </telerik:editortoolgroup>
        </Tools>
    </telerik:RadEditor>
</div>


<script type="text/javascript">
    var lastCommandName;
    var lastCommandValue;

    function OnClientCommandExecuting(editor, args) {
        lastCommandName = args.get_name();
        lastCommandValue = args.get_value();
    }

    Telerik.Web.UI.Editor.CommandList.SpellCheck = function (commandName, editor) {
        var spell = GetRadSpell('<%= prometheusDlgSpell.ClientID %>');
        spell.set_dictionaryLanguage(lastCommandValue);
        spell.spellCheck(new PrometheusTextSource(editor));
        return false;
    }

    var PrometheusTextSource = function (editor) {
        this._editor = editor;
        this.get_text = function () { return this._editor.get_html(); };
        this.set_text = function (value) { this._editor.set_html(value); };
    }

    function OnClientLoadSpellCheck(spell) {
        spell.set_useClassicDialogs(true);
    }
</script>

Best Regards,
Michael

[Michael]

No longer applicable, only the question above remains.

[Rumen]

Hello,

I agree that the reported incorrect behavior is a bug and I logged it for fixing in our bug tracking system. Here you can find the PITS Issue: Public URL. I also updated your Telerik points for your feedback.

I could not provide a firm estimate when it will be fixed, but you can use the dialog based spellchecker as a workaround.

Kind regards,
Rumen
the Telerik team

[Michael]

Hi Rumen,

Thank you for the reply. I only have 1 question left and that's if I can set the edit distance provider via Javascript. I think my previous posts were too big for you to spot it.

Thanks again for all your help.

Regards,
Michael

[Rumen]

Hello,

The dictionary provider of RadSpell can be changed only on the server.

All the best,
Rumen
the Telerik team

[Michael]

Hi Rumen,

we are currently using the custom text source for spell checking selections within the editor.

<telerik:RadSpell ID="prometheusDlgSpell" runat="server" ButtonType="none" DialogsCssFile="PopupDialog.css" DictionaryLanguage="en-US"
    OnClientLoad="OnClientLoadSpellCheck" SpellCheckProvider="EditDistanceProvider" EditDistance="1" Language="en-US" />

 

var spell = GetRadSpell('<%= prometheusDlgSpell.ClientID %>');
spell.set_dictionaryLanguage(lastCommandValue);
spell.spellCheck(new PrometheusTextSourceSel(editor));

// This function is used to get or set the editor contents after spell checking the currently selected text.
// This is why it only reads the selection and then replaces the selection.
var PrometheusTextSourceSel = function (editor) {
this._editor = editor;
this.get_text = function () { return this._editor.getSelectionHtml(); };
this.set_text = function (value) { this._editor.pasteHtml(value); };
}

It seems that in certain cases the spell checking will aslo check within the HTML tags, instead of only the text parts of the editor.

Is using the custom source a valid approach for spellchecking selections? if not what other alternatives do we have?

Thanks Again for all the help

[Marin Bratanov]

Hello Michael,

You can try the getText() method of the selection object to get only text and not the full HTML. See this help article for more information on this method.


All the best,
Marin Bratanov
the Telerik team

[Michael]

The problem with the suggestion is that if try to paste back the html (actually from your suggestion text now) it will distort the HTML as we are pasting text. The getText() of the selection object will return text, which in turn after the spell checking, and we will need to replace the selection with the spell checked text, it will distort our HTML.

Please advise

[Rumen]

Hi,

The solution provided in the Using RadSpell "Prometheus" dialog with RadEditor "Prometheus" as a custom tool should be used without modifications, because if you replace the set_html method with pasteHtml you can experience side effects as the reported ones. The spellchecker should spellcheck the whole content but not selections and should replace the whole content.

Best regards,
Rumen
the Telerik team