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.

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, 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:

leftSidebar: false,

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

Structure view

If the Structure button on the sidebar is active (the default state), then all elements and widgets in your content will have a frame so you could see their boundaries. Clicking this button again turns off structure view.

If you don't want to turn off structure view every time you start editing, use the following parameter:

showStructure: false,

You still can enable or disable structure view manually.

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

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.

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).

Use these keys to configure your full screen mode:

ui: {
    'leftSidebar': true,
    'sidebarInFullScreenOnly': true,
    'openFullScreenOnFocus': true,
    'showFullScreenButton': true,
    'fullScreenButtonTitle': 'Edit',
    'fullScreenExitButtonTitle': 'OK',
    'minZIndex': 200000,
    'iframePopUp': true,
    'disableNotices': false

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.