N1ED Blog

Fullscreen mode in CKEditor/TinyMCE

10 September 2019

N1ED introduces a number of practical features to your TinyMCE or CKEditor, but do you really feel comfortable when the editor itself is thumbnail-size? Considering hundreds of new features N1ED offers (such as mobile devices simulation), you'll need something more functional than the default fullscreen editing.

Maximize and focus on content

To make your work in the maximized mode much more comfortable, N1ED enhances the full screen display in your WYSIWYG editor. Nothing will distract you anymore! You only see:

  • Sidebar with the available widgets
  • Editor of the selected widget
  • Enlarged breadcrumbs to quickly select a widget
  • Noticeable and more convenient button to quickly switch to the fullscreen mode

Also, in the fullscreen mode you can edit Bootstrap layout if you use the Bootstrap Editor add-on.

Need full screen mode only?

No problem. Simply set the special UI parameter to maximize the editor as soon as it receives focus: ui.openFullScreenOnFocus. Non-maximized editor in this case becomes the content preview, and clicking it opens the page builder in the full screen mode.

Lifehack: you can hid the editor toolbar even in the minimized mode, and add a border to underscore that editing is available upon a click. In this case you may want to hide the Maximize button.

Do not need full screen mode at all?

Again — no problem. Hide the Maximize button in N1ED using the ui.showFullScreenButton parameter and do not add the default CKEditor or TinyMCE button to the toolbar. There will be no way to open the fullscreen mode, but you still can use the mini-breadcrumbs, and your sidebar will be available as a sticky panel to edit or add widgets.

If the sidebar take too much space in the non-maximized mode (and overlaps with certain elements of your website), you can put it at the right side instead ui.leftSidebar option).

Note. Without the maximized mode you cannot use the mobile devices simulation to preview content in various screen resolutions.

How to hide the sidebar before switching to the full screen mode

You can hide it using the ui.sidebarInFullScreenOnly parameter. Now, you only have your basic editing means in the minimized mode, and the fullscreen mode will unleash the entire power of N1ED and Bootstrap Editor.

Additional settings

The names of Maximize and Save (Minimize) buttons can be changed in the corresponding options.

If an article is useful, please share