Blazor SpellCheck implementation over DocumentEditor

[Esther Garcia del Barrio]

Hello!

I need to implement spell checking in the DocumentEditor component in Blazor.

I have tried setting the container properties as follows, but I am not doing it correctly:

@page "/"

@using System.IO;

@using Syncfusion.Blazor.DocumentEditor;

<SfDocumentEditorContainer @ref="container" EnableToolbar=true EnableSpellCheck=true>

    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>

</SfDocumentEditorContainer>

@code {

    SfDocumentEditorContainer container;

    public void OnCreated(object args)

    {

        string filePath = "sample.docx";

        using (FileStream fileStream = new FileStream(filePath, System.IO.FileMode.Open, System.IO.FileAccess.Read))

        {

            WordDocument document = WordDocument.Load(fileStream, ImportFormatType.Docx);

            string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);

            document.Dispose();

            SfDocumentEditor editor = container.DocumentEditor;

            editor.Open(json);

            editor.EnableSpellCheck = true;

            editor.SpellChecker.SetLanguageID(3082);

            editor.SpellChecker.SetRemoveUnderline(false);

            editor.SpellChecker.SetAllowSpellCheckAndSuggestion(true);

            editor.SpellChecker.SetEnableOptimizedSpellCheck(true);

            editor.SpellChecker.ClearCache();

        }

    }

}

[Suriya Murugan]

Hi Esther,   

 

 

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.   

 

https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices/tree/master/ASP.NET%20Core   

 

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.    

 

https://ej2.syncfusion.com/documentation/document-editor/spell-check/?no-cache=1   

 

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);  

    }  

}  

   

 

Regards,  

 

Suriya M.