N1ED widgets

After N1ED is installed to TinyMCE or CKEditor, you get a range of widgets to quickly insert to the content of the page. You can configure or hide widgets in this list as well as add your own widget to this list.

Examples of simple widgets are images, YouTube video and so on. Widgets can also be nested: inside the Image Gallery widget there are Gallery Image Preview widgets.

This system replaces raw HTML tag editing in CKEditor. Working with content becomes more semantical and closer to the subject of the content, leaving aside details of its technical implementation. Now, a content manager doesn't need to know HTML. Everything, from images or links to tables or its cell, is a widget. Select a widget and configure it in the left sidebar.

Note the new Breadcrumbs (replacing the older plugin elementspath in CKEditor) - it displays widget hierarchy. This allows you to select parent widgets of the selected widget.

The list only contains widgets you can insert manually. Outside of the list are widgets that are dynamically created inside other widgets (for instance, a cell of a table) or automatically created upon certain events (i.e. paragraph or while the text is edited directly).

Widget list

Add new template

You can insert your own HTML snippet to the content or add your own widgets to the system by providing custom HTML templates for them. Learn more in the article Custom templates в TinyMCE & CKEditor.

Widget list configuration

By default, the list of widgets contains all the widgets registered by the corresponding plugins. Widgets are shipped from the N1ED ecosystem by N1ED and Bootstrap Editor plugins. If you want to hide some of them, define the widgetList parameter that sets what plugins are shown on the widget palette and in what order.

The default value is:

widgetList: [
    "Image", "ImagePreview",
    "ImageGallery", "FontAwesome",
    "YouTube", "Table",
    "Link", "Button",
    "Tabs", "Accordion",
    "Alert", "Anchor",
    "Badge", "Header",
    "IFrame", "HTML"

Delete widgets you don't need, or change the order of widgets in the config to change how they are displayed on the sidebar.

Configuring widgets

Most widgets allow you to adjust their embedding HTML template. For such widgets you can define additional classes, styles, attributes that are added to the widget upon embedding. Also some widgets have their own specific parameters.

For every widget there is a section in the widgets parameter:

widgets: {
    "WidgetName": {
      // widget options here