Blazor Rich Text Editor with Code Mirror Integration

Overview

This project demonstrates an integration of Syncfusion Blazor Rich Text Editor with CodeMirror for building modern code editing and content management applications. The sample showcases syntax-highlighted source code editing with enhanced code visualization and editing capabilities within a rich text editor.

Key Components

• Syncfusion Blazor Rich Text Editor: Enterprise-grade rich text editor with comprehensive formatting capabilities
• CodeMirror: Advanced code editor component with syntax highlighting and line numbering

Features

• Rich Text Editing: Full-featured Rich Text Editor with comprehensive formatting tools
• Code View Editing: Switch between Rich Text Editor and code views seamlessly
• Syntax Highlighting: CodeMirror provides beautiful syntax highlighting for HTML/CSS/XML
• Line Numbers: Display line numbers in code view for easy reference
• Monokai Theme: Professional dark theme for code editing
• Responsive Design: Adapts to different screen sizes and resizing
• HTML Mode Support: Handles mixed HTML, CSS, and XML content

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-codemirror.git
cd blazor-richtexteditor-codemirror

Step 2: Navigate to Project Directory

cd Code_Mirror_Integration

Step 3: Set up the Code Mirror

For integrating the Code Mirror you need to install the below NPM package:

npm install codemirror

Step 4: Restore NuGet Packages

dotnet restore

This will download all required dependencies including:

• Syncfusion.Blazor.RichTextEditor
• Syncfusion.Blazor.Themes

Step 5: Build the Project

dotnet build

Step 6: 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 and click on the Code Mirror link to see the application in action.

Usage

Accessing the Code Mirror Integration

1. Launch the application and navigate to your browser
2. Click on Code Mirror in the navigation menu or navigate directly to /code-mirror
3. Start typing or paste content into the rich text editor
4. Toggle between Rich Text Editor and Code View:
   • Click the Code View button in the toolbar to switch to code editing view
   • The CodeMirror editor will appear with syntax highlighting
   • Edit HTML source directly with line numbers and color-coded syntax
5. Return to Rich Text Editor: Click the Preview button to switch back to rich text editor view

Sample Workflow

<h1>Welcome to Code Mirror Integration</h1>
<p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
<ul>
  <li>Syntax highlighted HTML</li>
  <li>Easy code editing</li>
  <li>Professional code view</li>
</ul>

Project Structure

blazor-richtexteditor-codemirror/
├── Code_Mirror_Integration/
│   ├── Components/
│   │   ├── Layout/
│   │   │   ├── MainLayout.razor          # Main application layout
│   │   │   └── NavMenu.razor             # Navigation menu
│   │   ├── Pages/
│   │   │   ├── RichTextEditorWithCodeMirror.razor  # Main editor page
│   │   │   └── Error.razor               # Error handling page
│   │   ├── _Imports.razor                # Global using statements
│   │   ├── App.razor                     # Root application component
│   │   └── Routes.razor                  # Routing configuration
│   ├── wwwroot/
│   │   ├── scripts/
│   │   │   └── code-mirror.js            # CodeMirror integration script
│   │   ├── bootstrap/                    # Bootstrap CSS files
│   │   └── app.css                       # Custom styles
│   ├── Program.cs                        # Application entry point
│   ├── appsettings.json                  # Application configuration
│   └── Code_Mirror_Integration.csproj    # Project file
├── README.md                             # This file

Configuration

CodeMirror Configuration

The CodeMirror editor is configured in wwwroot/scripts/code-mirror.js:

myCodeMirror = window.CodeMirror(host, {
    value: content,
    theme: 'monokai',           // Dark theme
    lineNumbers: true,          // Show line numbers
    mode: 'text/html',          // HTML syntax highlighting
    lineWrapping: true          // Wrap long lines
});

Configuration Options:

• theme: Change the color scheme (available: monokai, default, solarized-dark, eclipse, etc.)
• lineNumbers: Toggle line number display
• mode: Set syntax highlighting mode (html, css, xml, javascript, etc.)
• lineWrapping: Enable/disable long line wrapping

Available CodeMirror Themes

To use a different theme, update the CSS and JS CDN links in App.razor:

<!-- Available themes: default, monokai, solarized-dark, eclipse, twilight, etc. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/solarized-dark.min.css" rel="stylesheet" />

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.

Add Stylesheet and Script Resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references within the <head> and <body> sections of the App.razor file.

<!-- Syncfusion Blazor Theme -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

<!-- CodeMirror Core and Theme -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css" rel="stylesheet" />

<!-- Scripts -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="/scripts/code-mirror.js"></script>

Documentation

• Syncfusion Blazor Rich Text Editor
• CodeMirror Official Documentation
• CodeMirror 5 API Reference
• 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.