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

blazor-toc.html

@@ -4233,7 +4233,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/web-spell-check">Web Spell Checker</a></li>
+					<li> <a href="/blazor/rich-text-editor/code-mirror">Code Mirror</a></li>
+					<li> <a href="/blazor/rich-text-editor/embedly">Embedly</a></li>
+					<li> <a href="/blazor/rich-text-editor/image-editor-integration">Image Editor Integration</a></li> 
 				</ul>
 			</li>
 			<li>Validation and Security

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

@@ -0,0 +1,43 @@
+window.initializeWebSpellChecker = 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 = {
+        // Replace with your 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 your text here with real spelling and grammar mistakes to see how WProofreader works. A lot of potential errors will be underlined; hover on the marked words for instant correction suggestions.</p>";
+
+    private async Task Created()
+    {
+        var id = rte?.ID ?? rteId;
+        await JS.InvokeVoidAsync("initializeWebSpellChecker", id);
+    }
+}

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

@@ -0,0 +1,99 @@
+---
+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).
+
+## Step 1: Set up the WProofreader SDK
+
+For integrating the Spell Checker you need to install the below NPM package:
+
+```bash
+npm install @webspellchecker/wproofreader-sdk-js
+```
+
+> **Note:** Register for a [Web Spell Checker](https://wproofreader.com/sdk) cloud service key and ensure that the `serviceId` is available.
+> For self‑hosted deployments, make sure the service endpoint settings are properly configured.
+
+## 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>
+```
+
+> The host page location varies by project type. Refer to the [Rich Text Editor Getting Started](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started) guide for the correct host page file path.
+>
+> **Note:** The Spell Checker script must be loaded before the custom interop file to ensure proper functionality.
+
+## 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
+
+## See also
+
+* [GitHub Example - Blazor Rich Text Editor with Web Spell Checker](https://github.com/SyncfusionExamples/blazor-richtexteditor-webspellchecker)