RichTextBox and SpellChecker

Question

1. Spellchecker locates spelling errors in a RichTextBox but then does not change the text when Change is selected. In the example below all errors in the Facebook paragraph (except for collge, strangely) are handled correctly, but although any misspelled word entered into the RichTextBox are identified, they are not corrected.2. Assuming the above issue is resolved, is there a way to add the spellchecker as one of the tools in the RTE toolbar?

Facebook is a social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo, Andrew McCollum, Dustin and Chris Hughes. The fouders had initially limited the websites membrship to Harvard students, but later expanded it to collges in the Boston area, the Ivy League, and Stanford Univrsity. It graually added support for students at various other universities and later to high-school students.

@{ List toolsList = new List() { "style", "alignment", "lists", "indenting", "doAction" }; List style = new List() { "bold", "italic", "underline" }; List lists = new List() { "unorderedList", "orderedList" }; List indenting = new List { "outdent", "indent" }; List doAction = new List() { "undo", "redo" }; }

Keerthana Rajendran · Answer

Hi Doug, We can include SpellChecker as custom tool for RTE and check the errors through spell dialog. Please refer to the below given code. @{ List toolsList = new List() { "customTools" }; }

Facebook is a social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo, Andrew McCollum, Dustin and Chris Hughes. The fouders had initially limited the websites membrship to Harvard students, but later expanded it to collges in the Boston area, the Ivy League, and Stanford Univrsity. It graually added support for students at various other universities and later to high-school students.

Please refer to the below given UG and demo link. Demo: https://js.syncfusion.com/demos/web/#!/bootstrap/rte/spellcheck UG: https://help.syncfusion.com/js/richtexteditor/howto#rte---spellcheck-integration Regards, Keerthana.

Doug Colpitts · Answer

Thank you very much for this, but I am still having a problem. On a clean cshtml page in my VS 2017 project I have just the code as below, almost exactly the same as your example. When I run it, the icon appears fine on the toolbar of the RTE and brings up the dialog when clicked. However, there is no squiggly red underlining of the incorrect word and there are no Suggestions given. (see spellcheck.png in attached zip).As well I copied the example you provide in your reply below and when I run it there are also no squiggly red underlining of the incorrect words and there are no Suggestions given.On another page I have the spellchecker checking textareas instead using the usual method and all works as expected. (see spellcheckok.png in attached zip).

@{ List toolsList = new List() { "style", "alignment", "lists", "indenting", "doAction", "customTools" }; List style = new List() { "bold", "italic", "underline" }; List lists = new List() { "unorderedList", "orderedList" }; List indenting = new List { "outdent", "indent" }; List doAction = new List() { "undo", "redo" }; }

Attachment: spellcheckscreenshots_331a4a53.zip

Keerthana Rajendran · Answer

Hi Doug, 
 
We regret for the inconvenience. 
 
This issue occurs because the proper url is not assigned for dictionaryUrl. Please modify the Url as shown below 
 





function Oncreate() { 
        var css = "html,body{font-family:sans-serif;font-size:16px; }"; 
        var editorDoc = $("#myRTEtext").ejRTE("instance").getDocument(); 
        var styleTag = document.createElement("style"); 
        rteObj = this; 
        styleTag.type = "text/css"; 
        if (styleTag.styleSheet) 
            styleTag.styleSheet.cssText = css; 
        else 
            styleTag.appendChild(document.createTextNode(css)); 
        editorDoc.head.appendChild(styleTag); 
        rteObj._rteIframe.ejSpellCheck({ 
            dictionarySettings: { 
                dictionaryUrl: "http://js.syncfusion.com/ejServices/api/SpellCheck/CheckWords", 
                customDictionaryUrl: "http://js.syncfusion.com/ejServices/api/SpellCheck/AddToDictionary" 
            }, 
            contextMenuSettings: { enable: true }, 
            enableValidateOnType: true, 
            enableAsync: false, 
            ajaxDataType: "json", 
            actionSuccess: function (args) { 
                if (args.requestType === "addToDictionary") { 
                    rteObj.setHtml(args.resultHTML); 
                } 
            }, 
            contextOpen: function (args) { 
                args.cancel = true; 
            }, 
            dialogBeforeOpen: function (args) { 
                if (args.requestType === "alertBeforeOpen") { 
                    args.cancel = true; 
                } 
            } 
        }); 
    }  
 
We have prepared a sample for your reference. Please download the sample from 
 
RTESpellCheck 
 
Regards, 
Keerthana.

Doug Colpitts · Answer

Thank you - should have noticed that one myself,D

Keerthana Rajendran · Answer

Hi Doug, 
 
Most Welcome. Please get back to us if you require further assistance on this. We will be happy to assist you. 
 
Regards, 
Keerthana.