RJRichTextEditor 1.0.0

📖 RJRichTextEditor

A WPF WebView2-based Rich Text Editor (WYSIWYG) with full support for editor/viewer modes, theming, word/character limits, and customizable toolbar.

🎥 Demo

Editor Mode

Viewer Mode

(GIF shows typing, formatting text, and switching to Viewer mode)

✨ Features

• 🖊️ Editor + Viewer Mode (toggle at runtime)
• 🎨 Customizable Theme via CSS variables
• 🔧 Configurable Toolbar – hide tools you don’t want
• 📏 Word & Character Limits with live counter
• 📚 Multiple Instances supported in the same app
• ⚡ Based on WebView2 – modern HTML5 editing

🚀 Installation

Install from NuGet:

dotnet add package RJRichTextEditor

🔧 Quick Start

XAML

<Window x:Class="Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:editor="clr-namespace:RJRichTextEditorControl;assembly=RJRichTextEditorControl"
        Title="Editor Demo" Height="500" Width="800">

    <Grid>
        <editor:RJRichTextEditor x:Name="MyEditor" />
    </Grid>
</Window>

C# Code-behind

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        // Example: set theme
        MyEditor.Theme = new EditorTheme
        {
            DocumentBg = "#f4f6fa",
            DocumentColor = "#212121",
            ToolbarBg = "#ffffff"
        };

        // Example: hide some tools
        MyEditor.HiddenTools = new List<EditorTool>
        {
            EditorTool.Paragraph,
            EditorTool.Table
        };

        // Example: set limits
        MyEditor.SetMaxWords(100);
        MyEditor.SetMaxChars(500);
    }

    private async void GetHtml_Click(object sender, RoutedEventArgs e)
    {
        string html = await MyEditor.GetHtmlAsync();
        MessageBox.Show(html, "Editor Content");
    }

    private async void SetHtml_Click(object sender, RoutedEventArgs e)
    {
        await MyEditor.SetHtmlAsync("<h2>Hello from RJRichTextEditor</h2>");
    }

    private void ToggleMode_Click(object sender, RoutedEventArgs e)
    {
        MyEditor.Mode = MyEditor.Mode == EditorMode.Editor
            ? EditorMode.Viewer
            : EditorMode.Editor;
    }
}

🎨 Theming

The editor supports theming through CSS variables.

Available Variables

:root {
  --document-bg: #f4f6fa;
  --document-color: #212121;
  --document-border: 1px solid rgb(255, 255, 255); 
  --document-padding: 5px;

  --toolbar-bg: #ffffff;
  --toolbar-size: medium;
  --toolbar-border: 1px solid rgb(223, 223, 223);

  --editor-bg: #ffffff;
  --editor-border: 1px solid rgb(223, 223, 223);

  --dropshadow: 0 0px 0px rgba(0, 0, 0, 0.04);
  --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);

  /* Word/char counter section */
  --wordchar-bg: #ffffff;
  --wordchar-color: #ababab;
  --wordchar-border: 1px solid rgb(223, 223, 223);

  /* Buttons */
  --button-bg: rgb(255, 255, 255);
  --button-cancel-bg: #860303;
  --button-submit-bg: #086d0b;
}

Example usage in C#:

MyEditor.Theme = new EditorTheme
{
    DocumentBg = "#fafafa",
    ToolbarBg = "#ddd",
    ButtonSubmitBg = "#0a7d0f"
};

🔧 Toolbar Customization

Hide tools you don’t need:

MyEditor.HiddenTools = new List<EditorTool>
{
    EditorTool.Bold,
    EditorTool.Paragraph,
    EditorTool.Table
};

Available tools:

• Bold
• Font
• FontSize
• Paragraph
• UnorderedList
• OrderedList
• TextColor
• HighlightColor
• Link
• Table
• Undo
• Redo
• RemoveFormat

📏 Word & Character Limits

Set maximum words or characters allowed in the editor:

MyEditor.SetMaxWords(200);
MyEditor.SetMaxChars(1000);

The live counter (#wordCharCount) will update automatically.

You can also hide the counter:

MyEditor.ShowWordCharCount = false;

👀 Viewer Mode

Use RJRichTextViewer for a read-only display, or toggle mode dynamically:

MyEditor.Mode = EditorMode.Viewer; // hides toolbar, read-only
MyEditor.Mode = EditorMode.Editor; // full editor

📦 Repository Structure

RJRichTextEditor/
├── RJRichTextEditorControl/   # NuGet library
├── RJRichTextEditor.Sample/   # Sample WPF app
├── README.md                  # Documentation
├── LICENSE                    # MIT License
└── RJRichTextEditor.sln       # Solution

📜 License

MIT License © 2025 Rijo M P