Developer Documentation

dotnet add package RichTextBox

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRichTextBox();
var app = builder.Build();
app.UseStaticFiles();
app.MapRichTextBoxUploads();
app.MapRazorPages();
app.Run();

<richtextbox name="Body" toolbar="default" height="400px" />

dotnet add package RichTextBox

Install-Package RichTextBox

<PackageReference Include="RichTextBox" Version="1.0.0-preview.1" />

var builder = WebApplication.CreateBuilder(args);

// Register RichTextBox services (default options)
builder.Services.AddRichTextBox();

// Or with custom options:
builder.Services.AddRichTextBox(options =>
{
    options.UploadWebPath = "/uploads";
    options.MaxUploadBytes = 4 * 1024 * 1024; // 4 MB
    options.AllowedImageExtensions = new[] { ".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg" };
    options.AllowedFileExtensions = new[] { ".zip", ".pdf", ".doc", ".docx" };
});

var app = builder.Build();
app.UseStaticFiles();

// Map upload and gallery endpoints
app.MapRichTextBoxUploads();

app.MapRazorPages();
app.Run();

YourProject/
  Program.cs
  RichTextBox.lic         <-- content root
  appsettings.json
  Pages/
    _ViewImports.cshtml
    Index.cshtml
  wwwroot/
    uploads/              <-- image upload target

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, RichTextBox

builder.Services.AddRichTextBox(options =>
{
    options.UploadWebPath = "/uploads";
    options.MaxUploadBytes = 8 * 1024 * 1024; // 8 MB
    options.AllowedImageExtensions = new[] { ".jpg", ".png", ".gif", ".webp", ".svg" };
    options.AllowedFileExtensions = new[] { ".zip", ".pdf", ".doc", ".docx", ".rtf", ".txt" };
});

<richtextbox name="Body" toolbar="full" />

<richtextbox name="Body" toolbar="basic" toolbar-mobile="mobile" />

<richtextbox name="Body"
    toolbar="{bold,italic,underline}|{fontname,fontsize}|{forecolor,backcolor}|{insertlink,insertimage}|{undo,redo}" />

// By dictionary lookup
var editor = window.richTextBoxEditors["myEditor"];

// Or directly by ID (when the id matches a valid JS identifier)
var editor = window.myEditor;

// Read the current content
var html = editor.getHTMLCode();
console.log("HTML length:", html.length);

// Replace content
editor.setHTMLCode("<h2>Hello World</h2><p>New content here.</p>");

// Insert at caret
editor.insertHTML("<img src='/uploads/photo.jpg' />");

// Execute a command
editor.execCommand("bold");

var editor = window.richTextBoxEditors["myEditor"];

function onContentChange() {
    var html = editor.getHTMLCode();
    console.log("Content changed. Length:", html.length);
    document.getElementById("preview").innerHTML = html;
}

// Subscribe
editor.attachEvent("change", onContentChange);

// Unsubscribe later
// editor.detachEvent("change", onContentChange);

editor.attachEvent("exec_command", function() {
    console.log("A command was executed");
});

builder.Services.AddRichTextBox(options =>
{
    // Change the upload directory (relative to wwwroot)
    options.UploadWebPath = "/media/uploads";

    // Increase max upload size to 10 MB
    options.MaxUploadBytes = 10 * 1024 * 1024;

    // Restrict allowed image types
    options.AllowedImageExtensions = new[] { ".jpg", ".jpeg", ".png", ".webp" };

    // Restrict allowed document types
    options.AllowedFileExtensions = new[] { ".pdf", ".docx" };
});

<form method="post">
    <richtextbox name="Body" toolbar="default" height="400px" />
    <button type="submit">Submit</button>
</form>

[BindProperty]
public string Body { get; set; }

public void OnPost()
{
    // Body contains the submitted HTML
    var html = Body;
}

// PageModel
public class EditModel : PageModel
{
    [BindProperty]
    public ArticleModel Article { get; set; }
}

public class ArticleModel
{
    public string Title { get; set; }
    public string Content { get; set; }
}

<!-- Razor Page -->
<form method="post">
    <input asp-for="Article.Title" />
    <richtextbox asp-for="Article.Content" toolbar="full" height="500px" />
    <button type="submit">Save</button>
</form>

async function submitContent() {
    var editor = window.richTextBoxEditors["myEditor"];
    var html = editor.getHTMLCode();

    var response = await fetch("/api/articles", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "RequestVerificationToken": document.querySelector(
                'input[name="__RequestVerificationToken"]'
            ).value
        },
        body: JSON.stringify({ content: html })
    });

    if (response.ok) {
        alert("Saved successfully!");
    }
}