Install N1ED module for Drupal
Looking for Drupal 8 installation?
The N1ED module adds N1ED to the text formats of your Drupal site and lets you configure it from the Drupal admin panel. One module serves Drupal 9, Drupal 10 and Drupal 11. What it adds depends on the editor a text format uses:
- CKEditor 4: the full N1ED. Bootstrap blocks and grid, widgets, the file manager and the image editor. Drupal 9 has CKEditor 4 in core, Drupal 10 gets it from the contributed CKEditor 4 module. There is no CKEditor 4 for Drupal 11.
- CKEditor 5: the file manager and the image editor, as three toolbar buttons in the editor Drupal 10 and Drupal 11 use by default.
CKEditor 4: full N1ED
Download N1ED module using Composer
Run it in the root of your Drupal project. On Drupal 10, require the CKEditor 4 module too:
composer require drupal/ckeditor drupal/n1edOn Drupal 9 CKEditor 4 is part of core, so the module alone is enough:
composer require drupal/n1edEnable Drupal module
In Extend, tick N1ED (and CKEditor on Drupal 10) and press Install. Or with Drush:
drush en ckeditor n1ed
Extend: enable the N1ED module
Configure text formats
Open Configuration → Content authoring → Text formats and editors and press Configure next to Full HTML: N1ED writes Bootstrap classes and attributes, and a format that limits HTML would strip them.
Choose CKEditor as the Text editor (a Drupal 10 format starts on CKEditor 5) and press Save configuration. N1ED is on for every CKEditor 4 format, and the N1ED panel under the editor select can switch it off for this one.
Full HTML on CKEditor 4, with the N1ED panel
Set API key
In the N1ED panel of the same form, press Set API key and paste a key from your Dashboard. No account yet? The Register new account link next to it creates one for free.
The key links your site to its configuration in the Dashboard: the toolbar, widgets, blocks and the file storage. Until you set it, the module runs on a shared demo key.
Set API key: paste a key from your Dashboard
Check your installation
Open Content → Add content → Basic page and choose Full HTML under the body field: the field reloads in N1ED.
A Basic page in CKEditor 4 with N1ED: Bootstrap blocks and the grid
CKEditor 5: file manager
Download and enable the module
Run it in the root of your Drupal project:
composer require drupal/n1ed
drush en n1edInstead of the Drush command, you can tick N1ED in Extend and press Install.
Extend: enable the N1ED module
Add the buttons to the toolbar
Open Configuration → Content authoring → Text formats and editors and press Configure next to Full HTML. Keep it on CKEditor 5 and drag the three buttons of the module from Available buttons into the Active toolbar:
- Upload image or file
- Insert image or file: the file manager
- Edit image: the image editor
Press Save configuration.
CKEditor 5: the three buttons on the toolbar, the Flmngr panel above
Set API key
The same form shows a Flmngr panel. Press Set API key there and paste a key from your Dashboard, or use the Register new account link to create one for free.
The file manager needs a key of your own: on the shared demo key, its button asks you to get one first.
Check your installation
Edit a Basic page in Full HTML: Browse image or file opens the file manager, and Edit image opens the selected image in the image editor.
CKEditor 5: the file manager, opened from the toolbar
The module does more than the editor: image and file fields can pick files with the same file manager (see the module overview), and N1ED works inside Paragraphs.
Configuration
The module keeps one setting per text format: N1ED on or off. Everything else, the toolbar, widgets, Bootstrap blocks and the file storage, is configured for your API key in the Dashboard.
DashboardExamples
N1ED in CKEditor 4 as the module runs it, live with its code, and the demos of Flmngr, the file manager the CKEditor 5 buttons open.