N1ED appearance

As an add-on to TinyMCE and CKEditor, N1ED does its best to preserve customary user experience in your editor. In addition it delivers a range of new features and that is why has certain new interface elements you can configure.

This article described how to configure N1ED UI if you do not use visual Dashboard configuring

Display mode

The main option affects to appearance is the display mode option: ui.mode. Here are choices available:

  • fullscreen (default) - allow to edit content in full screen mode only. When user clicks on editor it maximizes.
  • classic - open floating sidebar when edit is shown and active. Maximization is still available but not required.

Fullscreen mode

The fullscreen mode is so crucial for usability and is so demanded that there is a special blue button Maximize in the upper right corner of the toolbar. No configuration is needed to make it appear. When you use fullscreen display mode this button will not be shown due to all the editor's area will act as maximize button.

However, you still can use the stock button or the TinyMCE/CKEditor menu to switch to the fullscreen mode. Although, we recommend removing this button from the toolbar to make room for something else (use big blue button instead).

Please note that in the inline mode of the editor, full screen is not available, neither in CKEditor, nor in TinyMCE. This is due to some specific limitations caused by the internal architecture of these editors. N1ED developers have plans to add such functionality to them.

In order to configure text on the button or hide it, please use these options:

  • ui.showFullScreenButton - set to false if you wish to hide maximize button in classic mode.
  • ui.fullScreenButtonTitle - the caption of maximize button.
  • ui.fullScreenExitButtonTitle - the caption of button letting to close activated fullscreen mode.

Sidebar is a left panel of N1ED that is always visible in the fullscreen mode. With the sidebar you can edit the selected element, add a new widget, or change the document display mode.

With fullscreen mode off and display mode is set to classic, the sidebar activates whenever you select an element. If the sidebar overlaps with some interface elements of your website (for example, CMS admin panel) you can move it to the right side of the screen using the following parameter:

ui: { leftSidebar: false },

In the fullscreen mode the sidebar is still displayed on the left.

Mobile preview

In the fullscreen mode N1ED offers a way to control how your content will be displayed on devices with smaller screen size (smartphones, tablets etc.). So you can enable simulation of viewing content on different devices. Switch between these display modes using the corresponding bar between the toolbar and the document.

By default N1ED has convenient presets of all popular resolutions, but if they do not match your preferences, you can modify them or set your own. The preview parameter consist of key-value pairs (header-width in pixels).

Here is a default value as an example (copy it to your config and modify as needed):

preview: {
    'Mobile': 576,
    'Note': 768,
    'Table': 992,
    'Desktop': 1200