Hello
@@Maria
@@ -59,15 +58,15 @@
}
#mention-TemplateList .e-badge-success {
background-color: #4d841d;
- color: #fff;
+ color: #fff;
}
#mention-TemplateList .e-badge-success.away {
background-color: #fedd2d;
- color: #fff;
+ color: #fff;
}
- #mention-TemplateList .e-badge-success.busy {
+ #mention-TemplateList .e-badge-success.busy {
background-color: #de1a1a;
- color: #fff;
+ color: #fff;
}
#mention-TemplateList .e-badge.e-badge-dot {
height: 10px;
@@ -78,25 +77,25 @@
}
@code {
- public class PersonData
- {
- public string Name { get; set; }
- public string EmailId { get; set; }
- public string EmployeeImage { get; set;}
- public string Status { get; set;}
- }
- List EmailData = new List {
- new PersonData() { Name="Selma Rose", Status = "active", EmployeeImage="2.png", EmailId="selma@gmail.com" },
- new PersonData() { Name="Russo Kay", Status = "away", EmployeeImage="8.png", EmailId="russo@gmail.com" },
- new PersonData() { Name="Camden Kate", Status = "busy", EmployeeImage="9.png", EmailId="camden@gmail.com" },
- new PersonData() { Name="Garth", Status = "active", EmployeeImage="7.png", EmailId="garth@gmail.com" },
- new PersonData() { Name="Ursula Ann", Status = "busy", EmployeeImage="3.png", EmailId="ursula@gmail.com" },
- new PersonData() { Name="Margaret", Status = "active", EmployeeImage="10.png", EmailId="margaret@gmail.com" },
- new PersonData() { Name="Laura Grace", Status = "away", EmployeeImage="1.png", EmailId="laura@gmail.com" },
- new PersonData() { Name="Robert", Status = "busy", EmployeeImage="dp.png", EmailId="robert@gmail.com" },
- new PersonData() { Name="Albert", Status = "away", EmployeeImage="8.png", EmailId="albert@gmail.com" },
- new PersonData() { Name="Michale", Status = "active", EmployeeImage="4.png", EmailId="michale@gmail.com" },
- new PersonData() { Name="Andrew James", Status = "active", EmployeeImage="db.png", EmailId="james@gmail.com" },
- new PersonData() { Name="William", Status = "active", EmployeeImage="10.png", EmailId="william@gmail.com" }
- };
+ public class PersonData
+ {
+ public string Name { get; set; }
+ public string EmailId { get; set; }
+ public string EmployeeImage { get; set; }
+ public string Status { get; set; }
+ }
+ List EmailData = new List {
+ new PersonData() { Name = "Selma Rose", Status = "active", EmployeeImage = "2.png", EmailId = "selma@gmail.com" },
+ new PersonData() { Name = "Russo Kay", Status = "away", EmployeeImage = "8.png", EmailId = "russo@gmail.com" },
+ new PersonData() { Name = "Camden Kate", Status = "busy", EmployeeImage = "9.png", EmailId = "camden@gmail.com" },
+ new PersonData() { Name = "Garth", Status = "active", EmployeeImage = "7.png", EmailId = "garth@gmail.com" },
+ new PersonData() { Name = "Ursula Ann", Status = "busy", EmployeeImage = "3.png", EmailId = "ursula@gmail.com" },
+ new PersonData() { Name = "Margaret", Status = "active", EmployeeImage = "10.png", EmailId = "margaret@gmail.com" },
+ new PersonData() { Name = "Laura Grace", Status = "away", EmployeeImage = "1.png", EmailId = "laura@gmail.com" },
+ new PersonData() { Name = "Robert", Status = "busy", EmployeeImage = "dp.png", EmailId = "robert@gmail.com" },
+ new PersonData() { Name = "Albert", Status = "away", EmployeeImage = "8.png", EmailId = "albert@gmail.com" },
+ new PersonData() { Name = "Michael", Status = "active", EmployeeImage = "4.png", EmailId = "michael@gmail.com" },
+ new PersonData() { Name = "Andrew James", Status = "active", EmployeeImage = "db.png", EmailId = "james@gmail.com" },
+ new PersonData() { Name = "William", Status = "active", EmployeeImage = "10.png", EmailId = "william@gmail.com" }
+ };
}
diff --git a/blazor/rich-text-editor/code-snippet/mention-min-length.razor b/blazor/rich-text-editor/code-snippet/mention-min-length.razor
index b4781ce814..ac29cd4bbc 100644
--- a/blazor/rich-text-editor/code-snippet/mention-min-length.razor
+++ b/blazor/rich-text-editor/code-snippet/mention-min-length.razor
@@ -1,9 +1,7 @@
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.RichTextEditor
-
-
Hello
@@Maria
@@ -23,14 +21,14 @@
{
public string Name { get; set; }
public string EmailId { get; set; }
- public string EmployeeImage { get; set;}
- public string Status { get; set;}
+ public string EmployeeImage { get; set; }
+ public string Status { get; set; }
}
List EmailData = new List {
- new PersonData() { Name="Selma Rose", EmailId="selma@gmail.com" },
- new PersonData() { Name="Russo Kay", EmailId="russo@gmail.com" },
- new PersonData() { Name="Camden Kate", EmailId="camden@gmail.com" },
- new PersonData() { Name="Garth", EmailId="garth@gmail.com" },
- new PersonData() { Name="Ursula Ann", EmailId="ursula@gmail.com" },
+ new PersonData() { Name = "Selma Rose", EmailId = "selma@gmail.com" },
+ new PersonData() { Name = "Russo Kay", EmailId = "russo@gmail.com" },
+ new PersonData() { Name = "Camden Kate", EmailId = "camden@gmail.com" },
+ new PersonData() { Name = "Garth", EmailId = "garth@gmail.com" },
+ new PersonData() { Name = "Ursula Ann", EmailId = "ursula@gmail.com" },
};
}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/mention-suggestion-count.razor b/blazor/rich-text-editor/code-snippet/mention-suggestion-count.razor
index 91c6fa0502..d1869f8653 100644
--- a/blazor/rich-text-editor/code-snippet/mention-suggestion-count.razor
+++ b/blazor/rich-text-editor/code-snippet/mention-suggestion-count.razor
@@ -1,9 +1,7 @@
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.RichTextEditor
-
-
Hello
@@Maria
@@ -23,21 +21,21 @@
{
public string Name { get; set; }
public string EmailId { get; set; }
- public string EmployeeImage { get; set;}
- public string Status { get; set;}
+ public string EmployeeImage { get; set; }
+ public string Status { get; set; }
}
List EmailData = new List {
- new PersonData() { Name="Selma Rose", EmailId="selma@gmail.com" },
- new PersonData() { Name="Russo Kay", EmailId="russo@gmail.com" },
- new PersonData() { Name="Camden Kate", EmailId="camden@gmail.com" },
- new PersonData() { Name="Garth", EmailId="garth@gmail.com" },
- new PersonData() { Name="Ursula Ann", EmailId="ursula@gmail.com" },
- new PersonData() { Name="Margaret", EmailId="margaret@gmail.com" },
- new PersonData() { Name="Laura Grace", EmailId="laura@gmail.com" },
- new PersonData() { Name="Robert", EmailId="robert@gmail.com" },
- new PersonData() { Name="Albert", EmailId="albert@gmail.com" },
- new PersonData() { Name="Michale", EmailId="michale@gmail.com" },
- new PersonData() { Name="Andrew James", EmailId="james@gmail.com" },
- new PersonData() { Name="William", EmailId="william@gmail.com" }
+ new PersonData() { Name = "Selma Rose", EmailId = "selma@gmail.com" },
+ new PersonData() { Name = "Russo Kay", EmailId = "russo@gmail.com" },
+ new PersonData() { Name = "Camden Kate", EmailId = "camden@gmail.com" },
+ new PersonData() { Name = "Garth", EmailId = "garth@gmail.com" },
+ new PersonData() { Name = "Ursula Ann", EmailId = "ursula@gmail.com" },
+ new PersonData() { Name = "Margaret", EmailId = "margaret@gmail.com" },
+ new PersonData() { Name = "Laura Grace", EmailId = "laura@gmail.com" },
+ new PersonData() { Name = "Robert", EmailId = "robert@gmail.com" },
+ new PersonData() { Name = "Albert", EmailId = "albert@gmail.com" },
+ new PersonData() { Name = "Michael", EmailId = "michael@gmail.com" },
+ new PersonData() { Name = "Andrew James", EmailId = "james@gmail.com" },
+ new PersonData() { Name = "William", EmailId = "william@gmail.com" }
};
}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/spell-checker.js b/blazor/rich-text-editor/code-snippet/spell-checker.js
new file mode 100644
index 0000000000..efd135a6e3
--- /dev/null
+++ b/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();
+};
diff --git a/blazor/rich-text-editor/code-snippet/spell-checker.razor b/blazor/rich-text-editor/code-snippet/spell-checker.razor
new file mode 100644
index 0000000000..30678c2357
--- /dev/null
+++ b/blazor/rich-text-editor/code-snippet/spell-checker.razor
@@ -0,0 +1,20 @@
+@page "/spell-checker"
+
+@using Syncfusion.Blazor.RichTextEditor
+@inject IJSRuntime JS
+
+
+
+
+
+@code {
+ private SfRichTextEditor? rte;
+ private string rteId { get; } = "sfrichtexteditor";
+ private string initialHtml = @"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.
";
+
+ private async Task Created()
+ {
+ var id = rte?.ID ?? rteId;
+ await JS.InvokeVoidAsync("initializeWebSpellChecker", id);
+ }
+}
diff --git a/blazor/rich-text-editor/embedly.md b/blazor/rich-text-editor/embedly.md
new file mode 100644
index 0000000000..97582e66dc
--- /dev/null
+++ b/blazor/rich-text-editor/embedly.md
@@ -0,0 +1,159 @@
+---
+layout: post
+title: Embedly Integration with Rich Text Editor Component | Syncfusion
+description: Checkout and learn how to integrate Embedly with Blazor Rich Text Editor to convert URLs into rich preview cards for enhanced content presentation.
+platform: Blazor
+control: RichTextEditor
+documentation: ug
+---
+
+# Embedly Integration with Rich Text Editor
+
+By integrating [Embedly](https://www.embedly.com) with the Blazor Rich Text Editor, you can automatically convert URLs into rich preview cards. This integration allows users to insert links that render as interactive embed cards, enhancing the visual presentation and user experience when sharing web content.
+
+## Overview
+
+This documentation provides a complete integration of Embedly with the Rich Text Editor component. Users can:
+
+- Insert links in the editor content.
+- Links automatically render as interactive Embedly embed cards.
+- Support for various content types (videos, articles, social media, etc.).
+- Interactive embed cards enhance content visibility and engagement.
+
+## Prerequisites
+
+- **Syncfusion.Blazor NuGet package** installed and configured
+- **Required namespaces:**
+ - `Syncfusion.Blazor.RichTextEditor`
+- **JavaScript interop enabled** — `IJSRuntime` support
+- **Embedly CDN access** — https://cdn.embedly.com/widgets/platform.js
+
+> Before integrating Embedly with Rich Text Editor, refer to the [Rich Text Editor Getting Started](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started) documentation for initial setup.
+
+## Step 1: Add the JavaScript Interop File
+
+Create a JavaScript interop module to handle link processing and communication between the Blazor Rich Text Editor and Embedly.
+
+### 1.1 Create the interop file
+
+In your Blazor project, create a new folder `wwwroot/scripts/` and add a file named `embedly-interop.js`.
+
+Copy the complete interop implementation from:
+
+{% highlight javascript %}
+{% include_relative code-snippet/embedly-interop.js %}
+{% endhighlight %}
+
+### 1.2 Verify file placement
+
+Ensure the file is located at:
+
+```
+YourProject/
+└── wwwroot/
+ └── scripts/
+ └── embedly-interop.js
+```
+
+## Step 2: Add Script Reference in Host Page
+
+Add the script references in your host page before the closing `` tag:
+
+```html
+
+
+
+```
+
+> 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 Embedly CDN script (`https://cdn.embedly.com/widgets/platform.js`) must be loaded before the custom interop file to ensure proper functionality.
+
+## Step 3: Create the Razor Component
+
+In your Blazor project's `Pages` folder, create a new file: `EmbedlyIntegration.razor`
+
+Copy the complete component implementation from:
+
+{% highlight cshtml %}
+{% include_relative code-snippet/embedly.razor %}
+{% endhighlight %}
+
+## How to Use the Integration
+
+1. **Navigate to the component** — Open the page where you created the component (e.g., `/embedly-integration`).
+2. **Insert a link** — Use the Rich Text Editor's link tool to insert a URL.
+3. **View embed card** — The link automatically renders as an Embedly embed card.
+4. **Interact with content** — Click on the embed card to interact with the content (watch videos, view articles, etc.).
+
+
+
+## How It Works
+
+When a user inserts or updates a link in the Rich Text Editor:
+
+1. The `OnActionComplete` event is triggered with `RequestType` set to "Links".
+2. The JavaScript interop method `embedlyInterop.wrapLinkInEmbedlyCard()` is invoked via `JS.InvokeVoidAsync`.
+3. The method queries the Rich Text Editor content area using the `.e-rte-content` selector.
+4. Each link is wrapped in a `blockquote` element with the `.embedly-card` class.
+5. The Embedly library processes the container to render the interactive embed card preview.
+
+## Supported content
+
+Embedly supports embedding from a wide range of sources including:
+
+- Video platforms (YouTube etc.)
+- Social media (Twitter, Facebook, etc.)
+- Articles and blog posts
+- Music services
+- Image galleries
+- And many more content types
+
+For a complete list of supported services, refer to the [Embedly documentation](https://www.embedly.com/).
+
+## Preventing duplicate processing
+
+The JavaScript interop includes a check to prevent duplicate embed card wrapping:
+
+```javascript
+if (!link.closest('.embedly-card')) {
+ // Process the link only if it's not already wrapped
+}
+```
+
+This ensures that links are only wrapped once, preventing duplicate Embedly card structures when the same link is processed multiple times.
+
+## Integration points
+
+### Toolbar configuration
+
+The `ToolbarItems` list includes only the `CreateLink` command to allow users to insert links:
+
+```csharp
+private List ToolbarItems = new()
+{
+ new ToolbarItemModel { Command = ToolbarCommand.CreateLink }
+};
+```
+
+### Event handling
+
+The `OnActionComplete` event checks if the action is a link insertion and triggers the Embedly processing:
+
+```csharp
+private async Task OnActionComplete(ActionCompleteEventArgs args)
+{
+ if (args.RequestType == "Links")
+ {
+ await JS.InvokeVoidAsync("embedlyInterop.wrapLinkInEmbedlyCard");
+ }
+}
+```
+
+## See also
+
+* [Link support in Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/link)
+* [Rich Text Editor documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started)
+* [Rich Text Editor events](https://blazor.syncfusion.com/documentation/rich-text-editor/events)
+* [Embedly Developer Documentation](https://www.embedly.com)
+* [GitHub Example - Blazor Rich Text Editor with Embedly](https://github.com/SyncfusionExamples/blazor-richtexteditor-embedly)
diff --git a/blazor/rich-text-editor/image-editor-integration.md b/blazor/rich-text-editor/image-editor-integration.md
new file mode 100644
index 0000000000..dae14ade33
--- /dev/null
+++ b/blazor/rich-text-editor/image-editor-integration.md
@@ -0,0 +1,116 @@
+---
+layout: post
+title: Image Editor Integration with Rich Text Editor Component | Syncfusion
+description: Checkout and learn how to integrate the Syncfusion Image Editor with Blazor Rich Text Editor to edit images directly within the content.
+platform: Blazor
+control: RichTextEditor
+documentation: ug
+---
+
+# Image Editor Integration with Rich Text Editor
+
+The Blazor [Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component can be enhanced with [Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) capabilities to allow users to edit images directly within the editor content. This integration enables inline image editing, such as cropping, applying filters, rotating, and adding annotations without leaving the editor interface.
+
+## Overview
+
+This documentation provides a complete integration of the Syncfusion Image Editor with the Rich Text Editor component. Users can:
+
+- Select or upload an image in the editor content.
+- Click the `Edit Image` toolbar button to open an image editing dialog.
+- Edit the image using various tools (crop, zoom, filter, annotate, fine-tune).
+- Replace the original image with the edited version.
+
+## Prerequisites
+
+- **Syncfusion.Blazor NuGet package** installed and configured
+- **Required namespaces:**
+ - `Syncfusion.Blazor.RichTextEditor`
+ - `Syncfusion.Blazor.ImageEditor`
+ - `Syncfusion.Blazor.Popups`
+- **JavaScript interop enabled** — `IJSRuntime` support
+- **Host page access** for script references
+
+> Before integrating Image Editor with Rich Text Editor, refer to the [Rich Text Editor Getting Started](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started) documentation for initial setup.
+
+## Step 1: Add SignalR Configuration to Program.cs
+
+After following the Rich Text Editor Getting Started guide, add the SignalR configuration to your `Program.cs` file to handle large image data transmission during image editing:
+
+**Add this line to your Program.cs:**
+
+```csharp
+using Microsoft.AspNetCore.SignalR;
+
+builder.Services.Configure(o => o.MaximumReceiveMessageSize = 1024 * 1024);
+```
+
+This line should be added after your existing Syncfusion service registration:
+
+```csharp
+builder.Services.AddSyncfusionBlazor();
+builder.Services.Configure(o => o.MaximumReceiveMessageSize = 1024 * 1024);
+```
+
+> The `MaximumReceiveMessageSize` configuration allows large image data to be transmitted through SignalR when editing and saving large images. The default value is 32 KB, which may be insufficient for large images.
+
+## Step 2: Add the JavaScript Interop File
+
+Create a JavaScript interop module to handle file selection and communication between the Blazor Rich Text Editor and Image Editor.
+
+### 2.1 Create the interop file
+
+In your Blazor project, create a new folder `wwwroot/scripts/` and add a file named `rte-image-editor-interop.js`.
+
+Copy the complete interop implementation from:
+
+{% highlight javascript %}
+{% include_relative code-snippet/image-editor-interop.js %}
+{% endhighlight %}
+
+### 2.2 Verify file placement
+
+Ensure the file is located at:
+
+```
+YourProject/
+└── wwwroot/
+ └── scripts/
+ └── rte-image-editor-interop.js
+```
+
+## Step 3: Add Script Reference in Host Page
+
+Add the script reference in your host page before the closing `` tag:
+
+```html
+
+
+```
+
+> 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.
+
+## Step 4: Create the Razor Component
+
+In your Blazor project's `Pages` folder, create a new file: `ImageEditorIntegration.razor`.
+
+Copy the complete component implementation from:
+
+{% highlight cshtml %}
+{% include_relative code-snippet/image-editor-integration.razor %}
+{% endhighlight %}
+
+## How to Use the Integration
+
+1. **Navigate to the component** — Open the page where you created the component (e.g., `/image-editor-integration`).
+2. **Select or upload an image** — Select an existing image from the editor content or upload a new image using the Rich Text Editor’s image tool.
+3. **Select and edit** — Click on the image to select it, then click the `Edit Image` button.
+4. **Use image tools** — Crop, rotate, filter, annotate, or fine-tune the image as needed.
+5. **Save changes** — Click `Insert` to replace the original image with the edited version.
+
+## See also
+
+* [Image support in Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/image)
+* [Rich Text Editor documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started)
+* [Image Editor documentation](https://blazor.syncfusion.com/documentation/image-editor/getting-started)
+* [Dialog documentation](https://blazor.syncfusion.com/documentation/dialog/getting-started)
+* [GitHub Example - Blazor Rich Text Editor with Image Editor](https://github.com/SyncfusionExamples/blazor-richtexteditor-imageeditor)
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-embedly.png b/blazor/rich-text-editor/images/blazor-richtexteditor-embedly.png
new file mode 100644
index 0000000000..89a54e6647
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-embedly.png differ
diff --git a/blazor/rich-text-editor/mention-integration.md b/blazor/rich-text-editor/mention-integration.md
index 291d080880..a78e7ab5f7 100644
--- a/blazor/rich-text-editor/mention-integration.md
+++ b/blazor/rich-text-editor/mention-integration.md
@@ -1,33 +1,48 @@
---
layout: post
title: Mention Integration in Blazor RichTextEditor | Syncfusion
-description: Checkout and learn here all about Mention integration in Syncfusion Blazor RichTextEditor component and much more.
+description: Learn how to integrate and customize the Mention in the Syncfusion Blazor Rich Text Editor component and use inline suggestions to tag users and objects.
platform: Blazor
control: RichTextEditor
documentation: ug
---
-# Mention Integration in Blazor RichTextEditor
+# Integrate the Mention component into the Blazor Rich Text Editor
-By integrating the [Mention](https://blazor.syncfusion.com/documentation/mention/getting-started) component with a Rich Text Editor, users can easily mention or tag other users or objects from the suggested list without manually typing names or identifiers.
+The Mention component enables tagging within the Rich Text Editor by linking its suggestion list to the editor's editable area. It leverages the Syncfusion Mention component to offer inline suggestions and insert the chosen tags.
-## Setup and configuration
+## Prerequisites
-The [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_Target) property of the Mention component specifies the `ID` of the content-editable div element in the Rich Text Editor to bind the Mention component. This allows you to enable the Mention functionality within the Rich Text Editor, allowing users to tag items from the suggestion list during text editing.
+Before proceeding, complete the base Rich Text Editor setup described in the Getting Started guide. The guide covers Blazor project configuration, package installation, CSS imports, module registration, and basic editor markup: [Getting Started with Blazor Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-with-server-app).
+
+## Key features
+
+- Inline mention suggestions bound to the editor editable container.
+- Support for local and remote data sources.
+- Custom item and display templates.
+- Configurable `MinLength`, `SuggestionCount`, and `AllowSpaces`.
+
+## Set up the Mention component
+
+The Mention package is included with the Syncfusion Blazor installation. If not already installed, add the required package:
+
+```bash
+dotnet add package Syncfusion.Blazor.Dropdowns
+```
## Using mentions
Typing the `@` symbol followed by a character displays a list of suggestions for selection. Users can select an item by clicking or typing its name.
-## Customizing suggestion list
+## Customizing the suggestion list
-### Minimum input length for Mention suggestions
+### Set minimum input length for Mention suggestions
You can control when the suggestion list appears by setting the [MinLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_MinLength) property in the Mention control. This property defines the minimum number of characters a user must type after the mention character (@) to trigger the search action. This is especially useful when working with large datasets, as it helps reduce unnecessary queries and improves performance.
By default, `MinLength` is set to 0, which means the suggestion list appears immediately after the mention character is entered. However, you can increase this value to delay the search until the user has typed a specific number of characters.
-In the following example, the `MinLength` is set to 3, so the suggestion list will only appear once the user types three or more characters after the @ symbol.
+In the following example, the `MinLength` is set to 3, so the suggestion list appears only once the user types three or more characters after the @ symbol.
{% highlight cshtml %}
@@ -35,7 +50,7 @@ In the following example, the `MinLength` is set to 3, so the suggestion list wi
{% endhighlight %}
-
+
### Customizing suggestion list count
@@ -43,7 +58,7 @@ You can control the number of items displayed in the Mention suggestion list usi
By default, the suggestion list displays 25 items. You can customize this value to show fewer or more items based on your application's needs.
-In the example below, the `SuggestionCount` is set to 5, so only 5 items will be displayed in the suggestion list when the user types the mention character (@).
+In the example below, the `SuggestionCount` is set to 5, so only 5 items display in the suggestion list when the user types the mention character (@).
{% highlight cshtml %}
@@ -51,7 +66,7 @@ In the example below, the `SuggestionCount` is set to 5, so only 5 items will be
{% endhighlight %}
-
+
### Customizing suggestion list using templates
@@ -59,22 +74,20 @@ In the example below, the `SuggestionCount` is set to 5, so only 5 items will be
You can customize how each item appears in the suggestion list using the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property. This allows you to display additional details such as email, role, or profile image alongside the mention name.
-#### Display template
+#### Display template
Use the [DisplayTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_DisplayTemplate) property to define how the selected mention appears in the editor content.
For example, by default, the mention chip renders as:
-```
+```html
@Selma Rose
-
```
Using the `DisplayTemplate` property, you can customize it to render as a clickable link:
-```
+```html
@Selma Rose
-
```
This allows you to create more interactive and informative mentions within the editor.
@@ -82,9 +95,9 @@ This allows you to create more interactive and informative mentions within the e
In the following sample, we configured the following properties:
* [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) - Displays customized appearance in the suggestion list.
-* [DisplayTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_DisplayTemplate) - Used to customize how the selected value appears in the editor content.
-* [AllowSpaces](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_AllowSpaces) - Allow to continue search action if user enter space after mention character while searching.
-* [SuggestionCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_SuggestionCount) - The maximum number of items that will be displayed in the suggestion list.
+* [DisplayTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_DisplayTemplate) - Customizes how the selected mention appears in the editor content.
+* [AllowSpaces](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_AllowSpaces) - Allows search to continue if the user enters a space after the mention character.
+* [SuggestionCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_SuggestionCount) - Sets the maximum number of items displayed in the suggestion list.
{% highlight cshtml %}
@@ -92,10 +105,25 @@ In the following sample, we configured the following properties:
{% endhighlight %}
-
+
+
+## Using Remote Data with Mention in the Rich Text Editor
+
+The Mention component supports loading data from remote services using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) along with an appropriate adaptor such as WebApiAdaptor. The DataManager enables you to retrieve data from a remote endpoint and bind it directly to the Mention component inside the Rich Text Editor.
+
+### Example: Integrating Remote Data with Syncfusion Rich Text Editor
+
+{% highlight cshtml %}
+
+{% include_relative code-snippet/mention-integration-remotedata.razor %}
+
+{% endhighlight %}
+
+N> **Note:** Ensure that `Syncfusion.Blazor.Data` is imported in your component or page to enable remote data binding with DataManager.
> [View Sample](https://blazor.syncfusion.com/demos/rich-text-editor/mention-integration?theme=bootstrap5)
## See also
-* [Mention](https://blazor.syncfusion.com/documentation/mention/getting-started)
\ No newline at end of file
+* [Mention](https://blazor.syncfusion.com/documentation/mention/getting-started)
+* [GitHub Example - Blazor Rich Text Editor with Mention](https://github.com/SyncfusionExamples/blazor-richtexteditor-mention)
diff --git a/blazor/rich-text-editor/web-spell-check.md b/blazor/rich-text-editor/web-spell-check.md
new file mode 100644
index 0000000000..a184f96feb
--- /dev/null
+++ b/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 `` tag:
+
+```html
+
+ ....
+
+
+
+
+```
+
+> 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)
+ 
+ 
+ 
+ 
+