Configuring UI, toolbar and widgets

All the widgets are available from a CKEditor/TinyMCE toolbar by default, so the toolbar and widgets configuration is located on one page.

The list of options is below:

Configuring widgets an UI screenshot
Configuring Widgets and UI
Configuring toolbar buttons screenshot
Configuring toolbar buttons

Fullscreen mode only

Check this button if you want to force the fullscreen mode for editing content. In minimized mode the overlay on the editor will be drawn (clicking on it will maximize the editor).

API key
ui.mode
Type
string
Default
classic
Valid values
'classic', 'fullscreen'

Show sidebar only when maximized

If you turn off this checkbox, this will change the way of accessing settings of the widget selected in the editor. By default, it will show the settings in the left sidebar in fullscreen mode and will call the dialog by "Edit widget" click in normal mode. If this checkbox is selected, you will always see the widget configuration in the sidebar.

API key
ui.showSidebarOnlyInFullScreen
Type
boolean
Default
true

Defines sidebar or dialog mode is used in normal mode (only when ui.mode equals to 'classic'.

Sidebar is on the left

Sidebar position in normal mode.

API key
ui.leftSidebar
Type
boolean
Default
true

Top buttons

Click on any of the buttons and configure its title and visibility on the top right corner of a toolbar of your editor

API key
ui.showFullScreenButton
Type
boolean
Default
true

"Maximize" button visibility

API key
ui.fullScreenButtonTitle
Type
string
Default
Maximize

Fullscreen button title in normal mode

API key
ui.fullScreenExitButtonTitle
Type
string
Default
OK

Fullscreen button title in maximized mode

API key
ui.showBootstrapEditorButton
Type
boolean
Default
true

Bootstrap Editor button visibility

API key
ui.bootstrapEditorButtonTitle
Type
string
Default
Bootstrap Editor

Bootstrap Editor button title

API key
ui.gridButtonTitle
Type
string
Default
Grid

Grid button title ("Bootstrap Editor" button in maximized mode)

API key
ui.showConfButton
Type
boolean
Default
true

Configuration button visibility

API key
ui.confButtonTitle
Type
string

Configuration button title

Use automatic toolbar

By default, N1ED will fill a toolbar of your CKEditor or TinyMCE with new buttons automatically and you do not need to change toolbar configuration in the initialization script (CKEditor/TinyMCE) or inside `config.js` (CKEditor only). But if you uncheck this option, the list of buttons available for adding on a toolbar will be shown and only the button you add manually will be displayed. Change this option only if you know how to configure CKEditor/TinyMCE toolbar and want to configure it in a special way.

API key
ui.useAutoToolbar
Type
boolean
Default
true

Auto toolbar lines

The auto toolbar can be a single line or multiline in normal (not fullscreen) mode. Set this option to force the number of lines or make autodetection of the best view (based on editor width).

API key
ui.autoToolbarLines
Type
number
Valid values
0, 1, 2

0 means auto, 1 or 2 mean the number of lines

Auto toolbar lines (full screen)

The same as previous option, but in fullscreen mode

API key
ui.autoToolbarLinesInFullScreen
Type
number
Valid values
0, 1, 2

0 means auto, 1 or 2 mean the number of lines

Toolbar

Click on any of the buttons in the list and configure its visibility, title, and mouseover hint. All names of buttons (used as keys) are enumerated below.

API key
ui.toolbarButtons
Type
{[name: string] => {title?: string, hint?: string, isVisible?: boolean}}
Default
{}
Valid values
EditWidget, DeleteWidget, Flmngr, ImgPen, Translator, TranslatorReverse, TranslatorConf, Info, Image, ImagePreview2, ImageGallery2, FontAwesome, YouTube, Table, Link, Anchor, Button, Tabs, Accordion, Alert, Badge, Header, IFrame, HTML, CustomTemplates, Placeholder

If you use the automatic toolbar, you can hide or show some buttons or change other their properties. Place into this array only buttons, which properties you want to override from defaults/cloud config.