Configuring UI, toolbar and widgets

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 parameter

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 parameter

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 parameter

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 parameter

ui.showFullScreenButton

Type

boolean

Default

true

"Maximize" button visibility

API parameter

ui.fullScreenButtonTitle

Type

string

Default

Maximize

Fullscreen button title in normal mode

API parameter

ui.fullScreenExitButtonTitle

Type

string

Default

OK

Fullscreen button title in maximized mode

API parameter

ui.showBootstrapEditorButton

Type

boolean

Default

true

Bootstrap Editor button visibility

API parameter

ui.bootstrapEditorButtonTitle

Type

string

Default

Bootstrap Editor

Bootstrap Editor button title

API parameter

ui.gridButtonTitle

Type

string

Default

Grid

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

API parameter

ui.showConfButton

Type

boolean

Default

true

Configuration button visibility

API parameter

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 parameter

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 parameter

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 parameter

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 parameter

ui.toolbarButtons

Type

{[name: string] => {title?: string, hint?: string, isVisible?: boolean}}

Default

{"Upload":{"title":"Upload","title_v2":"Upload","hint":"","hint_v2":"","isVisible":true,"isVisible_v2":true,"_integrationTypes":["n1ed","flmngr"]},"Flmngr":{"title":"Browse","title_v2":"Browse","hint":"","hint_v2":"","isVisible":true,"isVisible_v2":true,"_integrationTypes":["n1ed","flmngr"]},"ImgPen":{"title":"Edit image","title_v2":"Edit","hint":"","hint_v2":"","isVisible":true,"isVisible_v2":true,"_integrationTypes":["n1ed","flmngr","imgpen"]},"TextareaAI":{"title":"AI Text","title_v2":"AI Text","hint":"","hint_v2":"","isVisible":false,"isVisible_v2":false,"_integrationTypes":["n1ed","textareaai"]},"TextareaAILess":{"title":"","title_v2":"","hint":"Less AI Text","hint_v2":"Less AI Text","isVisible":false,"isVisible_v2":false,"_integrationTypes":["n1ed","textareaai"]},"TextareaAIMore":{"title":"","title_v2":"","hint":"More AI text","hint_v2":"More AI text","isVisible":false,"isVisible_v2":false,"_integrationTypes":["n1ed","textareaai"]},"Translator":{"title":"","title_v2":"Translate","hint":"Translate selected text","hint_v2":"","isVisible":true,"isVisible_v2":true},"TranslatorReverse":{"title":"","title_v2":"","hint":"Reverse direction","hint_v2":"Reverse direction","isVisible":true,"isVisible_v2":true},"TranslatorConf":{"title":"","title_v2":"","hint":"Translation options","hint_v2":"Translation options","isVisible":true,"isVisible_v2":true},"Info":{"title":"","title_v2":"","hint":"Info","hint_v2":"Info","isVisible":true,"isVisible_v2":true},"Image":{"title":"","title_v2":"","hint":"Insert an image","hint_v2":"Insert an image","isVisible":true,"isVisible_v2":true,"_integrationTypes":["n1ed","flmngr"]},"ImagePreview2":{"title":"","title_v2":"","hint":"Insert image preview","hint_v2":"Insert image preview","isVisible":true,"isVisible_v2":true,"_integrationTypes":["n1ed","flmngr"]},"ImageGallery2":{"title":"","title_v2":"","hint":"Insert a gallery","hint_v2":"Insert a gallery","isVisible":true,"isVisible_v2":true,"_integrationTypes":["n1ed","flmngr"]},"FontAwesome":{"title":"","title_v2":"","hint":"Insert Font Awesome icon","hint_v2":"Insert Font Awesome icon","isVisible":true,"isVisible_v2":true},"BootstrapIcons":{"title":"","title_v2":"","hint":"Insert Bootstrap Icons icon","hint_v2":"Insert Bootstrap Icons icon","isVisible":true,"isVisible_v2":true},"YouTube":{"title":"","title_v2":"","hint":"Insert YouTube video","hint_v2":"Insert YouTube video","isVisible":true,"isVisible_v2":true},"Table":{"title":"","title_v2":"","hint":"Insert a table","hint_v2":"Insert a table","isVisible":true,"isVisible_v2":true},"Link":{"title":"","title_v2":"","hint":"Create a link","hint_v2":"Create a link","isVisible":true,"isVisible_v2":true},"Anchor":{"title":"","title_v2":"","hint":"Create an anchor","hint_v2":"Create an anchor","isVisible":true,"isVisible_v2":true},"Button":{"title":"","title_v2":"","hint":"Insert a button","hint_v2":"Insert a button","isVisible":true,"isVisible_v2":true},"Tabs":{"title":"","title_v2":"","hint":"Insert tabs","hint_v2":"Insert tabs","isVisible":true,"isVisible_v2":true},"Carousel":{"title":"","title_v2":"","hint":"Insert a carousel","hint_v2":"Insert a carousel","isVisible":true,"isVisible_v2":true},"Accordion":{"title":"","title_v2":"","hint":"Insert an accordion","hint_v2":"Insert an accordion","isVisible":true,"isVisible_v2":true},"Alert":{"title":"","title_v2":"","hint":"Insert an alert","hint_v2":"Insert an alert","isVisible":true,"isVisible_v2":true},"Badge":{"title":"","title_v2":"","hint":"Insert a badge","hint_v2":"Insert a badge","isVisible":true,"isVisible_v2":true},"Header":{"title":"","title_v2":"","hint":"Insert a header","hint_v2":"Insert a header","isVisible":true,"isVisible_v2":true},"IFrame":{"title":"","title_v2":"","hint":"Insert embedded page","hint_v2":"Insert embedded page","isVisible":true,"isVisible_v2":true},"HTML":{"title":"","title_v2":"","hint":"Insert HTML snippet","hint_v2":"Insert HTML snippet","isVisible":true,"isVisible_v2":true},"CustomTemplates":{"title":"","title_v2":"","hint":"Custom widgets","hint_v2":"Custom widgets","isVisible":true,"isVisible_v2":true},"Placeholder":{"title":"","title_v2":"","hint":"Insert Placeholder widget","hint_v2":"Insert Placeholder widget","isVisible":false,"isVisible_v2":false},"JoomlaReadMore":{"title":"","title_v2":"","hint":"Joomla Read More cut","hint_v2":"Joomla Read More cut","isVisible":true,"isVisible_v2":true,"_integrations":["joomla"]},"ImagePreview":{"title":"","title_v2":"","hint":"Insert image preview (LightBox)","hint_v2":"Insert image preview (LightBox)","isVisible":true,"isVisible_v2":true},"ImageGallery":{"title":"","title_v2":"","hint":"Insert a gallery (LightBox)","hint_v2":"Insert a gallery (LightBox)","isVisible":true,"isVisible_v2":true},"Grid":{"title":"Grid","title_v2":"Grid","hint":"","hint_v2":"","isVisible":true,"isVisible_v2":true},"Maximize":{"title":"Maximize","title_v2":"Maximize","hint":"","hint_v2":"","isVisible":true,"isVisible_v2":true,"title_minimize":"Minimize","title_minimize_v2":"Minimize","_caption_title_minimize":"Minimize title"},"BlockAdd":{"title":"Add Block","title_v2":"Block","hint":"","hint_v2":"","isVisible":true,"isVisible_v2":true},"BlockSave":{"title":"","title_v2":"","hint":"Save as template","hint_v2":"Save as template","isVisible":true,"isVisible_v2":true,"hint_remove":"Remove from templates","hint_remove_v2":"Remove from templates","_caption_hint_remove":"Remove title"},"BlockMoveUp":{"title":"","title_v2":"","hint":"Move block up","hint_v2":"Move block up","isVisible":true,"isVisible_v2":true},"BlockDelete":{"title":"","title_v2":"","hint":"Delete block","hint_v2":"Delete block","isVisible":true,"isVisible_v2":true},"BlockAddUp":{"title":"","title_v2":"","hint":"Add block before","hint_v2":"Add block before","isVisible":true,"isVisible_v2":true},"BlockMoveDown":{"title":"","title_v2":"","hint":"Move block down","hint_v2":"Move block down","isVisible":true,"isVisible_v2":true},"BlockDuplicate":{"title":"","title_v2":"","hint":"Duplicate block","hint_v2":"Duplicate block","isVisible":true,"isVisible_v2":true},"AddWidget":{"title":"Add widget","title_v2":"Widget","hint":"","hint_v2":"","isVisible":false,"isVisible_v2":true},"EditWidget":{"title":"Edit Widget","title_v2":"Edit","hint":"","hint_v2":"","isVisible":true,"isVisible_v2":true},"DeleteWidget":{"title":"","title_v2":"","hint":"Delete widget","hint_v2":"Delete","isVisible":true,"isVisible_v2":true},"SaveWidget":{"title":"","title_v2":"","hint":"Save as template","hint_v2":"Save as template","isVisible":true,"isVisible_v2":true,"hint_remove":"Remove from templates","hint_remove_v2":"Remove from templates","_caption_hint_remove":"Remove title"},"AddTextUp":{"title":"","title_v2":"","hint":"Add text before","hint_v2":"Add text before","isVisible":true,"isVisible_v2":true},"AddTextDown":{"title":"","title_v2":"","hint":"Add text after","hint_v2":"Add text after","isVisible":true,"isVisible_v2":true},"Configure":{"title":"","title_v2":"","hint":"Configure","hint_v2":"Configure","isVisible":true,"isVisible_v2":true}}

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.