1008030: To create integration for the Web Spell Checker with the Blazor Rich Text Editor.

blazor-toc.html

@@ -4222,7 +4222,11 @@
 				<ul>
 					<li> <a href="/blazor/rich-text-editor/mention-integration">Mention Integration</a></li>
 					<li> <a href="/blazor/rich-text-editor/slash-commands">Slash Commands</a></li>
-					<li> <a href="/blazor/rich-text-editor/mail-merge">Mail Merge Integration</a></li>	
+					<li> <a href="/blazor/rich-text-editor/mail-merge">Mail Merge Integration</a></li>
+					<li> <a href="/blazor/rich-text-editor/code-mirror">Code Mirror Integration</a></li>
+					<li> <a href="/blazor/rich-text-editor/embedly">Embedly Integration</a></li>
+					<li> <a href="/blazor/rich-text-editor/web-spell-check">Web Spell Check</a></li>
+					<li> <a href="/blazor/rich-text-editor/image-editor">Image Editor</a></li>
 				</ul>
 			</li>
 			<li>Validation and Security

blazor/rich-text-editor/code-snippet/spell-checker.js

@@ -0,0 +1,43 @@
+window.myJsFunction = function (sfId) {
+    if (!window.sfBlazor || !sfBlazor.instances) {
+        console.warn('sfBlazor not available');
+        return;
+    }
+
+    const editor = sfBlazor.instances[sfId];
+    if (!editor) {
+        console.warn('Editor instance not found for ID:', sfId);
+        return;
+    }
+
+    const rteContainer = editor.element
+        ? editor.element.querySelector('.e-rte-container')
+        : null;
+
+    if (!rteContainer) {
+        console.warn('RTE container not found');
+        return;
+    }
+    window.WEBSPELLCHECKER_CONFIG = {
+        // Get the activation key from your registered account
+        serviceId: 'Your activation key',
+        autoSearch: true,
+        lang: 'en_US',
+        selectors: [
+            { selector: rteContainer }            
+        ],
+        // Optional:
+        // theme: 'gray',
+    };
+    const tryInitialize = () => {
+        if (window.WEBSPELLCHECKER && typeof window.WEBSPELLCHECKER.startAutoSearch === 'function') {
+            window.WEBSPELLCHECKER.startAutoSearch();
+            console.log('WProofreader initialized successfully');
+        } else {
+            console.log('WProofreader not ready yet — retrying...');
+            setTimeout(tryInitialize, 300);
+        }
+    };
+
+    tryInitialize();
+};

blazor/rich-text-editor/code-snippet/spell-checker.razor

@@ -0,0 +1,20 @@
+@page "/spell-checker"
+
+@using Syncfusion.Blazor.RichTextEditor
+@inject IJSRuntime JS
+
+<SfRichTextEditor ID="@RteId" @ref="rte" Value="@InitialHtml">
+    <RichTextEditorEvents Created="@Created"></RichTextEditorEvents>
+</SfRichTextEditor>
+
+@code {
+    private SfRichTextEditor? rte;
+    private string RteId { get; } = "sfrichtexteditor";
+    private string InitialHtml = @"<p>Enter you're text here with real spelling and grammer mistakes to see how WProofreader work. Alot of potential errors will be underlined; hover on the marked wods for instant correction suggesstions.</p>";
+
+    private async Task Created()
+    {
+        var id = rte?.ID ?? RteId;
+        await JS.InvokeVoidAsync("myJsFunction", id);
+    }
+}

blazor/rich-text-editor/web-spell-check.md

@@ -0,0 +1,95 @@
+---
+layout: post
+title: Spell Checker in Blazor RichTextEditor Component | Syncfusion
+description: Learn how to integrate WProofreader spell-checking support into the Syncfusion Blazor Rich Text Editor, including setup steps, package installation, and usage.
+platform: Blazor
+control: RichTextEditor
+documentation: ug
+---
+
+# Integrate Spell Checker into the Blazor Rich Text Editor Component
+
+WProofreader enables real-time spelling, grammar, and style checks inside the Rich Text Editor editable area. The SDK attaches to the editor content element and provides suggestions without changing the editor workflow.
+
+## Key features
+
+- Real-time spelling and grammar suggestions.
+- Multilingual support and custom dictionaries.
+- Cloud and on-premise deployment options.
+
+## Prerequisites
+
+Before proceeding, ensure you have completed the basic Rich Text Editor setup as outlined in the Getting Started guide. This includes configuring the Blazor project, installing the required packages, importing the necessary CSS files, injecting the modules, and adding the basic editor markup.
+
+Refer to the guide here: [Getting Started with Blazor Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-with-server-app).
+
+## Key features
+- Real-time spelling and grammar suggestions.
+- Multilingual support and custom dictionaries.
+- Cloud and on-premise deployment options.
+
+## Step 1: Set up the WProofreader sdk
+
+For integrating the WProofreader refer the following link : [web spell checker](https://webspellchecker.com), you need to install the `@webspellchecker/wproofreader-sdk-js` package using NPM:
+
+```bash
+npm install @webspellchecker/wproofreader-sdk-js
+```
+
+> Note: Register for a [WProofreader](https://wproofreader.com/sdk) cloud service key and keep the `serviceId` ready. For self-hosted deployment, prepare the service endpoint settings.
+
+## Step 2: Add the JavaScript Interop File
+
+Create the JavaScript interop module to handle communication between Blazor and Spell Checker.
+
+### 2.1 Create the interop file
+
+In your Blazor project, create a new folder named `wwwroot/scripts/` and add a file called `spell-checker.js` to include the code shown below.
+
+{% tabs %}
+{% highlight javascript %}
+
+{% include_relative code-snippet/spell-checker.js %}
+
+{% endhighlight %}
+{% endtabs %}
+
+### 2.2 Verify file placement
+
+Ensure the file is located at:
+
+```
+YourProject/
+└── wwwroot/
+    └── scripts/
+        └── spell-checker.js
+```
+
+## Step 3: Add Script Reference in Host Page
+
+Add the script references in your host page before the closing `</body>` tag:
+
+```html
+<body>
+    ....
+    <!-- Syncfusion CSS and Script references -->
+    <script src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>
+    <script src="/scripts/spell-checker.js"></script>
+</body>
+```
+
+## Step 4: Create the Razor Component
+
+Create a new Razor component file named **`RichTextEditorWithSpellChecker.razor`** in your **Pages** directory:
+
+{% tabs %}
+{% highlight cshtml %}
+
+{% include_relative code-snippet/spell-checker.razor %}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Additional resources
+
+- WProofreader SDK: https://www.npmjs.com/package/@webspellchecker/wproofreader-sdk-js