javascript - ASPNetSpell Spell Checker integrated with CKEditor 3 doesn't work with Chrome - Stack Overflow

I've been working to integrate ASPNetSpell's spell checker (/) into CKEditor (/). I'm seeing some unsettling behavior between IE 8+, FireFox 12 and Chrome 18.0.1025.152m.

The short of it seems to be that ASPNetSpell can't find the instance of CKEditor in Chrome, but in IE and Firefox it can.

I've followed the remendation in ASPNetSpell docs to integrate into "all major HTML Editors including FCKEditor, CKEditor, TinyMCE...":

var spellinstance = new LiveSpellInstance();
spellinstance.Fields = "EDITORS";
spellinstance.ServerModel = "aspx";
spellinstance.DrawSpellImageButton();

My understanding is that when you set the Fields to "EDITORS" this instructs ASPNetSpell's client-side script to look for all IFrames.

The modal dialog however does show in Chrome and I do see it make a request to the server, but when it returns to the dialog it's behaving like there were no fields set to spell check. IE and Firefox will behave this way when you have a typo in your Fields to check.

I have the following questions:

1. Has anyone had any experience with using ASPNetSpell's spell checker in Chrome with an HTML Editor?
2. Where could I look next?
3. Why doesn't the modal dialog load the spelling suggestions?

Update

I have sent another email to their support including a link to this post. Hopefully, ASPNETSPELL will e add some expertise.

Clarification

I am aware ASPNETSPELL doesn't support SCAYT (spell check as you type) on a textarea used by the editor. The functionality I am seeking is the explicit spell check done when you click the button.

Update #2

I have downloaded the recent ASPNETSPELL package referenced in ASPNetSpell Support's answer. I am still having no luck getting this to work inside Chrome (current version now is 21.0.1180.89 m). It will work when just validating a textarea with no CKEditor instance attached.

Below is what my Razor view looks like currently.

@using ASPNetSpell
@{  
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Wele to my Web Site!";
}
@{
    ASPNetSpell.Razor.SpellButton mySpellButton = new ASPNetSpell.Razor.SpellButton();
    mySpellButton.InstallationPath = ("/Content/ASPNetSpellInclude");
    mySpellButton.FieldsToSpellCheck = "myTextArea";
}
<p>
    <div id="spellcheckthis">
        <textarea id="myTextArea"></textarea>
    </div>
    <div>
        @Html.Raw(mySpellButton.getHtml())
    </div>
</p>
<script type="text/javascript" src="/scripts/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/scripts/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
    $("#myTextArea").ckeditor();
</script>

When I ment out this line line it works.

$("#myTextArea").ckeditor();

I've been working to integrate ASPNetSpell's spell checker (http://www.aspnetspell./) into CKEditor (http://ckeditor./). I'm seeing some unsettling behavior between IE 8+, FireFox 12 and Chrome 18.0.1025.152m.

The short of it seems to be that ASPNetSpell can't find the instance of CKEditor in Chrome, but in IE and Firefox it can.

I've followed the remendation in ASPNetSpell docs to integrate into "all major HTML Editors including FCKEditor, CKEditor, TinyMCE...":

var spellinstance = new LiveSpellInstance();
spellinstance.Fields = "EDITORS";
spellinstance.ServerModel = "aspx";
spellinstance.DrawSpellImageButton();

My understanding is that when you set the Fields to "EDITORS" this instructs ASPNetSpell's client-side script to look for all IFrames.

The modal dialog however does show in Chrome and I do see it make a request to the server, but when it returns to the dialog it's behaving like there were no fields set to spell check. IE and Firefox will behave this way when you have a typo in your Fields to check.

I have the following questions:

1. Has anyone had any experience with using ASPNetSpell's spell checker in Chrome with an HTML Editor?
2. Where could I look next?
3. Why doesn't the modal dialog load the spelling suggestions?

Update

I have sent another email to their support including a link to this post. Hopefully, ASPNETSPELL will e add some expertise.

Clarification

I am aware ASPNETSPELL doesn't support SCAYT (spell check as you type) on a textarea used by the editor. The functionality I am seeking is the explicit spell check done when you click the button.

Update #2

I have downloaded the recent ASPNETSPELL package referenced in ASPNetSpell Support's answer. I am still having no luck getting this to work inside Chrome (current version now is 21.0.1180.89 m). It will work when just validating a textarea with no CKEditor instance attached.

Below is what my Razor view looks like currently.

@using ASPNetSpell
@{  
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Wele to my Web Site!";
}
@{
    ASPNetSpell.Razor.SpellButton mySpellButton = new ASPNetSpell.Razor.SpellButton();
    mySpellButton.InstallationPath = ("/Content/ASPNetSpellInclude");
    mySpellButton.FieldsToSpellCheck = "myTextArea";
}
<p>
    <div id="spellcheckthis">
        <textarea id="myTextArea"></textarea>
    </div>
    <div>
        @Html.Raw(mySpellButton.getHtml())
    </div>
</p>
<script type="text/javascript" src="/scripts/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/scripts/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
    $("#myTextArea").ckeditor();
</script>

When I ment out this line line it works.

$("#myTextArea").ckeditor();

• javascript
• asp
• asp-mvc-3
• ckeditor
• spell-checking

Share Improve this question Follow edited Oct 1, 2012 at 15:54 Thomas Bates asked Apr 27, 2012 at 1:44 Thomas BatesThomas Bates 67744 silver badges1515 bronze badges 8

• 1 As someone who's unfamiliar with ASPNetSpell but intrigued by the question, my first step was to investigate that product. Loading http://www.aspnetspell./ froze Chrome, and rendered Firefox nearly unusable. Note I'm on an 8GB 2.7GHz Intel i5 – pretty unsettling. – Barney Commented Sep 20, 2012 at 13:03
• @Barney, what version of chrome are you using? It loads fine with 21.0.1180.89. – Ray Cheng Commented Sep 21, 2012 at 23:10
• 1 21.0.1180.80. It renders to the point of showing the static example of the demo, but the page is pletely static — the cursors doesn't even change on hover. To be fair this is just a performance issue and not specifically relevant to the technical problem the OP's interested in. – Barney Commented Sep 22, 2012 at 12:59
• @Barney haha! you're right, I didn't notice the static example. If I type new content in the demo text editor it keeps showing the marketing jargon. – Thomas Bates Commented Sep 27, 2012 at 15:59
• btw, I did reach out to the creators of ASPNETSPELL, but they haven't responded – Thomas Bates Commented Sep 27, 2012 at 15:59

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 2 +50

This issue is now resolved. Thanks for reporting a valid issue.

Thanks for the munity input! Much appreciated.

The to apply the solution:

1. Download the package from http://www.aspnetspell./ASPNetSpell_Packages
2. Update your ASPNetSpellInclude directory
3. Clear all browser caches just to be sure

The clarify Chrome patibility:

1. ASPNetSpell supports Chrome alongside Safari, IE6-9, Opera, FireFox etc....
2. For all rich editors in all browsers, "SpellCheck AS You Type" is not available for rich HTML editors. This is because both technologies override Textareas with an editable DIV element - causing a conflict of interest.

If you read the very last line of this page http://www.aspnetspell./Rich_HTML_Editors it seems to indicate that spell as you type is not supported for these type of editors... Quote "Only the SpellButton works in this way.... AsYouType cannot work with these editors directly."