How to Implement Spellcheck?

Hello, I am curious how to enable spellcheck on the document editor. I see from an older thread that it requires a serverside interaction but that was a whole project with a startup and etc. What is the simplest way I can implement a controller to handle spellcheck in one file?


6 Replies

AE Ajithamarlin Edward Syncfusion Team August 24, 2022 04:35 AM UTC

HI Riley,


We will check and update further details shortly.


Regards,

Ajithamarlin E



RM Riley McLaughlin October 11, 2022 06:31 PM UTC

Any updates?



SM Suriya Murugan Syncfusion Team October 12, 2022 03:54 AM UTC

Hi Riley,   


Blazor Document editor requires server-side interaction to spell check the word. For that you have to write web services separately.   


If the serviceUrl is not set for document editor container component, then following services are provided by default.  
1.       Importing word Documents  
2.       Paste with formatting.  
3.       Restrict editing.  


For Spell check service, we have to configure manually by writing services and to set the url to serviceUrl of document editor container. If you set the service url, then you have to write service for all the services.  


Document editor requires services for below operations.   
1.       Importing word documents.   
2.       Paste with formatting.   
3.       Restrict editing   
4.       Spell checking.   


Kindly refer the below GitHub location for document editor web services.   


Please set the launched service url to document editor container service url.    


You can also refer the below documentation on spell checker properties which is in JavaScript.    


please refer the below code snippet for spell check settings in blazor platform.    
Sample code snippet   
//Please set your service url.   
<div>   
<SfDocumentEditorContainer ID="container" EnableSpellCheck="true"ServiceUrl="http://localhost:62869/api/documenteditor/"EnableToolbar="true">  
    <DocumentEditorContainerEvents></DocumentEditorContainerEvents>  
</SfDocumentEditorContainer>  
@code  
{  
    SfDocumentEditorContainer container;  
    public void onCreated()  
    {  
        var spellcheck = container.DocumentEditor.SpellChecker;  
// Document Editor provides multi-language spell check support. You can add as many languages (dictionaries) in the server-side and to use that language for spell checking in Document Editor, it must be matched with languageID you pass in the Document Editor.   
        spellcheck.SetLanguageID(1046);  
        spellcheck.SetRemoveUnderline(false);  
        spellcheck.SetAllowSpellCheckAndSuggestion(true);  
    }  
}  
   


-----------

If this post is helpful, please mark it as an answer so that other members can locate it more quickly.

Regards,  
Suriya M. 




RM Riley McLaughlin replied to Suriya Murugan October 31, 2022 11:17 PM UTC

I tried working with the repo but I am trying to narrow down what the minimum requirements are for spellcheck. In my blazor wasm project, I enabled the settings you posted on container.spellcheck on the OnLoad event. I see it posting to my controller in my blazor server project when I make changes. My spellcheck.json file is set to an empty list []. Here is my controller. What is it missing?


[Route("DocumentEditor")]

[ApiController]

public class DocumentEditorController : ControllerBase

{

static List spellDictCollection = new();

public DocumentEditorController()

{

Startup();

}


static string path = "C:\\Data\\MyApp";

static string jsonFileName = "spellcheck.json";

static string personalDictPath = "";

void Startup()

{

//check the spell check dictionary path environment variable value and assign default data folder

//if it is null.

//Set the default spellcheck.json file if the json filename is empty.

jsonFileName = Path.Combine(path, jsonFileName);

if (System.IO.File.Exists(jsonFileName))

{

string jsonImport = System.IO.File.ReadAllText(jsonFileName);

List spellChecks = JsonConvert.DeserializeObject>(jsonImport) ?? new();

spellDictCollection = new List();

//construct the dictionary file path using customer provided path and dictionary name

foreach (var spellCheck in spellChecks)

{

spellDictCollection.Add(new DictionaryData(spellCheck.LanguadeID, Path.Combine(path, spellCheck.DictionaryPath), Path.Combine(path, spellCheck.AffixPath)));

personalDictPath = Path.Combine(path, spellCheck.PersonalDictPath);

}

}

}


[AcceptVerbs("Post")]

[HttpPost]

[Route("SpellCheck")]

public string SpellCheck([FromBody] SpellCheckJsonData spellChecker)

{

try

{

SpellChecker spellCheck = new SpellChecker(spellDictCollection, personalDictPath);

spellCheck.GetSuggestions(spellChecker.LanguageID, spellChecker.TexttoCheck, spellChecker.CheckSpelling, spellChecker.CheckSuggestion, spellChecker.AddWord);

return Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck);

}

catch

{

return "{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}";

}

}


[AcceptVerbs("Post")]

[HttpPost]

[EnableCors("AllowAllOrigins")]

[Route("SpellCheckByPage")]

public string SpellCheckByPage([FromBody] SpellCheckJsonData spellChecker)

{

try

{

SpellChecker spellCheck = new SpellChecker(spellDictCollection, personalDictPath);

spellCheck.CheckSpelling(spellChecker.LanguageID, spellChecker.TexttoCheck);

return Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck);

}

catch

{

return "{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}";

}

}


public class SpellCheckJsonData

{

public int LanguageID { get; set; }

public string TexttoCheck { get; set; } = string.Empty;

public bool CheckSpelling { get; set; }

public bool CheckSuggestion { get; set; }

public bool AddWord { get; set; }


}



SM Suriya Murugan Syncfusion Team November 2, 2022 04:30 AM UTC

We will update details shortly.



SM Suriya Murugan Syncfusion Team November 8, 2022 11:16 AM UTC

Riley, have added the following configuration in your project?




https://github.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services/tree/master/ASP.NET%20Core#spell-check


In your JSON file, please add the below: 

[

  {

    "LanguadeID": 1033,

    "DictionaryPath": "en_US.dic",

    "AffixPath": "en_US.aff",

    "PersonalDictPath": "customDict.dic"

  }

]





Loader.
Up arrow icon