A mobile toolbar for a rich text editor in ASP.NET Core

A desktop toolbar with sixty buttons is unusable on a phone. RichTextBox can switch to a compact toolbar on small screens, in the same editor, with one attribute.

Turn it on

<richtextbox name="Body"
             toolbar="default"
             height="400px"
             enable-mobile-toolbar="true"></richtextbox>

When the window is narrower than the editor's mobile width, the desktop toolbar hides and a short one takes over. The buttons get larger tap targets too. Open the mobile toolbar demo and make your window narrow to watch it change.

Choose its buttons

People on a phone mostly need the basics. To decide which:

<richtextbox name="Body"
             toolbar="full"
             toolbar-mobile="{bold,italic}|{insertlink,insertimage}|{undo,redo}"
             enable-mobile-toolbar="true"></richtextbox>

Things to check on a real phone

The height. A fixed height="600px" leaves little room above an on-screen keyboard, so try a smaller one.
Your page's layout. Keep the editor inside a container that can shrink. A parent with a fixed width makes the whole page scroll sideways.
Photos. Phone photos are often larger than the 4 MB upload limit. See raising it for images only.

Is the toolbar responsive without this?

A normal toolbar wraps onto more rows on a narrow screen and still works. It simply takes up a lot of space. For a page people mostly use on a desktop, you may not need this attribute. For a form that many people fill in on a phone, turn it on and test it.