Blockquote button in an ASP.NET Core rich text editor

A quotation deserves to look different from your own words, and to be marked as a quotation. The button is insertblockquote, in the default and full toolbars.

Add it

<richtextbox name="Body"
             toolbar="{insertblockquote,bold,italic}|{undo,redo}"
             height="300px"></richtextbox>

The saved HTML

<blockquote><p>Hello world</p></blockquote>

Using the real tag means that a screen reader can announce it as a quotation, and search engines and exports understand it.

Style it on your site

By default, browsers show a blockquote as an indented block, and CSS resets often remove even that. Give it a look of your own:

.article blockquote {
    margin: 1.5rem 0;
    padding-left: 1rem;
    border-left: 3px solid #0b57d0;
    color: #444746;
}

Put the same rule in your content stylesheet so people see it while they write.

Getting out of a quote

Pressing the button again returns the selected text to normal. Writers can also press Enter on an empty line at the end of a quote.

Typing shortcut

Starting a line with > makes a quote, as in Markdown, and slash commands offer it too.