Blazor Rich Text Editor with Mention Integration

Overview

This project demonstrates a professional integration of Syncfusion Blazor Rich Text Editor with Syncfusion Mention component for building modern content editing applications with user tagging capabilities. The sample showcases real-time mention suggestions with customizable templates and multiple data sources.

Key Components

• Syncfusion Blazor Rich Text Editor: Rich text editor with extensive formatting capabilities
• Syncfusion Mention Component: Mention/tagging system with flexible data binding

Features

• Rich Text Editing: Full-featured WYSIWYG editor with comprehensive formatting tools
• Real-time Mention Suggestions: Automatic mention suggestions as you type with @ symbol
• Custom Templates: Display personalized mention templates with status indicators and user details
• Remote Data Support: Integrate with external APIs for dynamic user data
• Configurable Behavior:
  • Minimum input length before suggestions appear
  • Customizable suggestion count
  • Allow/disallow spaces in mentions
  • Popup height and width customization

Getting Started

Prerequisites

Ensure you have the following installed on your development machine:

• .NET 10.0 SDK or later (Download)
• Visual Studio 2022 (v17.12+) or Visual Studio Code with C# extension
• Git for version control (Download)
• A modern web browser (Chrome, Edge, Firefox, or Safari)

Installation

Step 1: Clone the Repository

git clone https://github.com/SyncfusionExamples/blazor-richtexteditor-mention.git
cd blazor-richtexteditor-mention

Step 2: Navigate to Project Directory

cd Mention_Integration

Step 3: Restore NuGet Packages

dotnet restore

This will download all required dependencies including:

• Syncfusion.Blazor.RichTextEditor
• Syncfusion.Blazor.DropDowns (for Mention component)
• Syncfusion.Blazor.Themes

Step 4: Build the Project

dotnet build

Step 5: Run the Application

dotnet run

The application will start and display the URL in the terminal (typically https://localhost:5001).

Open your browser and navigate to the displayed URL to see the application in action.

Usage

Accessing the Mention Feature

1. Launch the application and navigate to your browser
2. Select an example from the navigation menu:
   • Display Template (home) - View custom mention templates with status badges
   • Remote Data - See mention integration with external API data
   • Minimum Input Length - Control when suggestions appear
   • Suggestion Count - Customize number of displayed suggestions
3. Start typing or paste text into the rich text editor
4. Type @ character to trigger mention suggestions
5. See suggestions appear with personalized templates
6. Click on a user to add them as a mention in the text
7. Observe mention chips rendered as styled links with user details

Sample Workflows

Display Template Example

• Shows professional mention display with user status (active/away/busy)
• Features color-coded status badges
• Includes user email and name in suggestions
• Click mentions to send emails via mailto links

Remote Data Example

• Connects to external Syncfusion API for employee data
• Demonstrates real-world data binding scenarios
• Shows how to integrate with backend services

Minimum Input Length Example

• Requires typing at least 3 characters after @ before suggestions appear
• Useful for filtering large datasets efficiently

Suggestion Count Example

• Limits visible suggestions to 5 items
• Helps manage UI space and improves UX

Project Structure

Mention_Integration/
├── Mention_Integration/
│   ├── Components/
│   │   ├── Layout/
│   │   │   ├── MainLayout.razor              # Main application layout
│   │   │   └── NavMenu.razor                 # Navigation menu
│   │   ├── Pages/
│   │   │   ├── Display-Template.razor        # Display template example
│   │   │   ├── Minimum-Input-Length.razor    # Minimum input length example
│   │   │   ├── Mention-With-Remote-Data.razor # Remote API integration
│   │   │   ├── Mention-Suggestion-Count.razor # Suggestion count configuration
│   │   │   └── Error.razor                   # Error handling page
│   │   ├── _Imports.razor                    # Global using statements
│   │   ├── App.razor                         # Root application component
│   │   └── Routes.razor                      # Routing configuration
│   ├── wwwroot/
│   │   ├── bootstrap/                        # Bootstrap CSS files
│   │   └── app.css                           # Custom styles
│   ├── Program.cs                            # Application entry point
│   ├── appsettings.json                      # Application configuration
│   └── Mention_Integration.csproj            # Project file
├── README.md                                 # This file

Configuration

Syncfusion License

For production use, you need a valid Syncfusion license.

Register your license in Program.cs:

Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");

Visit Syncfusion Licensing for more information.

Themes and Styling

The theme stylesheet can be accessed from NuGet through Static Web Assets. The stylesheet reference is included in the App.razor file:

<!-- Available themes: bootstrap5, material3, fabric, tailwind, fluent, etc. -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Documentation

• Syncfusion Blazor Rich Text Editor
• Syncfusion Blazor Mention Component
• Blazor Documentation
• .NET 10 Release Notes

Note: This is a demonstration project. For production use, ensure you have valid licenses for Syncfusion components and implement appropriate security measures.