Configuring UI, toolbar and widgets

Toolbar modes

There are three toolbar modes:

• Classic
• Modern
• Manual

Classic toolbar

The Classic Toolbar presents the familiar interface characteristic of CKEditor and TinyMCE. Alongside widget buttons, it introduces additional functionalities like "Configuration" for swift access to visual editor settings, "Bootstrap Editor" for seamless transitioning into "Bootstrap grid" mode for block structuring, and "Maximize" for a full-screen editing. To enhance convenience, the Bootstrap quick panel facilitates rapid addition and rearrangement of Bootstrap blocks without the need to switch to Bootstrap Grid mode.

To hide some buttons, click the desired button, in the dialog that opens you can control the visibility of the button, or rename them, and incorporate informative tooltips.

Modern toolbar

The modern toolbar differs from the classic toolbar with its new clean design. Options for hiding buttons, renaming titles, and adding tooltips remain the same. The buttons are already grouped into sections:

• Bootstrap editor tools
• Widgets and related tools
• Tools for working with images and files
• Services (AI text generator, Translator)
• Editor settings (Configuration, Info)

For swift access to widgets, you have the option to enable all widgets in the additional toolbar line by checking the "Show Widget line" checkbox, or selectively enable specific ones by toggling their visibility buttons.

Manual toolbar

You can customize your editor's toolbar manually according to your preferences by adding the necessary buttons. When selecting the manual toolbar option, N1ED will present you with a list of available toolbar buttons to choose from.

Widget templates

In the configuration panel, you have the ability to customize not only the toolbar but also the widgets themselves. For instance, you can craft widget templates by defining classes, styles, and attributes granting you full control over their appearance and behavior.

To do this, click the desired button, in the dialog that opens you can set your own settings for the corresponding widget.

Structure highlighting

Structure highlighting enables users to visualize the underlying structure of their content as they work. By highlighting elements such as Bootstrap structure (containers, rows, columns) and non-Bootstrap content like headings, paragraphs, and other formatting components, the editor provides a clear overview of how the content is organized.

The usage options:

• Automatically on load: Set the tool to activate automatically upon editor launch.
• Manual activation: Uncheck "Highlight structure on load", enabling you to engage the tool precisely when required, preserving an unobtrusive workflow.
• Highlight Bootstrap structure: Select the option to illuminate only Bootstrap structure elements, such as containers, rows, and columns. This targeted highlighting enhances your understanding of the layout's framework.
• Highlight any structure: Alternatively, you can uncheck "Highlight only Bootstrap blocks structure" to illuminate all elements within the content, offering comprehensive visibility into the arrangement and aiding in meticulous editing.

Advanced options

You can change the advanced UI settings for the editor view to suit your preferences.

• Work only in fullscreen mode

  By selecting this option, you will always load N1ED in fullscreen mode. This mode is convenient for working with the Bootstrap grid when creating block structures. Additionally, you can switch screen size views within it to test your content's responsiveness.

• Show sidebar only after clicking on "Edit widget"

  This option is for the non-fullscreen mode, determining when to open the sidebar for editing elements.

  Note: Do not hide the "Edit widget" button on the toolbar in combination with this setting.

  If the option is set to false, the sidebar will always open as soon as an element is selected in the editing area.

• Show sidebar on the left in non-fullscreen mode

  true — position the sidebar to the left of the editor.

  false — position the sidebar to the right of the editor.

• Show structure on the sidebar

  For widgets with a high level of nesting, breadcrumbs are duplicated on the sidebar for quick toggling between composite elements.

• Expand Tag options on the sidebar by default

  Tag options are collapsed by default. You can modify this behavior if you frequently need to access this tool during editing to add classes, styles, and attributes.

• Enable browse spell check in the Source Code dialog

• Autocomplete classes for all widgets

  Here, you can add your theme classes for the autocomplete feature in Tag options.

Configuration parameters