The integration of ASPNetSpell Spell Checker with CKEditor 3 is not functioning properly on Chrome browsers

In my efforts to incorporate ASPNetSpell's spell checker () into CKEditor (), I have encountered some unexpected behavior across different browsers - IE 8+, FireFox 12, and Chrome 18.0.1025.152m.

The issue seems to be that in Chrome, ASPNetSpell is unable to locate the CKEditor instance, while it functions correctly in IE and Firefox.

I followed the guidance provided in ASPNetSpell documentation for integration with various HTML editors like FCKEditor, CKEditor, TinyMCE:

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

Setting the Fields value to "EDITORS" should instruct ASPNetSpell's client-side script to search for all IFrames.

In Chrome, the modal dialog displays, and a server request is made, but upon returning to the dialog, it behaves as if no fields were set for spell checking. This behavior is consistent with IE and Firefox when there are typos in the Fields intended for checking.

My inquiries are as follows:

  1. Has anyone successfully used ASPNetSpell's spell checker in Chrome with an HTML Editor?
  2. What steps can I take next to troubleshoot this issue?
  3. Why are the spelling suggestions not loading in the modal dialog?

Update:

I have reached out to their support team again, sharing a link to this discussion thread. Hopefully, ASPNETSPELL will provide insights or assistance soon.

Clarification:

It's worth noting that SCAYT (spell check as you type) on a textarea within the editor is not supported by ASPNETSPELL. My objective is specifically focused on explicit spell checking triggered by clicking a button.

Update #2:

After downloading the latest ASPNETSPELL package recommended by ASPNetSpell Support, I am still facing challenges in making it function properly in Chrome (current version 21.0.1180.89 m). It does work without issues when validating just a textarea without any attached CKEditor instance.

Below is how my Razor view currently appears:

@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 the line mentioned above, the functionality works as expected.

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

Answer №1

Great news! The issue has been successfully resolved. Thank you for bringing it to our attention.

We truly appreciate the valuable input from the community!

To implement the solution:

  1. Get the package from
  2. Update the ASPNetSpellInclude directory
  3. Make sure to clear all browser caches

About Chrome compatibility:

  1. ASPNetSpell now supports Chrome, as well as Safari, IE6-9, Opera, and FireFox.
  2. For rich editors in various browsers, "SpellCheck As You Type" may not function due to conflicts between technologies used in Textareas and editable DIV elements.

Answer №2

After exploring the final passage on this website , it appears that spell checking as you type is not compatible with certain editors. Specifically, the statement "Only the SpellButton works in this way.... AsYouType cannot work with these editors directly." suggests limitations on real-time spell checking for these types of editors.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

NodeJs for Updating Data: An Essential Guide

When attempting to update user data in my database using a Node.js app with ExpressJS, I encountered the following error in the terminal: sqlMessage: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version fo ...

Issue: encountered an ECONNRESET error when attempting to read using the request module in mode.js

When attempting to download and parse large XML files from affiliate sites without a proper API, I encounter the same error consistently while using the request module for Node.js. Error: read ECONNRESET at exports._errnoException (util.js:746:11) at TCP. ...

What is the correct way to end this jQuery statement?

I've been working on this for about 6 hours now. I ran it through multiple Lint tools and various other online tests, but I just can't seem to get the statement below to close properly. There's a persistent error showing up on the last line ...

Locally hosted website failing to transfer login details to external domain

Having trouble with an ajax call that is supposed to retrieve data from a web page, but instead returns a jQuery parse Error. Even though I can access the page directly, the ajax call doesn't seem to be working and storing the result properly. Below ...

Looking for a way to utilize JavaScript to extract data from a database? I'm currently utilizing jQuery autocomplete and seeking to exclusively search for values within the database

Currently utilizing jQuery autocomplete <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags });}); </script> Any s ...

Use Javascript to display an image based on the date, otherwise hide the div

