Configuring UI, toolbar and widgets

Configuring widgets an UI screenshot

All widgets are available for CKEditor and TinyMCE toolbar. You can enable all widgets by checking the "Show Widget line" checkbox, or enable only some. To do this, click the desired button, in the dialog that opens you can control the visibility of the button, as well as set your own settings for the corresponding widget.

Configuring toolbar buttons screenshot
Configuring toolbar buttons

You can change the advanced UI settings for the editor view to suit your preferences. Here you can also add your theme classes for the autocomplete feature.

Advanced options screenshot
Advanced options

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.