Configuratie

There are two places to configure RayCraft Write: the server (AddRte) and the editor you show (RteOptions).

AddRte

builder.Services.AddRte(o =>
{
    o.MediaStore = new RteMediaStoreOptions { RootPath = "media", BaseUrl = "/rte-media" };
    o.Filter = new ContentFilterOptions { /* allow and block lists */ };
    o.FilterIncomingHtml = true;
});

Setting	Meaning
MediaStore	enables the library of files: a folder on disk (RootPath) and the public address (BaseUrl). Without it, the gallery and the upload of documents are off, and small images (up to 300 KB) are embedded in the HTML.
Filter	the ContentFilterOptions used on every piece of HTML that comes from the browser: allowed and blocked elements and attributes, allowed hosts of frames
FilterIncomingHtml	on by default. The bound Value is always filtered. Turn it off only when you filter the content yourself.

AddRte registers default services with TryAdd, so anything you registered before or after it stays. Replace a part with the dependency injection:

builder.Services.AddSingleton<IRteMediaStore, MyBlobMediaStore>();

Interface	Default	Replace it to
IRteMediaStore	FileSystemMediaStore (when MediaStore is set)	keep files in blob storage or a database
IRteTemplateProvider	nine built-in layouts	load templates of your own
IRteRevisionStore	in memory (lost on restart)	keep named revisions
IRteCommentStore	in memory (lost on restart)	keep comments and replies
IRteSpellChecker	a word list	use a real dictionary or service
IRteLinkPreviewProvider	the domain only, nothing is fetched	fetch titles of bookmark cards
IRtePeopleProvider	none	people for @ mentions
IRteCollaboration	none	connect a CRDT such as Yjs
IRteDocxExporter / IRteDocxImporter	BasicDocxExporter / BasicDocxImporter	richer Word files

The default stores for revisions and comments are in memory. For production keep them in your database.

The component

<RichTextEditor @bind-Value="html" Options="options" DocumentId="article-42"
                OnReady="Ready" OnEvent="Handle" Class="my-editor" />

Parameter	Meaning
Value	the HTML (two-way, filtered)
Options	an RteOptions object
DocumentId	names the document: revisions and comments are kept under it
Class, Style, Id	for the host element
OnReady	the editor is built in the browser
OnEvent	an editor event (command, modechange, paste, focus, blur ...) as name and JSON

Options are read when the editor starts. To change them later, give the component a new @key.

Methods you can call on the component: GetHtmlAsync, SetHtmlAsync, InsertHtmlAsync, FocusAsync, ExecuteAsync(command, argument), SetModeAsync, SetThemeAsync, SetFullscreenAsync, SetReadOnlyAsync, GetTextAsync, GetCleanHtmlAsync(xhtml, indent), GetMarkdownAsync, GetJsonAsync, GetEmailHtmlAsync, GetStaticHtmlAsync, CheckAccessibilityAsync, ExportDocxAsync, CheckLimitsAsync.

RteOptions

null keeps the default.

Setting	Meaning
Toolbar	the buttons in order; `"	" is a separator. The default is RteOptions.DefaultToolbar; all names are in RteOptions.AllButtons`.
Plugins	the built-in plugins to load (null loads all 14)
EnterMode	P, Br or Div; Shift+Enter is always a line break
Mode	start mode: Design, Html or Preview
Theme	Light, Dark or Classic
Direction	Ltr or Rtl
ReadOnly	show without editing
Height, MinHeight, Placeholder, StatusBar	size and text
ContentCss	style sheets of your site for the content and the preview, so the editor shows what your readers will see
LocalDraft	Enabled, Key, IntervalSeconds: a draft saved in the browser, with a question to restore it
Paste	DefaultMode (Keep, Characters, Plain), WordCleanup
Upload	MaxFileSize, AllowedTypes, AllowedImageTypes
Limits	MaxHtmlLength, MaxTextLength (shown in the status bar; nothing is blocked)
UrlMode, BaseUrl	keep, relative or absolute addresses in the clean output
Markdown	Inline (shortcuts as you type), Emoji (:shortcodes:)
Embed	AutoEmbed, AllowedHosts (www.youtube-nocookie.com and player.vimeo.com by default)
Spellcheck	Native (the browser), Server, Language
MergeFields	[{ Name, Label }] for mail merge
Blocks	Callouts, Columns, Toggles, Equations, Diagrams, Bookmarks, Chips, DragHandles
FocusMode, TypewriterMode	writing modes
A11y.Live	the live accessibility check
User	the author name for comments and revisions
UiLanguage	the language of the interface (Languages)
Texts, Labels	replace texts of the interface

Example

<RichTextEditor @bind-Value="html" DocumentId="@id" Options="options" />

@code {
    readonly RteOptions options = new()
    {
        Placeholder = "Write the article here...",
        MinHeight = "320px",
        UiLanguage = "de-DE",
        ContentCss = ["/css/site.css"],
        LocalDraft = { Enabled = true, Key = "article-42" },
        Upload = { MaxFileSize = 5 * 1024 * 1024 },
        Limits = { MaxTextLength = 20000 },
        User = { Name = "Ada Lovelace" },
        Toolbar = ["undo", "redo", "|", "bold", "italic", "link", "image", "table", "|", "mode", "fullscreen"]
    };
}

Property types shown here follow the names in RteOptions.cs; use the IntelliSense of your editor for the exact shape.

Protecting the upload

The library of files serves files from MediaStore.RootPath. In production, protect the upload endpoint and the folder with your own authorization and put limits on the size and the types of files (Upload). The built-in FileSystemMediaStore checks file extensions and, for images, the first bytes; paths from the browser are never trusted.