I'm looking to implement an image change on specific dates (not days of the week, but actual calendar dates like August 18th, August 25th, September 3rd, etc). Here's the div I'm working with: <div id="matchday"> <img id="home ...

Why Jquery's nth-child selection and conditional formatting are failing to work

I am working with a table and need to format specific data fields based on their content. For instance, any field less than 95% should be highlighted in red. Below is the jQuery code I am using: $(function(){ $('#ConditionalTable td:nth-child(2n ...

Creating a Mongoose schema to store an array of objects, where updates will automatically add new objects

const mongoose = require('mongoose'); module.exports = mongoose.model('GridModel', { Request_Id : { type : Number, required : true }, viewStudents : { type : Array , default : [] } }); The mongoose model above needs to b ...

Tips for managing lag caused by large raw image re-renders in a React application

When trying to change the background position of a user-uploaded background image that is in raw Data URI format using CSS, I noticed that re-rendering becomes slow if the image size exceeds 1mb. This issue does not occur with smaller images. Is there a ...

Tips for calculating the total number of items within nested categories using a self-referencing category table

Currently, I am utilizing various technologies such as C#, ASP.Net, Entity Framework, LINQ, and Microsoft SQL Server. Within my database, I have two tables structured as follows: tblCategories Id Name ParentId (ParentId refers to the Id of another categor ...

Integrate a Facebook Like-box within a customized jQuery modal window

I've been working on inserting the Facebook like-box code into my page and trying to display it within a jQuery modal dialog. Here's the code I'm using: <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>< ...

Mongoose encounters an issue: MissingSchemaError is thrown because the Schema has not been registered for the model

Encountering a perplexing error that I can't seem to resolve. I HAVE NAMED THE REF EXACTLY AS THE MODEL: MissingSchemaError: Schema hasn't been registered for model "ParticipantStatus". Here are the models in question: ParticipantStatus model: c ...

The issue of inaccurate positioning and rotation in three.js is often attributed to problems with sprite

I'm attempting to generate a sprite with text without utilizing TextGeometry for improved performance. var fontsize = 18; var borderThickness = 4; var canvas = document.createElement('canvas'); var context = canvas.getContext('2d' ...

Using JavaScript to generate JSON data in a plain text format rather than using HTML

I have a snippet of code that retrieves the user's location every 5 seconds. <div id="geo" onLoad=""></div> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPo ...

Tips for identifying incognito mode and launching a fresh tab within an already open incognito window

I may not be a professional developer, but I created a Chrome extension app. You can check it out here: Link to Chrome Extension This app currently adds a context menu and opens a new tab in Chrome. However, one of my users has asked me to make the app wo ...

The functionality of ("ID").Value seems to be malfunctioning within an ASP.net user control

In my ASP.net ascx page, I have a textbox like the one below: <input type="text" maxlength="200" runat="server" id="txt_OTP" /> I am trying to retrieve the input value of this textbox using jQuery within the same ascx page. However, the .value or . ...

Activate the class only on the current element

I need help with a specific functionality on my website. I have multiple sections with content and buttons, and when a button is clicked, I want to add an active class to the corresponding content section within the same row. <div id="1" class="row"> ...

Transferring components as props from a higher order component (HOC) to the wrapped component

In my recent React project, I incorporated Higher Order Components (HOCs) to pass components as props to the wrapped component. I am curious if this approach has any drawbacks. Below is an example: HOC: import AnotherComponent from './a' funct ...

jQuery image resizing for elements

I have successfully adjusted the images in the gallery to display one per row for horizontal orientation and two per row for vertical orientation. Now, I am facing a challenge in making the images scalable so they can resize dynamically with the window. A ...

Exploring various components within a JavaScript array

I keep a list of names in a file named Ignore.json [ "George", "Carl" ] The filename is ignore.json Within my program, I load the contents of the file into a variable called ignore var ignore; ignore = require("./Ignore.json"); Now, I need to check i ...