Bold, italic and underline buttons in an ASP.NET Core editor

Bold, italic and underline are the first buttons anyone looks for. They are in every RichTextBox toolbar preset, so a basic page already has them. This guide covers their names, their shortcuts and what they save.

In your own toolbar

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

Keyboard shortcuts

Pressing a button again removes the format. With nothing selected, it applies to what you type next.

Styling the saved tags

A saved <b> looks bold on your published page because browsers show it that way by default. If your site's CSS resets it, the text looks plain there even though it looks bold in the editor. Add a rule for the area where you show content:

.article b, .article strong { font-weight: 700; }
.article i, .article em { font-style: italic; }

From JavaScript

var editor = window.richTextBoxEditors.Body;
editor.execCommand("bold");

This applies to the current selection in the editor, the same as pressing the button.

A note on underline

On the web, underlined text looks like a link. If your readers might confuse the two, leave underline out of your toolbar. It is simply a matter of not naming it. See customizing the toolbar.

Read next

• Add a strikethrough button to an ASP.NET Core rich text editor
• Clear formatting button in an ASP.NET Core rich text editor
• Customize the rich text editor toolbar in ASP.NET Core