RichEdit

The RichEdit component is a rich-text editor for Dataverse multi-line text columns. It offers the formatting Dynamics' own rich-text editor offers — fonts and sizes, colors, lists, indents, alignment, links, images and tables — and writes it the way Dynamics writes it, so a document edited in your portal and in a model-driven app looks the same in both. It is drawn with Fluent UI's own controls and follows your theme.

Rich-text columns

A column whose format in Dataverse is Rich text needs nothing extra: ColumnEdit renders a RichEdit for it, with its label, length limit, required level and permissions taken from the column like any other editor.

Any multi-line text column

Use RichEdit directly to edit any other multi-line text column as rich text. Its value is then the document's HTML. Grids and exports show such a column's text without its formatting.

Images

Images can be inserted from the toolbar, pasted or dropped. They are stored as Dynamics stores them, in msdyn_richtextfile records, when the user may create and read those — grant it in your table permissions. Without that permission, an image is kept in the document itself. Set AllowImages to false to turn images off.

Condensed toolbar

Set ToolbarMode to Condensed for an editor with little room, or for short text such as a note: the toolbar then shows only the formatting used most — undo and redo, bold, italic, underline, strikethrough, highlight and text colors, bulleted and numbered lists, and links — and a button at its end that opens it out to every other button, and closes it again. Name other buttons with CondensedToolbarButtons (React: condensedToolbarButtons), a list of RichEditToolbarButton values: the toolbar shows those, in the order the full toolbar draws them. Limit the toolbar itself, full or condensed, to the buttons named in ToolbarButtons (React: toolbarButtons); it limits the buttons, not the formatting, so keyboard shortcuts and pasted text still format. Set DisplayToolbar to false to show no toolbar at all.

Theme

The editor's border, toolbar and focus indicator use Fluent UI's design tokens, so it matches the other editors in light and dark themes and with your accent color. A document's own formatting — its fonts and colors — is shown as written, as Dynamics shows it.