CODEWITHSUNDEEP
javascriptasp.netasp.net-mvc-3ckeditorspell-checking
Thomas Bates
Thomas Bates

Reputation: 677

ASPNetSpell Spell Checker integrated with CKEditor 3 doesn't work with Chrome

I've been working to integrate ASPNetSpell's spell checker (http://www.aspnetspell.com/) into CKEditor (http://ckeditor.com/). 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 recommendation 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 come 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 = "Welcome 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 comment out this line line it works.

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

Upvotes: 17

Views: 2156

Answers (2)

Jake
Jake

Reputation: 126

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

Thanks for the community input! Much appreciated.

The to apply the solution:

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

The clarify Chrome compatibility:

  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.

Upvotes: 2

Konstantin
Konstantin

Reputation: 3696

If you read the very last line of this page http://www.aspnetspell.com/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."

Upvotes: 1

Related Questions