Full screen mode for a rich text editor in ASP.NET Core

A small editor box on a form is fine for a paragraph and painful for a report. A full screen button lets people expand it for as long as they need, and return to the page without losing anything.

Add the button

Its name is fullscreenenter, and it is in the basic, default and full toolbars. In your own:

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

There is nothing to set up on the server. Press the button or Escape to return. Content stays where it was, and the form still posts it normally.

Things to check on your page

• Sticky headers. A page header with a very high z-index can sit on top of the full screen editor. If yours does, lower it.
• Parents that clip. Full screen fills the window, but a parent using CSS transform changes what "full window" means to the browser. If it stays small, check the elements around it.

Use it to keep forms short

Since people can expand on demand, you can keep the editor modest in the form:

<richtextbox asp-for="Description" toolbar="default" height="220px"></richtextbox>

The rest of the form stays visible, and people who write a lot have the room they need. resize-mode="height" is another option, letting them drag the box taller on the page instead. See the resize demo.

Read next

• Customize the rich text editor toolbar in ASP.NET Core
• A mobile toolbar for a rich text editor in ASP.NET Core
• Autosave drafts in an ASP.NET Core rich text editor