Style the editing area with your site's CSS in ASP.NET Core

The commonest complaint about rich text editors is that the published page looks different from the editor. The cause is simple: the editing area is its own document, and your site's stylesheet does not reach it. You can give it the same rules.

Load a stylesheet

<richtextbox name="Body"
             toolbar="default"
             height="400px"
             content-css-url="/css/article.css"></richtextbox>

It only affects the editing area, not the toolbar or your page.

What to put in it

Only the rules for content: fonts, headings, lists, links, tables. Do not point this at your whole site's stylesheet, because navigation and layout rules have no meaning there and can break the editing area.

/* /css/article.css */
body { font-family: Georgia, serif; font-size: 18px; line-height: 1.6; color: #1f1f1f; }
h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
a { color: #0b57d0; }
table { border-collapse: collapse; }
td, th { border: 1px solid #c4c7c5; padding: .5rem; }

Use the same rules on the page

Scope the same rules to the element that shows content, and the two match. Keeping one file means they stay matched.

<div class="article">@Html.Raw(Model.CleanBody)</div>

Just a few rules

For a small change, write the CSS in the attribute:

<richtextbox name="Body" content-css-text="body { font-size: 18px; }"></richtextbox>

Fonts from a file

A web font needs an @font-face rule or import in that stylesheet, since the editing area does not inherit the fonts your page loaded. See the inline CSS demo too.