So, after a lot of investigation of this issue what I found is that I was referencing wrongly the spell-checker-worker.js on my main function that sets all the options for the DevExpress RichEdit component editor.
The solution for the spell-checker to function properly was to rewrite the function that loads all the initial options for the editor like this manner:
function loadOptionsToInitializeContainer() {
const options = DevExpress.RichEdit.createOptions();
options.confirmOnLosingChanges.enabled = true;
options.confirmOnLosingChanges.message = 'Are you sure you want to perform the action? All unsaved document data will be lost.';
options.width = '1100px';
options.height = '1100px';
options.bookmarks.visibility = true;
options.bookmarks.color = '#ff0000';
options.fields.updateFieldsBeforePrint = true;
options.fields.updateFieldsOnPaste = true;
options.rangePermissions.showBrackets = true;
options.rangePermissions.bracketsColor = 'red';
options.rangePermissions.highlightRanges = false;
options.rangePermissions.highlightColor = 'lightgreen';
options.handled = false;
// here is the function which enables the spell checking utility on the editor
enableSpellChecker(options, options.enableSpellChecker);
var contextMenu = options.contextMenu;
var reviewTab = new DevExpress.RichEdit.RibbonTab();
var ribbonButton = new DevExpress.RichEdit.RibbonButtonItem("addWordToDictionary", "Add word to dictionary", { icon: "check", showText: true, beginGroup: true });
reviewTab.insertItem(ribbonButton, 16);
reviewTab.id = 16;
reviewTab.localizationId = "Spellchecking tab";
reviewTab.title = "Spellchecker";
options.ribbon.insertTab(reviewTab, 16);
var mailMergeTab = options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.MailMerge);
options.ribbon.removeTab(mailMergeTab);
var tab = options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Insert);
var mailMergeTab = options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.MailMerge);
var tabHeadersFooters = options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.HeadersFooters);
var fileTab = options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.File);
var ribbonItemFooter = tab.getItem(DevExpress.RichEdit.InsertTabItemId.InsertFooter);
var ribbonItemHeader = tab.getItem(DevExpress.RichEdit.InsertTabItemId.InsertHeader);
var ribbonItemPageNumber = tab.getItem(DevExpress.RichEdit.InsertTabItemId.InsertPageNumberField);
var ribbonItemHeadersFooters = tabHeadersFooters.getItem(DevExpress.RichEdit.HeaderAndFooterTabItemId.ClosePageHeaderFooter);
// gets Home Tab
var fileItemSave = fileTab.getItem(DevExpress.RichEdit.FileTabItemId.ExportDocument);
// gets Save Option from Home Tab
// Removes Save item from Home Tab
fileTab.removeItem(fileItemSave);
tab.removeItem(ribbonItemFooter);
tab.removeItem(ribbonItemHeader);
tabHeadersFooters.removeItem(ribbonItemHeadersFooters);
var richElement = document.getElementById("rich-container");
return [richElement, options];
}
function enableSpellChecker(options, enableSpellChecker) {
let boolValue = enableSpellChecker.toLowerCase() == 'true' ? true : false;
options.spellCheck.enabled = boolValue;
options.spellCheck.suggestionCount = 5;
options.spellCheck.checkWordSpelling = function (word, callback) {
if (!spellCheckerWorker) {
var myDictionary = JSON.parse(localStorage.getItem('myDictionary')) || [];
// this is where the error was, I was clearly pointing out a wrong directory for the worker to properly function.
spellCheckerWorker = new Worker('/Scripts/devexpress-richedit/spell-checker-worker.js');
spellCheckerWorker.onmessage = function (e) {
var savedCallback = spellCheckerCallbacks[e.data.id];
delete spellCheckerCallbacks[e.data.id];
if (e.data.suggestions != undefined && e.data.suggestions.length > 0) {
savedCallback(e.data.isCorrect, e.data.suggestions);
} else {
savedCallback(e.data.isCorrect, myDictionary);
}
};
}
var currId = spellCheckerWorkerCommandId++;
spellCheckerCallbacks[currId] = callback;
spellCheckerWorker.postMessage({
command: 'checkWord',
word: word,
id: currId,
});
};
options.spellCheck.addWordToDictionary = function (word) {
var myDictionary = JSON.parse(localStorage.getItem('myDictionary')) || [];
myDictionary.push(word);
localStorage.setItem('myDictionary', JSON.stringify(myDictionary));
spellCheckerWorker.postMessage({
command: 'addWord',
word: word,
});
};
}
When I set up a demo page for checking out what the issue was is that the spell-checker-worker.js
on my Network Tab in Google Chrome was giving me a 200 result. It was properly functioning as it is supposed to.
After this, I was convinced that in my other main page, where the spellchecker is malfunctioning, there had to be something that is not correct there. And effectively, the problem was that the worker javascript file was referenced with a wrong relative path.
Instead of this which is the correct way to go:
spellCheckerWorker = new Worker('/Scripts/devexpress-richedit/spell-checker-worker.js');
I had it like this manner:
spellCheckerWorker = new Worker('./spell-checker-worker.js');
If to anyone has occurred a similar issue to this, please check this answer so it will save you any headaches as regards the corresponding matter.