# N1ED: all pages > N1ED is a plugin for TinyMCE, CKEditor 5 and CKEditor 4 that adds Bootstrap and Tailwind CSS blocks and widgets, the Flmngr file manager, an image editor and AI writing tools, with modules for Drupal, Joomla and Magento. The pages https://n1ed.com/llms.txt lists, in the same order, each one as its Markdown copy (its URL + `.md`). --- # Big Upgrade for TinyMCE & CKEditor (N1ED) > Upgrade TinyMCE and CKEditor with structured editing, file management, image editing, and AI-powered writing. One plugin, complete toolkit. Source: https://n1ed.com/ Updated: 2026-11-14 A swiss-knife plugin that upgrades your editor with structured layouts, file management, image editing, and AI-powered writing. - [Install](https://n1ed.com/docs/install) - [Live demo](https://n1ed.com/docs/examples/tinymce) Free to start. See what is new in the [2026.11 changelog](https://n1ed.com/docs/changelog). ![N1ED block builder inside TinyMCE](https://n1ed.com/img/index/n1ed-wysiwyg-editor.png) Editor42 · TinyMCE · CKEditor 5 · CKEditor 4 · Drupal · Joomla · Magento · React · Any custom CMS/app ## Bootstrap & Tailwind Support Build content block by block using responsive grid layouts. Resize columns visually, insert grid structures, and get clean framework-native HTML output. ![Bootstrap 3 logo](https://n1ed.com/img/index/bootstrap3.png) Bootstrap 3 ![Bootstrap 4 logo](https://n1ed.com/img/index/bootstrap4.png) Bootstrap 4 ![Bootstrap 5 logo](https://n1ed.com/img/index/bootstrap5.png) Bootstrap 5 ![Tailwind 4 logo](https://n1ed.com/img/index/tailwind4.svg) Tailwind 4 ![Bootstrap grid columns resizing example](https://n1ed.com/img/grid-edit/resize-6.png) ![Bootstrap grid columns reordering example](https://n1ed.com/img/grid-edit/move-4.png) ## Make your own block libraries Save any block with a "star" icon and N1ED makes the screenshot automatically. Then reuse and organize your custom blocks — all directly from the editor. ![Custom block library palette in the editor](https://n1ed.com/img/index/block-palette-azure.png) ## Share block libraries across your websites Centrally manage all your blocks in a single dashboard. Create sharing rules and export blocks grouped in collections. Inherit and override the configuration of parent (template) websites. SaaS website builders, studios and agencies will love it — and so will anyone running several websites. ![Block sharing and configuration inheritance between parent and child websites](https://n1ed.com/img/index/block-sharing-azure.png) ## File Manager Upload, host and edit and publish your files and images, no matter where you want to store them: - your own server disk storage - your Amazon S3 bucket - your Azure Blob container - your Google Cloud Storage Powered by [Flmngr](https://flmngr.com) file manager. ![Flmngr file manager screenshot](https://n1ed.com/img/index/file-manager-screenshot.png) ## Image Editor Online image edit without switching to Photoshop. Right from the editor or the file manager. Crop and optimize images before publishing. Apply filters, add text and insert stickers over images. A part of the built-in Flmngr file manager. ![Image42 image editor screenshot](https://n1ed.com/img/index/image-editor-screenshot.png) ## Generate texts with GPT Create text content 10x faster with the AI cowriter. Press `Ctrl+Enter` anywhere (or use the toolbar buttons): it takes into account the caret position, the current text type (a title or regular text) and the text above and below to write a wonderful text. [The AI cowriter writing a text in the editor](https://n1ed.com/img/index/txt42.webm) ## Works everywhere A plugin for the editor you already run, or a ready module for your CMS. - [Editor42](https://n1ed.com/docs/install/editor42) - [TinyMCE](https://n1ed.com/docs/install/tinymce) - [CKEditor 5](https://n1ed.com/docs/install/ckeditor-5) - [CKEditor 4](https://n1ed.com/docs/install/ckeditor) - [Drupal](https://n1ed.com/docs/install/drupal) - [Joomla](https://n1ed.com/docs/install/joomla) - [Magento](https://n1ed.com/docs/install/magento) - [React](https://n1ed.com/docs/install/react) - [JavaScript](https://n1ed.com/docs/install/javascript) - [PHP backend](https://n1ed.com/docs/file-manager/php-composer) - [Node.js backend](https://n1ed.com/docs/file-manager/node-express) ## Let's start - [Install](https://n1ed.com/docs/install) - [Live demo](https://n1ed.com/docs/examples/tinymce) ## Have a SaaS/agency business? We have bulk tariffs and work individually. Our developers will review your implementation to be sure that it satisfies all the best practices. [Contact us](mailto:support@helpdesk.edsdk.com?subject=N1ED%20-%20SaaS%2Fagency%20business) > We were in doubt about how to upgrade TinyMCE saving familiar workflow. N1ED helped to transform simple WYSIWYG editor into awesome block-by-block content builder. We also gave fine image editor to our users they asked about all time. > > This affected both acquisition and retention metrics - kept our competitiveness on the market and improved it. > > — **Paul M.** SaaS website builder CTO, 470 websites > We, on our own, fill information on clients' sites at the request of clients. N1ED helped us to boost productivity of the content manager who did this work. > > Our customers were happy too to see how quickly we do this, we were impressed how many clients can. We also see our own financial benefits in this. > > — **Mike L.** Digital agency owner, 20 websites > I make websites using different CMSs (mostly Drupal and Joomla) and offer N1ED to my clients in case they want to edit complicated content with ease. If anybody tells me about column layout or special widgets on the page - I give them the link on N1ED. > > This year 80% of my clients followed my advice and got Premium plan of N1ED. > > — **Max S.** Freelancer, 12 websites --- # N1ED Documentation > N1ED docs: installing it in Editor42, TinyMCE, CKEditor 5 and 4 or a CMS, the file manager backend, cloud storage, configuration, multisite and the Admin API. Source: https://n1ed.com/docs Section: Overview Updated: 2026-11-12 N1ED upgrades TinyMCE and CKEditor 4 with Bootstrap blocks and widgets, a file manager, an image editor and AI writing tools. One plugin, one API key, configured in the [Dashboard](https://n1ed.com/dashboard). In CKEditor 5 it is one plugin too, with the blocks and the file manager for now. ## Getting started - [Installation](https://n1ed.com/docs/install) — pick your editor or CMS and follow the steps - [Editor42](https://n1ed.com/docs/install/editor42) · [TinyMCE](https://n1ed.com/docs/install/tinymce) · [CKEditor 5](https://n1ed.com/docs/install/ckeditor-5) · [CKEditor 4](https://n1ed.com/docs/install/ckeditor) - [Drupal](https://n1ed.com/docs/install/drupal) · [Joomla](https://n1ed.com/docs/install/joomla) · [Magento](https://n1ed.com/docs/install/magento) - [React](https://n1ed.com/docs/install/react) · [JavaScript snippet](https://n1ed.com/docs/install/javascript) - [Live examples](https://n1ed.com/docs/examples) — N1ED in TinyMCE, CKEditor 5 and CKEditor 4, editable in the browser - [Use N1ED with AI](https://n1ed.com/docs/ai) — these docs for ChatGPT, Claude and coding agents: any page or all of them as Markdown, and llms.txt ## File manager and storage - [File manager backend](https://n1ed.com/docs/file-manager) — the server-side script for PHP (Composer, Laravel, Symfony, plain PHP), Node.js (a package for any app, Express, Nest) and a standalone microservice - [File manager settings](https://n1ed.com/docs/configuration/file-manager) — folders, uploads and the file list, in the Dashboard - [Unsplash API key](https://n1ed.com/docs/configuration/generate-unsplash-key) — free stock images inside the file manager - [Cloud storage](https://n1ed.com/docs/cloud-storage) — Amazon S3, S3-compatible services and Azure Blob instead of a local directory ## Configuration - [Configuration](https://n1ed.com/docs/configuration) — the Dashboard: your framework (Bootstrap or Tailwind CSS), extra CSS and JS, the toolbar and UI, the image editor, the translator, the YouTube and OpenAI keys, and your custom blocks ## For developers - [For developers](https://n1ed.com/docs/api) — where to start when you integrate N1ED into your own product - [Dynamic config](https://n1ed.com/docs/configuration/api) — N1ED parameters in the editor's config, for a page, a user or a role - [Custom CMS integration](https://n1ed.com/docs/custom-cms) — store and change API keys, embed the configuration widget - [Multisite CMS](https://n1ed.com/docs/multisite) — separate file storages, parent and child API keys - [Admin API](https://n1ed.com/docs/admin-api) — create, list, delete and rotate API keys programmatically ## Reference - [Changelog](https://n1ed.com/docs/changelog) — version history and release notes - [How-to](https://n1ed.com/how-to) — the end-user manual: blocks, widgets, media, typography - [Q&A](https://n1ed.com/qa) — answers from support - [Pricing](https://n1ed.com/pricing) — plans, and what the trial includes --- # Plans & pricing (N1ED) > Compare the free Start plan with Premium, Studio and SaaS: price per website and which blocks, widgets and file tools each unlocks. Source: https://n1ed.com/pricing Updated: 2026-11-13 ## Start Most of the tools for free standard use [Install](https://n1ed.com/register) ## Premium All premium features for quick content creation $25/mo. 1 website paid annually as $300 [Get now](https://n1ed.com/dashboard) ## Studio Buy licenses in 25-website packages as you need $250/mo. 25 websites monthly plan [Get now](https://store.payproglobal.com/checkout?currency=USD&products[1][id]=104528) ## SaaS Discounted bulk pricing for SaaS businesses with a special API for creating API keys for each customer website you have. [Contact us](mailto:support@helpdesk.edsdk.com?subject=N1ED%20-%20SaaS%20plan) ## Compare plans | | Start | Premium | Studio | |---|---|---|---| | **Block by block editor** | | | | | Bootstrap 5 framework | Included | Included | Included | | Tailwind 4 framework | Not included | Included | Included | | Bootstrap 4 framework | Not included | Included | Included | | Bootstrap 3 framework | Not included | Included | Included | | Block-by-block page composing | Included | Included | Included | | Insert new blocks with empty structure | Not included | Included | Included | | Insert new blocks from built-in gallery | Not included | Included | Included | | Save and update your own blocks | Included | Included | Included | | Insert your own blocks | Not included | Included | Included | | Responsive Design Preview | Included | Included | Included | | Advanced Bootstrap Editor | Not included | Included | Included | | **Base editor features** | | | | | N1ED widgets | Included | Included | Included | | Image Preview | Included | Included | Included | | Image Gallery widget | Not included | Included | Included | | Carousel widget | Not included | Included | Included | | Page Embed | Included | Included | Included | | Embedding YouTube video | Included | Included | Included | | Font Awesome Icons | Included | Included | Included | | Bootstrap Icons | Included | Included | Included | | Bootstrap Widgets | Included | Included | Included | | Upload and manage files & images | Included | Included | Included | | Inline CSS, Classes, Attributes | Included | Included | Included | | Include custom CSS and JS | Included | Included | Included | | Advanced Code Editor | Included | Included | Included | | Visual Configuration | Included | Included | Included | | Watermark free | Not included | Included | Included | | Admin API | Not included | Not included | Included | | **Image Editor** | | | | | Image Editor, base features | Included | Included | Included | | Image Editor, all 10 tools | Not included | Included | Included | | **File Manager** | | | | | Upload Files & Images | Included | Included | Included | | Basic Files & Images Management Tools | Included | Included | Included | | File Manager API | Included | Included | Included | | Stock photos from Unsplash | Not included | Included | Included | | Resolving file conflicts on upload | Not included | Included | Included | | Multiple file choice | Not included | Included | Included | | Recursive file search | Not included | Included | Included | | Dynamic directory tree loading | Not included | Included | Included | | Auto collapsing of directory tree | Not included | Included | Included | | Expand levels of directories | Not included | Included | Included | | Hide files and directories by name | Not included | Included | Included | | Watermark-free | Not included | Included | Included | | API for Event Listening | Not included | Included | Included | | Extra API methods and parameters | Not included | Included | Included | | **3rd party services** | | | | | Txt42 ChatGPT plugin | Not included | Included | Included | | Translator | Not included | Included | Included | | **File Manager backend** | | | | | No backend required | Not included | Included
S3/Blob/etc. only | Included
S3/Blob/etc. only | | PHP | Included | Included | Included | | Node.js | Included | Included | Included | | Java | Not included | Not included | [Get a quote](mailto:support@helpdesk.edsdk.com?subject=N1ED%20-%20Java%20backend) | | **Cloud support** | | | | | Local storage | Included | Included | Included | | Connector to Cloud Storage | Not included | [Contact us](mailto:support@helpdesk.edsdk.com?subject=N1ED%20-%20Cloud%20storage) | [Contact us](mailto:support@helpdesk.edsdk.com?subject=N1ED%20-%20Cloud%20storage) | | Amazon S3 | Not included | Contact us | Contact us | | Azure Blob | Not included | Contact us | Contact us | | Cloudflare R2 | Not included | Contact us | Contact us | | DigitalOcean object storage | Not included | Contact us | Contact us | | Yandex object storage | Not included | Contact us | Contact us | | Google object storage | Not included | Contact us | Contact us | | **Limits per each website** | | | | | **User limit**
Big teams or SaaS measured by user quantity are charged an additional fee. Contact us for more. | 5 | 5 | custom | | **Get now** | | | | | You are close to quickly building perfect content | [Install](https://n1ed.com/register) | [Get now](https://n1ed.com/dashboard) | [Get now](https://store.payproglobal.com/checkout?currency=USD&products[1][id]=104528) | ## Payment and Taxes Depending on your country, VAT may be applicable to the purchase. The final purchase step will display the actual tax amount for the country you've selected before making the payment. You will receive an invoice from our authorized e-Commerce reseller located at: 225 The East Mall, Suite 1117, Toronto, ON, M9B 0A9, Canada. ## Subscription You can cancel the subscription at any time. However, please note that once the prepaid period ends, access to all premium features will be lost. What a license covers is in the [Licensing](https://n1ed.com/resources/licensing) terms. ## Support All paid users will receive premium support from our team. Contact our support from [Dashboard](https://n1ed.com/dashboard) when needed. We are also ready to answer any pre-sale question, [contact us](mailto:support@helpdesk.edsdk.com?subject=N1ED%20-%20contact%20us). --- # Use N1ED with AI > Give ChatGPT, Claude, Cursor or any coding agent the N1ED docs: any page as Markdown, all docs in one file, llms.txt and the N1ED skill. Source: https://n1ed.com/docs/ai Updated: 2026-10-28 Ask ChatGPT, Claude, Cursor or any coding agent about N1ED, with these docs as the source. The files below are made from these docs every time the site is built, so they always say what the pages say. ## Ask about one page Every docs page has a **Copy page for AI** button next to its breadcrumbs. It copies the page as Markdown, ready to paste into your chat. Its menu opens the page's Markdown, or opens the page in ChatGPT or Claude so you can ask about it. ## Give your AI all the docs All N1ED docs in one Markdown file. Attach it to a chat or an AI project. [Download all docs](https://n1ed.com/llms-full.txt) - [llms.txt](https://n1ed.com/llms.txt): the index AI agents read first, every page with a one-line description. - Any page as Markdown: add `.md` to its URL, like [https://n1ed.com/docs/ai.md](https://n1ed.com/docs/ai.md) for this page. ## The N1ED skill for AI assistants A skill teaches an AI assistant how to install, configure and troubleshoot N1ED: which editor and which way of installing, the exact steps, the configuration options, the common questions. It is made from these docs every time the site is built. [Download the skill](https://n1ed.com/ai/n1ed.zip) [View SKILL.md](https://n1ed.com/ai/n1ed/SKILL.md) | Where | How to add it | |---|---| | Claude apps | Settings > Capabilities > Skills, then upload the zip | | Claude Code | Unzip into `.claude/skills/` of your project, or into `~/.claude/skills/` | | Other coding agents | Unzip into the folder the agent reads skills from | | ChatGPT and other chats | Attach `SKILL.md` to the chat | | Any agent that reads the web | Tell it: `Read https://n1ed.com/ai/n1ed/SKILL.md and follow it` | ## Coding agents Start the conversation with: ```text Read https://n1ed.com/llms.txt first, then help me add N1ED to my project. ``` ## What every AI should know about N1ED - N1ED, Blk42, Flmngr, Txt42 and Image42 (formerly ImgPen) are one platform. A website runs on ONE API key: the key's configuration decides which product loads, and everything its licence covers (the file manager and image editor inside N1ED, for example) comes with the same key. Never put a second API key on a page. - `apiKey`, `Blk42.apiKey` and `Flmngr.apiKey` are names for that one key, never a second one. - Every product loads from `cloud.n1ed.com`, and saved content loads `cdn.n1ed.com/widgets.js`. Older hosts such as `cloud.blk42.com` and `cloud.flmngr.com` still answer, but they are legacy: write `cloud.n1ed.com` in new code. - The key's configuration is set in its Dashboard. Options passed in the editor's own config win over the Dashboard's; use only option names the documentation lists, never guess one. - A CMS module of ours (Drupal, Joomla, Magento) has one API key field: set the key there. - The key in the samples, `N1ED24RR1234123412341234`, is a shared demo key for trying N1ED out. A website gets its own free key in the [Dashboard](https://n1ed.com/dashboard). - In CKEditor 5, N1ED is one npm package, `@edsdk/n1ed-ckeditor5`, with the blocks and the file manager; which of them run is set in the Dashboard for the key. TinyMCE and CKEditor 4 get everything. The same list opens [llms.txt](https://n1ed.com/llms.txt) and the skill. --- # Install N1ED > Install N1ED as a plugin for Editor42, TinyMCE, CKEditor 5 or CKEditor 4, as a module for Drupal, Joomla and Magento, or as a React component or a JS snippet. Source: https://n1ed.com/docs/install Section: Installation Updated: 2026-11-12 N1ED installs into the editor you already have. Pick your editor for the plugin, the ready-to-use bundle or the CDN script, or pick your CMS for a ready module that brings the editor along. - [Editor42](https://n1ed.com/docs/install/editor42): Our free editor based on TinyMCE: the plugin, a ready-to-use bundle or the CDN script. - [TinyMCE](https://n1ed.com/docs/install/tinymce): Plugin, ready-to-use bundle or CDN script, for TinyMCE 5 to 8. - [CKEditor 5](https://n1ed.com/docs/install/ckeditor-5): One plugin from npm, a ready-to-use bundle or CDN script. The blocks and the file manager. - [CKEditor 4](https://n1ed.com/docs/install/ckeditor): The plugin for the CKEditor 4 you host, with its n1theme skin. - [Drupal](https://n1ed.com/docs/install/drupal): A module for Drupal 9, 10 and 11; the same module installs on legacy Drupal 8. - [Joomla](https://n1ed.com/docs/install/joomla): An extension for Joomla 4 and 5 (not Joomla 6 yet); a separate build for Joomla 3. - [Magento](https://n1ed.com/docs/install/magento): An extension for Magento 2. - [React](https://n1ed.com/docs/install/react): The @edsdk/n1ed-react component from npm. - [JavaScript snippet](https://n1ed.com/docs/install/javascript): One script from the CDN: the editor and N1ED, configured by your API key. ## After the installation - Get a free API key in the [Dashboard](https://n1ed.com/dashboard) and configure the toolbar, widgets and file storage there — no code changes needed. - [Install the file manager backend](https://n1ed.com/docs/file-manager) on your server (PHP or Node.js), or link a [cloud storage](https://n1ed.com/docs/cloud-storage). - Building your own CMS or a multisite platform? See [Custom CMS integration](https://n1ed.com/docs/custom-cms), [Multisite](https://n1ed.com/docs/multisite) and the [Admin API](https://n1ed.com/docs/admin-api). - Try it first: the [live examples](https://n1ed.com/docs/examples) run N1ED in TinyMCE, CKEditor 5, CKEditor 4 and React on a demo key. --- # Install N1ED plugin for Editor42 > Install N1ED in Editor42, our free MIT-licensed editor based on TinyMCE: the plugin in your own Editor42, the ready-to-use bundle, or one CDN script. Source: https://n1ed.com/docs/install/editor42 Section: Installation > Editor42 Updated: 2026-11-13 ![N1ED plugin for Editor42](https://n1ed.com/img/plugins/editor42-plugin.png) [Editor42](https://editor42.com) is our free MIT-licensed rich text editor, an auditable fork of TinyMCE 6.8.6 with the same API under the `editor42` global. The N1ED plugin for TinyMCE runs in it unchanged: the same plugin, the same API key. *The page shows these as tabs, one at a time: Plugin, Ready-to-Use Bundle, CDN.* ## Plugin ### Step 1: Download Get the N1ED plugin for the Editor42 you already run. [Download Plugin](https://n1ed.com/download/n1ed-tinymce.zip) ### Step 2: Unpack Unpack the archive into the Editor42 folder, the one that holds `plugins/`. The plugin lands here: ```text editor42/ plugins/ n1ed/ plugin.js plugin.min.js ``` ### Step 3: Enable Enable the N1ED add-on in the Editor42 config: ```js editor42.init({ selector: "#editor", plugins: "n1ed", // apiKey: "...", // Get your own key in the Dashboard: https://n1ed.com/dashboard }); ``` The N1ED plugin is fully functional after this step. Next, you will need to link your file storage by installing the file manager backend on your server. ### Step 4: Install backend Now you need to [install the file manager server-side script](https://n1ed.com/docs/file-manager) on your server to enable the file manager in your editor. Follow the instructions provided in the link to complete the setup. ### ✓ Ready to Use ## Ready-to-Use Bundle ### Step 1: Download The ready-to-use bundle (ZIP) already contains the N1ED plugin in a fully preconfigured, **TinyMCE-compatible** environment. The editor inside is [**Editor42**](https://editor42.com) — our free MIT-licensed editor, based on **TinyMCE** and fully compatible with it. Use it as an instant preview or copy it into your project, and only link your storage when you are ready. [Download Bundle](https://n1ed.com/download/tinymce-with-n1ed.zip) ### Step 2: Unpack Unpack it somewhere into your webserver public directory. For example: ```text var/ www/ public/ editor42/ editor42.min.js sample.html ``` You can use `sample.html` to immediately run the editor and check how it works, even outside of a webserver. Then you may want to remove this file if it isn't needed anymore. ### Step 3: Attach to content box Add the script link onto your page and initialize the editor there, attaching it to the textarea or some div with the content you want to edit. ```html ``` ### Step 4: Link your storage Only link your storage when you are ready: [install the file manager server-side script](https://n1ed.com/docs/file-manager) on your server. ### ✓ Ready to Use ## CDN ### Step 1: Add the CDN Script One script loads Editor42 from our cloud with the N1ED plugin enabled and preconfigured, always the latest version. Start the editor with `editor42.init()` in `window.onEditorLoaded`, as below. ```html
``` You can copy this snippet into any place of your `` tag, but the scripts must go below the editor placeholder and their order is important. The [JavaScript snippet](https://n1ed.com/docs/install/javascript) page has the details. ### Step 2: Set API key After the previous step your editor should load fine with the demo key. Then use your own API key from the [Dashboard](https://n1ed.com/dashboard): replace the demo key in the URL after `?apiKey=` with yours. The Dashboard is also where you configure the toolbar, the widgets and the file storage of that key. Please don't pass your API key as a parameter to `editor42.init()`. The CDN script expects it to be present at load time, passed in the URL. ### Step 3: Link your storage Only link your storage when you are ready: [install the file manager server-side script](https://n1ed.com/docs/file-manager) on your server. ### ✓ Ready to Use ## Configuration Configure your N1ED Editor42 installation in the Dashboard: choose the toolbar and widgets, link the file storage, set Bootstrap options and custom blocks, all without touching the code. [Dashboard](https://n1ed.com/dashboard) --- # Install N1ED plugin for TinyMCE > Install the N1ED plugin into TinyMCE or Editor42 as a plugin zip, a ready-to-use bundle or a CDN script: Bootstrap blocks, widgets, file manager, image editor. Source: https://n1ed.com/docs/install/tinymce Section: Installation > TinyMCE Updated: 2026-11-13 ![TinyMCE with Bootstrap plugin installation](https://n1ed.com/img/plugins/tinymce-plugin.png) The quickest way to enable Bootstrap (styles, grid, blocks, and widgets) in your editor is to install the N1ED plugin into TinyMCE 5 to 8 (also known as Tiny.cloud) or Editor42. The file manager, image editor, and other handy tools are also included in this add-on. *The page shows these as tabs, one at a time: Plugin, Ready-to-Use Bundle, CDN.* ## Plugin ### Step 1: Download Get the N1ED plugin for upgrading your existing installation of: - [Editor42](https://editor42.com), our free TinyMCE fork, with [its own installation page](https://n1ed.com/docs/install/editor42) - TinyMCE 8, 7, 6 and 5 [Download Plugin](https://n1ed.com/download/n1ed-tinymce.zip) ### Step 2: Unpack Unpack the archive into the TinyMCE folder, the one that holds `plugins/`. The plugin lands here: ```text tinymce/ plugins/ n1ed/ plugin.js plugin.min.js ``` ### Step 3: Enable Enable the N1ED add-on in the TinyMCE config: ```js tinymce.init({ selector: "#editor", plugins: "n1ed", // apiKey: "...", // Get your own key in the Dashboard: https://n1ed.com/dashboard }); ``` The N1ED plugin is fully functional after this step. Next, you will need to link your file storage by installing the file manager backend on your server. ### Step 4: Install backend Now you need to [install the file manager server-side script](https://n1ed.com/docs/file-manager) on your server to enable the file manager in your editor. Follow the instructions provided in the link to complete the setup. ### ✓ Ready to Use ## Ready-to-Use Bundle ### Step 1: Download The ready-to-use bundle (ZIP) already contains the N1ED plugin in a fully preconfigured, **TinyMCE-compatible** environment. The editor inside is [**Editor42**](https://editor42.com) — our free MIT-licensed editor, based on **TinyMCE** and fully compatible with it. Use it as an instant preview or copy it into your project, and only link your storage when you are ready. [Download Bundle](https://n1ed.com/download/tinymce-with-n1ed.zip) ### Step 2: Unpack Unpack it somewhere into your webserver public directory. For example: ```text var/ www/ public/ editor42/ editor42.min.js sample.html ``` You can use `sample.html` to immediately run the editor and check how it works, even outside of a webserver. Then you may want to remove this file if it isn't needed anymore. ### Step 3: Attach to content box Add the script link onto your page and initialize the editor there, attaching it to the textarea or some div with the content you want to edit. ```html ``` ### Step 4: Link your storage Only link your storage when you are ready: [install the file manager server-side script](https://n1ed.com/docs/file-manager) on your server. ### ✓ Ready to Use ## CDN ### Step 1: Add the CDN Script One script loads the editor with the N1ED plugin enabled and preconfigured, always the latest version, cached on the CDN. The editor is [Editor42](https://editor42.com), our free editor based on TinyMCE, so `tinymce.init()` works unchanged. To keep TinyMCE itself, install N1ED as a plugin (the first tab). ```html
``` You can copy this snippet into any place of your `` tag, but the scripts must go below the editor placeholder and their order is important. The [JavaScript snippet](https://n1ed.com/docs/install/javascript) page has the details. ### Step 2: Set API key After the previous step your editor should load fine with the demo key. Then use your own API key from the [Dashboard](https://n1ed.com/dashboard): replace the demo key in the URL after `?apiKey=` with yours. The Dashboard is also where you configure the toolbar, the widgets and the file storage of that key. Please don't pass your API key as a parameter to `tinymce.init()`. The CDN script expects it to be present at load time, passed in the URL. ### Step 3: Link your storage Only link your storage when you are ready: [install the file manager server-side script](https://n1ed.com/docs/file-manager) on your server. ### ✓ Ready to Use ## Configuration Configure your N1ED TinyMCE installation in the Dashboard: choose the toolbar and widgets, link the file storage, set Bootstrap options and custom blocks, all without touching the code. [Dashboard](https://n1ed.com/dashboard) ## Examples Live CodePlay examples for TinyMCE with the JS/CSS/HTML code provided. - [JS snippet: TinyMCE with N1ED from one script](https://n1ed.com/docs/examples/tinymce) - [TinyMCE plugin: N1ED added to your own TinyMCE](https://n1ed.com/docs/examples/tinymce-plugin) --- # Install N1ED plugin for CKEditor 5 > Install N1ED into CKEditor 5 from npm, as a ready-to-use bundle or a CDN script: Bootstrap and Tailwind blocks, the file manager and the image editor. Source: https://n1ed.com/docs/install/ckeditor-5 Section: Installation > CKEditor 5 Updated: 2026-11-13 N1ED comes to CKEditor 5 as one plugin: the blocks with a responsive Bootstrap or Tailwind grid, and the Flmngr file manager with the Image42 (formerly ImgPen) image editor. Which of them your editor runs is set for your API key in the same [Dashboard](https://n1ed.com/dashboard) as for TinyMCE and CKEditor 4, with no change to the build. The other N1ED features will come to CKEditor 5 later. *The page shows these as tabs, one at a time: Plugin, Ready-to-Use Bundle, CDN.* ## Plugin ### Step 1: Install NPM package The N1ED plugin is distributed in one npm package that is easy to add into your existing CKEditor 5 build project for further compilation. ```sh npm install --save-dev @edsdk/n1ed-ckeditor5 ``` Moving from `@edsdk/blk42-ckeditor5` or `@edsdk/flmngr-ckeditor5`? Replace them, don't add to them: remove their imports and their `Blk42` / `Flmngr` entries from `plugins`. An old version left in the build next to N1ED stops CKEditor 5 before it starts (two plugins named `Flmngr`). ### Step 2: Include to build Add N1ED into your import section: ```js import { ClassicEditor, Image, Essentials, Paragraph, Bold, Italic } from 'ckeditor5'; import N1ED from "@edsdk/n1ed-ckeditor5"; ``` *The page highlights line 9 of this code.* Then pass it to the `plugins` section of your `ClassicEditor` creation method call, put the three file manager buttons on the toolbar and set the API key: ```js ClassicEditor.create( document.querySelector('#editor'), // your editor selector { licenseKey: "GPL", // or your commercial key: CKEditor 5 v44+ will not start without one plugins: [ Essentials, Paragraph, Bold, Italic, Image, // the standard image plugin, the file manager needs it N1ED ], toolbar: [ 'bold', 'italic', '|', 'upload', // the three 'flmngr', // buttons 'imgpen' // of Flmngr ], apiKey: "N1ED24RR1234123412341234", // the demo key; yours is in the Dashboard: https://n1ed.com/dashboard } ).then( editor => { console.log(editor); } ).catch( error => { console.error(error.stack); } ); ``` *The page highlights lines 11, 16-19 and 21 of this code.* The key decides what runs. The blocks, the file manager and the image editor are the plugin checkboxes of your key in the [Dashboard](https://n1ed.com/dashboard), and a change there needs no rebuild. No need for the file manager? Switch it off there, or with `N1ED: { plugins: { Flmngr: false } }` in the editor's config, and leave its buttons out of the toolbar. ### Step 3: Build Build your CKEditor 5 project or your project with CKEditor 5 imported to apply the newly added plugin. If you see the file manager buttons on the toolbar and a new bottom toolbar of the editor, everything works fine. ### Step 4: Install backend Now you need to [install the file manager server-side script](https://n1ed.com/docs/file-manager) on your server to enable the file manager in your editor. Follow the instructions provided in the link to complete the setup. ### ✓ Ready to Use ## Ready-to-Use Bundle ### Step 1: Download The ready-to-use CKEditor 5 bundle already contains the N1ED plugin, precompiled and enabled, with the file manager buttons on the toolbar and Bootstrap or Tailwind layouts from the start. Just download and use it, HTML sample included. [Download Bundle](https://n1ed.com/download/ckeditor-5-with-n1ed.zip) ### Step 2: Unpack The archive contains the compiled build and a ready-made sample page: ```text build/ ckeditor5-n1ed.js ckeditor5-n1ed.js.map sample/ index.html styles.css ``` Open `sample/index.html` right from your disk to see the editor running — no webserver needed. When you are ready to install it, copy `build/ckeditor5-n1ed.js` somewhere into your webserver public directory, for example: ```text var/ www/ public/ js/ ckeditor5-n1ed.js ``` The `.map` file is optional: it is what turns a minified stack trace back into readable line numbers if you ever need to report a problem. ### Step 3: Attach to content box Add the script link onto your page and initialize CKEditor 5 there, attaching it to the textarea or some div with the content you want to edit. ```html ``` No need for the file manager? Switch it off in the [Dashboard](https://n1ed.com/dashboard), or pass `removePlugins: ['Flmngr']`: the bundle switches it off and its buttons leave the toolbar too. ### Step 4: Link your storage Only link your storage when you are ready: [install the file manager server-side script](https://n1ed.com/docs/file-manager) on your server. ### ✓ Ready to Use ## CDN ### Step 1: Add the CDN Script One script loads CKEditor 5 with the N1ED plugin enabled and preconfigured, always the latest version. ```html
``` *The page highlights line 2 of this code.* ### Step 2: Link your storage Only link your storage when you are ready: [install the file manager server-side script](https://n1ed.com/docs/file-manager) on your server. ### ✓ Ready to Use ## Configuration The plugin checkboxes of your key in the Dashboard decide which parts run in CKEditor 5, the blocks, the file manager and the image editor, with no rebuild. Configure them there too: link the file storage, set the Bootstrap or Tailwind options and your own blocks, all without touching the code. [Dashboard](https://n1ed.com/dashboard) ## Examples Live CodePlay examples for CKEditor 5 with the JS/CSS/HTML code provided. - [CKEditor 5 plugin (beta): the blocks and the file manager in CKEditor 5](https://n1ed.com/docs/examples/ckeditor-5) --- # Install N1ED plugin for CKEditor > Install the N1ED plugin into your CKEditor 4: Bootstrap blocks, widgets, the file manager and the image editor in the editor you already run. Source: https://n1ed.com/docs/install/ckeditor Section: Installation > CKEditor 4 Updated: 2026-11-13 ![CKEditor 4 with Bootstrap plugin installation](https://n1ed.com/img/plugins/ckeditor-plugin.png) The quickest way to enable Bootstrap (styles, grid, blocks, and widgets) in CKEditor 4 is to install the N1ED plugin. The file manager, image editor, and other handy tools are also included in this add-on, together with N1ED's own `n1theme` skin. ## Step 1: Download Get the N1ED plugin for installing into your existing CKEditor 4 editor. Note: using the latest free version of CKEditor (4.22.1) is recommended. [Download Plugin](https://n1ed.com/download/n1ed-ckeditor.zip) ## Step 2: Unpack Unpack the archive into the CKEditor folder, the one that holds `plugins/`. The plugin and its skin land here: ```text ckeditor/ plugins/ N1ED-editor/ plugin.js skins/ n1theme/ ... ``` ## Step 3: Enable Enable the N1ED add-on in the CKEditor 4 config: ### Tab: config.js ```js CKEDITOR.editorConfig = function(config) { config.extraPlugins = "N1ED-editor"; config.skin = "n1theme"; // N1ED's own theme for CKEditor config.allowedContent = true; // keep the classes and attributes N1ED writes config.removePlugins = "iframe,magicline"; // N1ED has better support of this config.versionCheck = false; // skip its upgrade notice of CKEditor itself // config.apiKey = "..."; // Get your own key in the Dashboard: https://n1ed.com/dashboard } ``` ### Tab: Direct initialization ```js CKEDITOR.replace("editorId", { extraPlugins: "N1ED-editor", skin: "n1theme", // N1ED's own theme for CKEditor allowedContent: true, // keep the classes and attributes N1ED writes removePlugins: "iframe,magicline", // N1ED has better support of this versionCheck: false, // skip its upgrade notice of CKEditor itself // apiKey: "...", // Get your own key in the Dashboard: https://n1ed.com/dashboard }); ``` Please avoid using spaces in `extraPlugins` if you have other plugins enabled. Use a comma only as the separator. The N1ED plugin is fully functional after this step. Next, you will need to link your file storage by installing the file manager backend on your server. ## Step 4: Install backend Now you need to [install the file manager server-side script](https://n1ed.com/docs/file-manager) on your server to enable the file manager in your editor. Follow the instructions provided in the link to complete the setup. ## ✓ Ready to Use ## Configuration Configure your N1ED CKEditor 4 installation in the Dashboard: choose the toolbar and widgets, link the file storage, set Bootstrap options and custom blocks, all without touching the code. [Dashboard](https://n1ed.com/dashboard) ## Examples Live CodePlay examples for CKEditor 4 with the JS/CSS/HTML code provided. - [CKEditor 4 plugin: N1ED added to your own CKEditor 4](https://n1ed.com/docs/examples/ckeditor) --- # Install N1ED module for Drupal > Install the N1ED module on Drupal 9, 10 or 11 with Composer: full N1ED on CKEditor 4, the blocks with the file manager and image editor on CKEditor 5. Source: https://n1ed.com/docs/install/drupal Section: Installation > Drupal Updated: 2026-11-11 *Looking for [Drupal 8 installation](https://n1ed.com/docs/install/drupal-8)?* 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](https://www.drupal.org/project/ckeditor). There is no CKEditor 4 for Drupal 11. - **CKEditor 5: the blocks with the file manager and the image editor.** The blocks get their controls around the editor, the file manager its three toolbar buttons, in the editor Drupal 10 and Drupal 11 use by default. *The page shows these as tabs, one at a time: CKEditor 4: full N1ED, CKEditor 5: blocks and file manager.* ## CKEditor 4: full N1ED ### Step 1: Download N1ED module using Composer Run it in the root of your Drupal project. On **Drupal 10**, require the CKEditor 4 module too: ```bash composer require drupal/ckeditor drupal/n1ed ``` On **Drupal 9** CKEditor 4 is part of core, so the module alone is enough: ```bash composer require drupal/n1ed ``` ### Step 2: Enable Drupal module In **Extend**, tick **N1ED** (and **CKEditor** on Drupal 10) and press **Install**. Or with Drush: ```bash drush en ckeditor n1ed ``` - [![Enabling the N1ED module on the Extend page of Drupal](https://n1ed.com/img/screenshots/docs/integrations/drupal/thumbs/enable-n1ed-module.jpg)](https://n1ed.com/img/screenshots/docs/integrations/drupal/enable-n1ed-module.png) *Extend: enable the N1ED module* ### Step 3: 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. - [![The Full HTML text format in Drupal on CKEditor 4, with the N1ED panel under the editor select](https://n1ed.com/img/screenshots/docs/integrations/drupal/thumbs/full-html-ckeditor-4-n1ed.jpg)](https://n1ed.com/img/screenshots/docs/integrations/drupal/full-html-ckeditor-4-n1ed.png) *Full HTML on CKEditor 4, with the N1ED panel* ### Step 4: Set API key In the N1ED panel of the same form, press **Set API key** and paste a key from your [Dashboard](https://n1ed.com/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. - [![The Set API key dialog of the N1ED module in the Drupal admin panel](https://n1ed.com/img/screenshots/docs/integrations/drupal/thumbs/set-n1ed-api-key.jpg)](https://n1ed.com/img/screenshots/docs/integrations/drupal/set-n1ed-api-key.png) *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 Drupal Basic page edited in CKEditor 4 with N1ED: Bootstrap blocks with the grid outlined](https://n1ed.com/img/screenshots/docs/integrations/drupal/thumbs/ckeditor-4-n1ed-bootstrap-editor.jpg)](https://n1ed.com/img/screenshots/docs/integrations/drupal/ckeditor-4-n1ed-bootstrap-editor.png) *A Basic page in CKEditor 4 with N1ED: Bootstrap blocks and the grid* ## CKEditor 5: blocks and file manager ### Step 1: Download and enable the module Run it in the root of your Drupal project: ```bash composer require drupal/n1ed drush en n1ed ``` Instead of the Drush command, you can tick **N1ED** in **Extend** and press **Install**. - [![Enabling the N1ED module on the Extend page of Drupal](https://n1ed.com/img/screenshots/docs/integrations/drupal/thumbs/enable-n1ed-module.jpg)](https://n1ed.com/img/screenshots/docs/integrations/drupal/enable-n1ed-module.png) *Extend: enable the N1ED module* ### Step 2: 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 toolbar configuration in Drupal with the Upload, Insert and Edit image buttons of the N1ED module](https://n1ed.com/img/screenshots/docs/integrations/drupal/thumbs/ckeditor-5-file-manager-buttons.jpg)](https://n1ed.com/img/screenshots/docs/integrations/drupal/ckeditor-5-file-manager-buttons.png) *CKEditor 5: the three buttons on the toolbar, the Flmngr panel above* ### Step 3: Set API key The same form shows a **Flmngr** panel. Press **Set API key** there and paste a key from your [Dashboard](https://n1ed.com/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. - [![The Flmngr file manager opened from the CKEditor 5 toolbar of a Drupal node form](https://n1ed.com/img/screenshots/docs/integrations/drupal/thumbs/ckeditor-5-flmngr-file-manager.jpg)](https://n1ed.com/img/screenshots/docs/integrations/drupal/ckeditor-5-flmngr-file-manager.png) *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](https://n1ed.com/docs/install/drupal/module-overview)), and N1ED works inside [Paragraphs](https://n1ed.com/docs/install/drupal/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. [Dashboard](https://n1ed.com/dashboard) ## Examples 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. - [CKEditor 4 plugin: N1ED added to your own CKEditor 4](https://n1ed.com/docs/examples/ckeditor) - [Flmngr demos: the file manager's own demos, on flmngr.com](https://n1ed.com/docs/examples/file-manager) --- # Overview of N1ED module for Drupal > What changes on a Drupal site once the module is enabled: a boosted CKEditor, Bootstrap block tools and Flmngr on the image fields. Source: https://n1ed.com/docs/install/drupal/module-overview Section: Installation > Drupal > Drupal module overview Updated: 2026-10-21 ## Installation N1ED comes as a Drupal module (Drupal 8, 9, 10 and 11): see the [installation manual](https://n1ed.com/docs/install/drupal). ![Install Drupal module](https://n1ed.com/img/screenshots/docs/integrations/drupal8/drupal8-module-install.png) *Install Drupal module* ![Enable Drupal module](https://n1ed.com/img/screenshots/docs/integrations/drupal8/drupal8-module-enable.png) *Enable Drupal module* ## First look Well, N1ED is installed, let's check what changed on your Drupal website. The main thing is N1ED now attached its widgets, Bootstrap layout editor, file manager, and image editor to your CKEditor. Bootstrap blocks building tools are also available. Now when you open some article for edit, you can see your CKEditor is significantly boosted. This happens when you edit content with the `Full HTML` format N1ED is linked to. So it will not affect comment forms that are edited using `Basic HTML` or `Plain text` formats. ![Edit article in Drupal with N1ED](https://n1ed.com/img/screenshots/docs/integrations/drupal8/drupal8-edit-article.png) *N1ED attached to CKEditor in Drupal* ![Edit content with Bootstrap builder](https://n1ed.com/img/screenshots/docs/addons/bootstrap-editor/content-with-bootstrap-editor.png) *Content created with Bootstrap Editor* The second is N1ED improves all your image fields by being included in the bundle Flmngr file manager. When you need to attach some image to the article by specialized field, you can browse your server with the file manager and select an existing image or upload a new one. ![Add new file field](https://n1ed.com/img/screenshots/docs/integrations/drupal8/image-field.png) *Add new file field with uploaded file* ![Browsing files](https://n1ed.com/img/screenshots/docs/addons/file-manager/images.png) *File manager window* ## Configuration N1ED has fully visual configuration, in your [Dashboard](https://n1ed.com/dashboard). The configuration button of N1ED ![conf icon](https://n1ed.com/img/index/pricing/conf.svg) opens it in a new tab. See [Editing N1ED configuration](https://n1ed.com/docs/configuration). ![Settings tab of the N1ED Dashboard](https://n1ed.com/img/screenshots/docs/widgets/config-editor/visual-configuration.png) *Settings tab of the Dashboard* ![Toolbar configuration](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-auto-toolbar.png) *Toolbar configuration* ![Bootstrap Editor settings](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-bootstrap.png) *Bootstrap Editor configuration* You can also configure your N1ED integration to Drupal in `Administration` -> `Text formats and editors`. Click on some text format and inside you will see options to enable/disable N1ED for it. Text format on the top of this list will load by default you user who has access to it, so you probably want to attach N1ED to the first text format in the list. ![Configure text formats](https://n1ed.com/img/screenshots/docs/integrations/drupal8/drupal8-configure-n1ed.png) *Edit "Full Html" text format* ![Change API key](https://n1ed.com/img/screenshots/docs/integrations/drupal8/drupal8-change-api-key.png) *Change API key* ## Conclusion Now when you have installed N1ED it is ready to work. We recommend you to read about how to work with blocks to build your content [block by block](https://n1ed.com/how-to/bootstrap/editor/bootstrap-block-by-block-builder). Also here is an article describing compatibility with [Paragraphs module of Drupal](https://n1ed.com/docs/install/drupal/paragraphs) which also offers a way of building pages from blocks (N1ED supports it too). --- # Working N1ED and Paragraph modules together > Build multi-column blocks inside CKEditor instead of adding Paragraphs items, and keep Drupal article editing forms short. Source: https://n1ed.com/docs/install/drupal/paragraphs Section: Installation > Drupal > Working with Paragraphs Updated: 2026-10-21 ![N1ED and Paragraphs module in Drupal scheme](https://n1ed.com/img/screenshots/docs/integrations/drupal8/Drupal-Paragraphs-N1ED-scheme.png) ## The problem When you edit the content on some pages in Drupal, sometimes you want to mix different types of content on one page. You want to mix one, two, and three column layouts, attached images, product items and other types of content, etc. ## Paragraphs solves the problem The most popular solution is to use [Paragraphs](https://www.drupal.org/project/paragraphs) module. It gives you a feature to define some blocks which contain one or more Drupal fields inside. Then you can add them in the contents. You can also set some limits for the blocks: some of them can be added many times, some - just one, the same for fields inside them. Not too easy to configure and use, but this is a must for all websites with the rich structure on their pages. ## N1ED improves and simplifies Paragraphs N1ED is a plugin for CKEditor. It upgrades CKEditor to let it: - [Create Bootstrap structure](https://n1ed.com/how-to/bootstrap/editor/bootstrap-block-by-block-builder) - Insert new widgets inside this structure - other features (like file manager/image editor) not related to Paragraphs As far as CKEditor and N1ED run inside blocks of Paragraphs module, they will help you to create a structure inside them. They are very useful when you want to create multiple content blocks with different column numbers (different backgrounds, etc.) going one by one. In this case you do not create new Paragraph blocks, you create new blocks inside CKEditor. Please see the scheme above to see the difference. Advantages of this approach: - Your article editing form is shorter and more simple. Paragraphs module adds a lot of repeating descriptions and unused duplicate buttons to all blocks it creates. - Your pages load faster. Drupal will store all contents you edit inside CKEditor in one place (as one Paragraph block), so fewer pieces need to find in DB when builds the page for end users. - You can still mix other types of content. CKEditor with N1ED will power up your HTML editing experience. Paragraphs module helps you with all other kinds of Drupal content. Lifehack: N1ED has its one block builder for content fields, so if you do not plan to mix HTML content with other types of Drupal entities, you can stay with N1ED only and do not use Paragraphs module at all (and enable it when you really require it). ## N1ED installation together with Paragraphs The order of installation of N1ED and Paragraph modules does not matter. You can also [install N1ED](https://n1ed.com/docs/install/drupal) to existing websites that use Paragraphs and it will not break them. The best when you have some Paragraphs type (create it in `Administration` -> `Structure` -> `Paragraphs types`) with the only field of type "Text (formatted, long)". This type of field content will let CKEditor attach it. Limit the number of these fields inside each Paragraph type to 1 (no need to have more, you will add new blocks using N1ED Bootstrap Editor tools). Also please hide the label of this field in options not to show unwanted captions to website visitors. All other Paragraphs types you will add will be related to something different to HTML contents. For example, attached files or product cards and other Drupal entities managed not by CKEditor. ![Work N1ED with Paragraphs module](https://n1ed.com/img/screenshots/docs/integrations/drupal8/Drupal-Paragraphs-N1ED.png) *Work N1ED with Paragraphs module* --- # Install N1ED module for Drupal 8 > Install the N1ED module on a legacy Drupal 8 website: upload it in Extend or require it with Composer, enable it, use Full HTML and set your API key. Source: https://n1ed.com/docs/install/drupal-8 Section: Installation > Drupal > Drupal 8 (legacy) Updated: 2026-10-18 *Looking for [Drupal 9, Drupal 10 or Drupal 11 installation](https://n1ed.com/docs/install/drupal)?* Drupal 8 reached its end of life in 2021, and this page stays for the sites that still run it. The N1ED module is the same one the newer Drupal versions use; on Drupal 8 it runs on CKEditor 4, the editor Drupal 8 ships with, so you get the full N1ED: Bootstrap blocks and grid, widgets, the file manager and the image editor. In Drupal, every CKEditor plugin comes with a Drupal module that docks it into the CMS. The [CKEditor modules in Drupal](https://n1ed.com/blog/ckeditor-modules-in-drupal-8) article explains the mechanism. ## Step 1: Download module for Drupal 8 One Drupal module brings the whole N1ED ecosystem. [Download Drupal module](https://n1ed.com/download/n1ed-8.x-2.80.tar.gz) A site managed with Composer can run `composer require drupal/n1ed` instead and go straight to enabling the module. ## Step 2: Install & enable Drupal module In **Extend**, press **Install new module**, choose the downloaded file and install it. The button is there while the core **Update Manager** module is on. Then tick **N1ED** in the module list and press **Install**. - [![Installing the N1ED module from a file in the Extend section of Drupal 8](https://n1ed.com/img/screenshots/docs/integrations/drupal8/thumbs/drupal8-module-install.jpg)](https://n1ed.com/img/screenshots/docs/integrations/drupal8/drupal8-module-install.png) *Extend → Install new module: upload the downloaded file* ## Step 3: Configure text formats Open **Configuration → Content authoring → Text formats and editors**. N1ED attaches itself to the CKEditor formats; use **Full HTML**, the format that keeps the Bootstrap classes and attributes N1ED writes. Press **Configure** next to it to see the N1ED panel. - [![Drupal 8 text formats with N1ED attached to the Full HTML format](https://n1ed.com/img/screenshots/docs/integrations/drupal8/thumbs/drupal8-configure-n1ed.jpg)](https://n1ed.com/img/screenshots/docs/integrations/drupal8/drupal8-configure-n1ed.png) *Text formats: N1ED on Full HTML* ## Step 4: Set API key In the N1ED panel, press **Set API key** (**Change** in older versions of the module) and paste a key from your [Dashboard](https://n1ed.com/dashboard). No account yet? You can register one there for free. The key links your site to its configuration in the Dashboard: the toolbar, widgets, blocks and the file storage. - [![The N1ED panel in the Full HTML text format settings of Drupal 8, with the API key and the Change link](https://n1ed.com/img/screenshots/docs/integrations/drupal8/thumbs/drupal8-change-api-key.jpg)](https://n1ed.com/img/screenshots/docs/integrations/drupal8/drupal8-change-api-key.png) *Full HTML: the N1ED panel with the API key* ## ✓ Check your installation Open **Content**, pick an article and edit it in Full HTML: the body opens in N1ED. - [![An article edited with N1ED in Drupal 8: the N1ED toolbar over CKEditor 4](https://n1ed.com/img/screenshots/docs/integrations/drupal8/thumbs/drupal8-edit-article.jpg)](https://n1ed.com/img/screenshots/docs/integrations/drupal8/drupal8-edit-article.png) *An article in N1ED on Drupal 8* ## 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. [Dashboard](https://n1ed.com/dashboard) ## Examples A live demo of N1ED on CKEditor 4, the editor your Drupal site runs, with its code. - [CKEditor 4 plugin: N1ED added to your own CKEditor 4](https://n1ed.com/docs/examples/ckeditor) --- # Install N1ED extension for Joomla > Install N1ED on Joomla 5 or 4: a WYSIWYG editor built on TinyMCE with Bootstrap blocks, widgets and a file manager. Upload the package and set your API key. Source: https://n1ed.com/docs/install/joomla Section: Installation > Joomla Updated: 2026-10-21 *Looking for [Joomla 3 installation](https://n1ed.com/docs/install/joomla-3)?* The N1ED extension gives Joomla a WYSIWYG editor built on TinyMCE: Bootstrap blocks and grid, widgets, the file manager and the image editor, all configured for one API key. One package serves Joomla 5 and Joomla 4, not Joomla 6 yet; Joomla 3 has its own [legacy package](https://n1ed.com/docs/install/joomla-3). ## Step 1: Download Joomla 5 extension The same package installs on Joomla 5 and Joomla 4. [Download Joomla extension](https://n1ed.com/download/n1ed-joomla-4.zip) You can also skip the download: the next step can install N1ED straight from the Joomla Extensions Directory. ## Step 2: Install Joomla 5 or 4 extension Open **System → Install → Extensions** and drop the package onto the **Upload Package File** tab: the installation starts by itself. Or open the **Install from Web** tab, search for “n1ed” and press **Install**. - [![Uploading the N1ED extension package in the Joomla extension installer](https://n1ed.com/img/screenshots/docs/integrations/joomla4/thumbs/upload-extension.jpg)](https://n1ed.com/img/screenshots/docs/integrations/joomla4/upload-extension.png) *Upload Package File: the downloaded package* - [![Installing the N1ED extension from the Install from Web tab of the Joomla extension installer](https://n1ed.com/img/screenshots/docs/integrations/joomla4/thumbs/install-n1ed-extension.jpg)](https://n1ed.com/img/screenshots/docs/integrations/joomla4/install-n1ed-extension.png) *Install from Web: N1ED in the Extensions Directory* ## Step 3: Set API key Open **Components → N1ED Content Editor**, press **Set API key** in the N1ED panel and paste a key from your [Dashboard](https://n1ed.com/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 extension runs on a shared demo key. ## Step 4: Enable N1ED Make N1ED the default editor: open **System → Global Configuration**, choose **N1ED** in **Default Editor** on the **Site** tab and press **Save**. A user whose profile names an editor of their own keeps it. Set that user's **Editor** to **Use Default** in **Users → Manage**, on the **Basic Settings** tab. - [![Choosing N1ED as the Default Editor in the Joomla Global Configuration](https://n1ed.com/img/screenshots/docs/integrations/joomla4/thumbs/n1ed-default-editor.jpg)](https://n1ed.com/img/screenshots/docs/integrations/joomla4/n1ed-default-editor.png) *Global Configuration: N1ED as the default editor* ## ✓ Edit articles with N1ED Open **Content → Articles → New**: the article text opens in N1ED. - [![A new Joomla article edited with N1ED: the N1ED toolbar and a Bootstrap block](https://n1ed.com/img/screenshots/docs/integrations/joomla4/thumbs/create-content-with-n1ed.jpg)](https://n1ed.com/img/screenshots/docs/integrations/joomla4/create-content-with-n1ed.png) *A new article in N1ED* ## Configuration The extension keeps only the API key. The toolbar, widgets, Bootstrap blocks and the file storage are configured for that key in the Dashboard. [Dashboard](https://n1ed.com/dashboard) ## Examples Live demos of N1ED on TinyMCE, the editor the extension runs, each with its code. - [JS snippet: TinyMCE with N1ED from one script](https://n1ed.com/docs/examples/tinymce) - [TinyMCE plugin: N1ED added to your own TinyMCE](https://n1ed.com/docs/examples/tinymce-plugin) --- # Install N1ED extension for Joomla 3 > Install the legacy N1ED package on Joomla 3: upload it in the extension installer, set your API key and make N1ED the default Joomla editor. Source: https://n1ed.com/docs/install/joomla-3 Section: Installation > Joomla > Joomla 3 (legacy) Updated: 2026-10-18 *Looking for [Joomla 5 or 4 installation](https://n1ed.com/docs/install/joomla)?* Joomla 3 reached its end of life in 2023, and this legacy package keeps N1ED working on the sites that still run it. It installs N1ED as a Joomla editor: TinyMCE with Bootstrap blocks and grid, widgets, the file manager and the image editor, all configured for one API key in the Dashboard. ## Step 1: Download Joomla 3 extension One package brings the whole N1ED ecosystem to Joomla 3. [Download Joomla extension](https://n1ed.com/download/n1ed-joomla-3.zip) ## Step 2: Install Joomla 3 extension Open **Extensions → Manage → Install** and drop the package onto the **Upload Package File** tab: the installation starts by itself. - [![Uploading the N1ED package in the Joomla 3 extension installer](https://n1ed.com/img/screenshots/docs/integrations/joomla3/thumbs/joomla-extension-install.jpg)](https://n1ed.com/img/screenshots/docs/integrations/joomla3/joomla-extension-install.png) *Extensions → Manage → Install: the package* ## Step 3: Set API key Open **Components → N1ED Content Editor**, press **Set API key** (**Change** in older versions of the extension) and paste a key from your [Dashboard](https://n1ed.com/dashboard). No account yet? You can register one there for free. The key links your site to its configuration in the Dashboard: the toolbar, widgets, blocks and the file storage. - [![Setting the N1ED API key in the N1ED Content Editor options of Joomla 3](https://n1ed.com/img/screenshots/docs/integrations/joomla3/thumbs/joomla-set-api-key.jpg)](https://n1ed.com/img/screenshots/docs/integrations/joomla3/joomla-set-api-key.png) *N1ED Content Editor: set the API key* ## Step 4: Enable N1ED Make N1ED the default editor: open **System → Global Configuration**, choose **N1ED** in **Default Editor** on the **Site** tab and press **Save**. - [![Choosing N1ED as the Default Editor in the Joomla 3 Global Configuration](https://n1ed.com/img/screenshots/docs/integrations/joomla3/thumbs/joomla-set-default-editor.jpg)](https://n1ed.com/img/screenshots/docs/integrations/joomla3/joomla-set-default-editor.png) *Global Configuration: N1ED as the default editor* ## ✓ Edit articles with N1ED Open **Content → Articles → Add New Article**: the article text opens in N1ED. ## Configuration The extension keeps only the API key. The toolbar, widgets, Bootstrap blocks and the file storage are configured for that key in the Dashboard. [Dashboard](https://n1ed.com/dashboard) ## Examples Live demos of N1ED on TinyMCE, the editor the extension runs, each with its code. - [JS snippet: TinyMCE with N1ED from one script](https://n1ed.com/docs/examples/tinymce) - [TinyMCE plugin: N1ED added to your own TinyMCE](https://n1ed.com/docs/examples/tinymce-plugin) --- # Install N1ED extension for Magento > Install the N1ED extension for Magento 2 with Composer, choose N1ED as the WYSIWYG editor, switch Page Builder off and set your API key. Source: https://n1ed.com/docs/install/magento Section: Installation > Magento Updated: 2026-10-18 The N1ED extension for Magento 2 becomes the WYSIWYG editor of your CMS pages, blocks and product descriptions: TinyMCE with Bootstrap blocks and grid, widgets, the file manager and the image editor, all configured for one API key. ## Step 1: Install N1ED Magento extension Run these in the root directory of your Magento installation, over SSH or in a terminal on the server: ```bash composer require edsdk/n1ed-magento bin/magento module:enable EdSDK_Wysiwyg bin/magento setup:upgrade bin/magento cache:flush ``` A store in production mode also needs `bin/magento setup:di:compile` and `bin/magento setup:static-content:deploy` after `setup:upgrade`. ## Step 2: Enable N1ED Magento extension Open **Stores → Configuration → General → Content Management**: - in **WYSIWYG Options**, untick **Use system value** next to **WYSIWYG Editor** and choose **N1ED**; - in **Advanced Content Tools**, set **Enable Page Builder** to **No**. While Page Builder is on, pages, blocks and products are edited with it and never reach the WYSIWYG editor. Press **Save Config**. - [![Magento Content Management configuration with N1ED as the WYSIWYG editor and Page Builder switched off](https://n1ed.com/img/screenshots/docs/integrations/magento/thumbs/wysiwyg-editor-n1ed-page-builder-off.jpg)](https://n1ed.com/img/screenshots/docs/integrations/magento/wysiwyg-editor-n1ed-page-builder-off.png) *Content Management: N1ED as the WYSIWYG editor, Page Builder off* ## Step 3: Set API key Open **Content → EdSDK → N1ED**, press **Set API key** and paste a key from your [Dashboard](https://n1ed.com/dashboard). No account yet? The Register new account link next to it creates one for free. The key links your store to its configuration in the Dashboard: the toolbar, widgets, blocks and the file storage. Until you set it, the extension runs on a shared demo key. - [![The Set API key dialog on the N1ED settings page of the Magento admin panel](https://n1ed.com/img/screenshots/docs/integrations/magento/thumbs/set-n1ed-api-key.jpg)](https://n1ed.com/img/screenshots/docs/integrations/magento/set-n1ed-api-key.png) *Content → EdSDK → N1ED: Set API key* ## ✓ Try to edit some article Open **Content → Pages**, add a page or edit one, and expand its **Content** section: the editor is N1ED. Blocks and product descriptions use it too. - [![A Magento CMS page edited with N1ED: the N1ED toolbar and a Bootstrap block with its grid outlined](https://n1ed.com/img/screenshots/docs/integrations/magento/thumbs/n1ed-bootstrap-page-editor.jpg)](https://n1ed.com/img/screenshots/docs/integrations/magento/n1ed-bootstrap-page-editor.png) *A CMS page in N1ED: Bootstrap blocks and the grid* ## Configuration The extension keeps only the API key. The toolbar, widgets, Bootstrap blocks and the file storage are configured for that key in the Dashboard. [Dashboard](https://n1ed.com/dashboard) ## Examples Live demos of N1ED on TinyMCE, the editor the extension runs, each with its code. - [JS snippet: TinyMCE with N1ED from one script](https://n1ed.com/docs/examples/tinymce) - [TinyMCE plugin: N1ED added to your own TinyMCE](https://n1ed.com/docs/examples/tinymce-plugin) --- # Install N1ED React component > Add the @edsdk/n1ed-react package, render the N1ED component with your apiKey and onEditorChange, then connect a file manager backend. Source: https://n1ed.com/docs/install/react Section: Installation > React Updated: 2026-11-12 ## Get the NPM package Install N1ED React package being in the directory of your project by NPM tool: ```bash npm install --save @edsdk/n1ed-react ``` or for Yarn users ```bash yarn add @edsdk/n1ed-react ``` ## Use N1ED component Let's use N1ED in your project. Open your source file and in the top of it add new import: ```ts import {N1ED} from "@edsdk/n1ed-react"; ``` Then inside `render()` method add N1ED component definition: ```ts import React from 'react'; import {N1ED} from '@edsdk/n1ed-react'; import {Editor} from 'tinymce'; // ... and somewhere in render() function: { // receive changes }} />; ``` `apiKey` can be found in the [Dashboard](https://n1ed.com/dashboard). You can also see [demo TypeScript project](https://github.com/edsdk/n1ed-react-typescript-example) on GitHub as example of use. ## Install the backend Now you need to [install the file manager server-side script](https://n1ed.com/docs/file-manager) somewhere on your server to enable file manager functionalities in your editor. Follow the instructions behind the link on how to do it. ## Check your installation Now you can edit your articles with the power of N1ED. Go to your content and check N1ED in the action. ## Configuration The component takes only your API key. The toolbar, widgets, Bootstrap blocks and the file storage are configured for that key in the Dashboard. [Dashboard](https://n1ed.com/dashboard) ## Examples A live demo of the component in a React app, with its code. - [React: the N1ED component in a React app](https://n1ed.com/docs/examples/react) --- # Install N1ED JavaScript snippet > Add the cloud.n1ed.com script tag with your API key to a page, start TinyMCE from onEditorLoaded, then install the file manager backend. Source: https://n1ed.com/docs/install/javascript Section: Installation > JS snippet Updated: 2026-11-12 ## Include the script Include CDN version of N1ED editor into your HTML template. The editor, N1ED and other add-ons will be always updated to last version and cached. Please only replace demo API key in the URL with your own one before using. To configure it and enable other plugins please use personal [Dashboard](https://n1ed.com/dashboard) linked to your API key. There you can manage your API keys and link the editor instance with the configuration you will specify in Dashboard. ```html
``` `n1ed.js` loads [Editor42](https://editor42.com), our free editor based on TinyMCE, so `tinymce.init()` works unchanged. For CKEditor 4, install the [N1ED plugin](https://n1ed.com/docs/install/ckeditor) into your CKEditor instead. ## Install the backend Now you need to [install the file manager server-side script](https://n1ed.com/docs/file-manager) somewhere on your server to enable file manager functionalities in your editor. Follow the instructions behind the link on how to do it. ## Configuration The snippet carries only your API key. The toolbar, widgets, Bootstrap blocks and the file storage are configured for that key in the Dashboard. [Dashboard](https://n1ed.com/dashboard) ## Examples A live demo that loads N1ED with this snippet, with its code. - [JS snippet: TinyMCE with N1ED from one script](https://n1ed.com/docs/examples/tinymce) --- # N1ED examples > Live N1ED demos with their code: the JS snippet on Editor42, the TinyMCE, CKEditor 5 and CKEditor 4 plugins, React, and the Flmngr file manager's demos. Source: https://n1ed.com/docs/examples Section: Examples Updated: 2026-11-12 Every demo runs the real editor with N1ED inside, on a demo API key. Open one, try the blocks, widgets, file manager and image editor, then take the code: each example shows its HTML, JavaScript and CSS and opens in CodePlay, our playground, where you can edit and fork it. - [JS snippet: TinyMCE with N1ED from one script](https://n1ed.com/docs/examples/tinymce) - [TinyMCE plugin: N1ED added to your own TinyMCE](https://n1ed.com/docs/examples/tinymce-plugin) - [CKEditor 5 plugin (beta): the blocks and the file manager in CKEditor 5](https://n1ed.com/docs/examples/ckeditor-5) - [CKEditor 4 plugin: N1ED added to your own CKEditor 4](https://n1ed.com/docs/examples/ckeditor) - [React: the N1ED component in a React app](https://n1ed.com/docs/examples/react) - [Flmngr demos: the file manager's own demos, on flmngr.com](https://n1ed.com/docs/examples/file-manager) To run the same thing on your own site, [install N1ED](https://n1ed.com/docs/install) and use your API key from the [Dashboard](https://n1ed.com/dashboard) in place of the demo one. --- # TinyMCE demo with block editor, file manager and image editor > N1ED - an add-on that turns your CKEditor or TinyMCE to a contemporary Bootstrap-enabled editor with a block editor, widgets, a file manager and an image editor. Try it live in TinyMCE. Source: https://n1ed.com/docs/examples/tinymce Section: Examples > JS snippet Updated: 2026-10-18 ## When to use Your authors need more than a text box: Bootstrap blocks and a responsive grid, image and YouTube widgets, a file manager linked to your storage, an image editor and AI writing tools. You want all of it on your page without hosting or building an editor: this is the [JS snippet](https://n1ed.com/docs/install/javascript), and this page runs it live on a demo API key. ## How it works One script from the cloud loads the editor together with N1ED, preconfigured by the API key: the toolbar, the widgets, the file storage and the Bootstrap settings all come from the [Dashboard](https://n1ed.com/dashboard), so the page itself is a textarea and one `tinymce.init()` call. The editor this demo runs is [Editor42](https://editor42.com), a free MIT-licensed fork of TinyMCE that answers to `window.tinymce` exactly as TinyMCE does — the code below is unchanged either way. Edit the content, insert a block, open the file manager, then take the code and use your own key. ## How to start using Add the [JS snippet](https://n1ed.com/docs/install/javascript) to your page with your own API key, then call `tinymce.init()` as this demo does. To add N1ED to a TinyMCE you already host, see the [TinyMCE plugin](https://n1ed.com/docs/examples/tinymce-plugin) demo. - [Download ZIP](https://codeplay.democdn.com/pens/n1ed/xnuylNB/n1ed-example-tinymce.zip) - [Open in CodePlay](https://codeplay.democdn.com/n1ed/xnuylNB) *The page shows these as tabs, one at a time: Live Demo, JavaScript, HTML, SASS.* ## Live Demo [Live demo: TinyMCE demo with block editor, file manager and image editor](https://run.codeplay.democdn.com/pens/n1ed/xnuylNB/dist/index.html) ## JavaScript ```js // The cloud script loads the editor and N1ED together; this callback fires once both are ready. // The editor is Editor42, the free MIT-licensed fork of TinyMCE, and it answers to window.tinymce // like TinyMCE does - so this is plain tinymce.init() and would work unchanged on either one. function initEditor() { tinymce.init({ selector: "#demo", height: 700 }); } window.tinymce ? initEditor() : (window.onEditorLoaded = initEditor); ``` ## HTML ```html
``` ## SASS ```scss .wrap { max-width: 1000px; margin: 0 auto; } ``` --- # N1ED plugin in a self-hosted TinyMCE > Live demo of N1ED installed as a plugin into a self-hosted TinyMCE 7: one folder in plugins/, one word in the config, the rest comes with the API key. Source: https://n1ed.com/docs/examples/tinymce-plugin Section: Examples > TinyMCE plugin Updated: 2026-11-13 ## When to use You already host TinyMCE yourself — your version, your plugins, your toolbar — and want N1ED added to it rather than a new editor. This is the Plugin way of the [TinyMCE installation](https://n1ed.com/docs/install/tinymce#plugin). ## How it works The page loads a plain TinyMCE 7 with the N1ED plugin unpacked into `tinymce/plugins/n1ed/`. Adding `n1ed` to `plugins` and your API key to the config is the whole setup: the plugin applies the toolbar, widgets and file storage set for the key in the [Dashboard](https://n1ed.com/dashboard). ## How to start using Install the [N1ED plugin for TinyMCE](https://n1ed.com/docs/install/tinymce) for that. See the link above to explore more options: a ready-to-use bundle with N1ED included and preconfigured, and the CDN script that loads everything in one line. - [Download ZIP](https://codeplay.democdn.com/pens/n1ed/nFdAJwV/n1ed-example-tinymce-plugin.zip) - [Open in CodePlay](https://codeplay.democdn.com/n1ed/nFdAJwV) *The page shows these as tabs, one at a time: Live Demo, JavaScript, HTML, SASS.* ## Live Demo [Live demo: N1ED plugin in a self-hosted TinyMCE](https://run.codeplay.democdn.com/pens/n1ed/nFdAJwV/dist/index.html) ## JavaScript ```js // Your own TinyMCE (here 7.6, self-hosted) with N1ED unpacked into its plugins folder: // tinymce/plugins/n1ed/plugin.js // "n1ed" in plugins is all it takes; the API key brings the configuration you set in the Dashboard. tinymce.init({ selector: "#demo", license_key: "gpl", height: 700, plugins: "n1ed", apiKey: "N1ED24RR1234123412341234" }); ``` ## HTML ```html
``` ## SASS ```scss .wrap { max-width: 1000px; margin: 0 auto; } ``` --- # CKEditor 5 demo with blocks and a file manager (beta) > Live demo of N1ED in CKEditor 5 (beta): your N1ED API key gives CKEditor 5 Bootstrap blocks with a responsive grid and the Flmngr file manager. Source: https://n1ed.com/docs/examples/ckeditor-5 Section: Examples > CKEditor 5 plugin (beta) Updated: 2026-11-11 ## When to use Your site runs CKEditor 5 and you have an N1ED API key. On CKEditor 5 the key gives you the blocks: Bootstrap layouts with a responsive grid, edited right in the content and saved as templates for reuse, with the Flmngr file manager for their images. The other N1ED features come to CKEditor 5 later, so this is a beta. ## How it works The page loads CKEditor 5 from the cloud with the N1ED plugin built in, as `CKEditor5WithN1ED`. It passes your N1ED key as `apiKey`, and the key decides what runs, the blocks and the file manager, as set up in the [Dashboard](https://n1ed.com/dashboard). Click a block to edit its grid in the panel under the content, add a block with a **+** on the left, or pick an image with the file manager buttons on the toolbar. A selected image has them in its own toolbar too, to replace or edit it. ## How to start using Install the [N1ED plugin for CKEditor 5](https://n1ed.com/docs/install/ckeditor-5) for that: the one npm package into your own build, a ready-to-use CKEditor 5 bundle with it included, or the CDN script this demo uses. - [Download ZIP](https://codeplay.democdn.com/pens/n1ed/BSsDvYo/n1ed-example-ckeditor-5.zip) - [Open in CodePlay](https://codeplay.democdn.com/n1ed/BSsDvYo) *The page shows these as tabs, one at a time: Live Demo, JavaScript, HTML, SASS.* ## Live Demo [Live demo: CKEditor 5 demo with blocks and a file manager (beta)](https://run.codeplay.democdn.com/pens/n1ed/BSsDvYo/dist/index.html) ## JavaScript ```js // On CKEditor 5, an N1ED key gives you the blocks with a responsive grid and the Flmngr file manager. // The other N1ED features come to CKEditor 5 later. CKEditor5WithN1ED.create(document.querySelector("#editor"), { apiKey: "N1ED24RR1234123412341234" }).catch(error => { console.error("There was a problem initializing the editor.", error); }); ``` ## HTML ```html
``` ## SASS ```scss .wrap { max-width: 1650px; margin: 0 auto; padding-left: 40px; } ``` --- # CKEditor 4 demo with block editor, file manager and image editor > N1ED - an add-on that turns your CKEditor or TinyMCE to a contemporary Bootstrap-enabled editor with a block editor, widgets, a file manager and an image editor. Try it live in CKEditor 4. Source: https://n1ed.com/docs/examples/ckeditor Section: Examples > CKEditor 4 plugin Updated: 2026-10-18 ## When to use You have CKEditor 4 and your authors need more than a text box: Bootstrap blocks and a responsive grid, image and YouTube widgets, a file manager linked to your storage, an image editor and AI writing tools. N1ED adds all of that to the CKEditor 4 you host as one plugin with its own skin (see the CKEditor 4 [installation](https://n1ed.com/docs/install/ckeditor)), and this page runs it live on a demo API key. ## How it works The page loads a stock CKEditor 4.20 with N1ED unpacked into it: the `N1ED-editor` plugin and the `n1theme` skin. The config enables both, keeps `allowedContent: true` so that CKEditor's content filter does not strip the Bootstrap classes of the blocks, and passes your API key; the toolbar, widgets and file storage come from the [Dashboard](https://n1ed.com/dashboard). Edit the content, insert a block, open the file manager, then take the code and use your own key. ## How to start using Install the [N1ED plugin for CKEditor 4](https://n1ed.com/docs/install/ckeditor) for that. - [Download ZIP](https://codeplay.democdn.com/pens/n1ed/bsHctIg/n1ed-example-ckeditor-plugin.zip) - [Open in CodePlay](https://codeplay.democdn.com/n1ed/bsHctIg) *The page shows these as tabs, one at a time: Live Demo, JavaScript, HTML, SASS.* ## Live Demo [Live demo: CKEditor 4 demo with block editor, file manager and image editor](https://run.codeplay.democdn.com/pens/n1ed/bsHctIg/dist/index.html) ## JavaScript ```js // Your own CKEditor 4 (here 4.20, self-hosted) with N1ED unpacked into it: // ckeditor/plugins/N1ED-editor/plugin.js // ckeditor/skins/n1theme/ // The API key brings the configuration you set in the Dashboard. CKEDITOR.replace("demo", { extraPlugins: "N1ED-editor", skin: "n1theme", allowedContent: true, removePlugins: "iframe,magicline", versionCheck: false, height: 500, apiKey: "N1ED24RR1234123412341234" }); ``` ## HTML ```html
``` ## SASS ```scss .wrap { max-width: 1000px; margin: 0 auto; } ``` --- # React editor demo: the N1ED component > Live demo of the N1ED React component: TinyMCE with Bootstrap blocks, widgets and a file manager in a React app, showing the HTML it returns as you type. Source: https://n1ed.com/docs/examples/react Section: Examples > React Updated: 2026-10-18 ## When to use You build your admin panel or CMS in React and want the editor as a component: set up by props, reporting its HTML to your state, and still carrying the whole N1ED toolset — blocks, widgets, the file manager and the image editor. ## How it works `` from `@edsdk/n1ed-react` is the TinyMCE React component with N1ED plugged in. The `apiKey` prop loads the editor with the configuration from the [Dashboard](https://n1ed.com/dashboard), the `init` prop takes the usual TinyMCE options, and `onEditorChange` hands you the HTML on every change — the panel under the editor shows exactly that. The demo imports its packages from a CDN; in your app they come from npm. ## How to start using Install the [N1ED React component](https://n1ed.com/docs/install/react) from npm for that. It is the TinyMCE React component with N1ED already plugged in, so the props you know from TinyMCE work unchanged. - [Download ZIP](https://codeplay.democdn.com/pens/n1ed/zfsOqZI/n1ed-example-react.zip) - [Open in CodePlay](https://codeplay.democdn.com/n1ed/zfsOqZI) *The page shows these as tabs, one at a time: Live Demo, JavaScript, HTML, SASS.* ## Live Demo [Live demo: React editor demo: the N1ED component](https://run.codeplay.democdn.com/pens/n1ed/zfsOqZI/dist/index.html) ## JavaScript ```js import React, {useState} from 'react'; import {createRoot} from 'react-dom/client'; import {N1ED} from '@edsdk/n1ed-react'; const INITIAL = `

N1ED in a React app

This is the <N1ED> component. Everything inside init is a plain TinyMCE option, and the API key brings the toolbar, the widgets and the file storage you set in the Dashboard.

People working together
`; function App() { const [html, setHtml] = useState(INITIAL); return (
setHtml(content)} init={{ height: 560 }} />

The HTML your app receives

{html.trim()}
); } createRoot(document.getElementById('app')).render(); ``` ## HTML ```html

N1ED in React

The <N1ED> component from @edsdk/n1ed-react: TinyMCE with N1ED plugged in. Edit the content and the HTML below follows.

``` ## SASS ```scss .hint { color: var(--demo-muted-color); } #app { max-width: 1000px; } .state { max-height: 240px; overflow: auto; white-space: pre-wrap; font-size: 12px; } ``` --- # Flmngr file manager demos > The file manager in N1ED is Flmngr, and its demos are on flmngr.com: N1ED with a file manager button on the page, and Flmngr in TinyMCE, CKEditor and React. Source: https://n1ed.com/docs/examples/file-manager Section: Examples > Flmngr demos Updated: 2026-10-18 The file manager in N1ED is [Flmngr](https://flmngr.com), which is also a product of its own: it works in other editors, or with no editor at all. Its demos are on its own site, [flmngr.com/samples](https://flmngr.com/samples), each with its code. The one to open first if you use N1ED runs N1ED in TinyMCE next to a button of the page itself. The button opens the same file manager, on the same storage, and shows the images you pick under it: your page can use the file manager too, not only the editor. - [N1ED with a file manager button](https://flmngr.com/samples/n1ed-file-manager-field): N1ED in TinyMCE, and a button of the page that opens the file manager and shows the picked images. - [All Flmngr demos](https://flmngr.com/samples): The file manager in TinyMCE, CKEditor 5, CKEditor 4, Froala, React and plain JavaScript: pick one image or many, upload, edit an image, manage a gallery. --- # Install Flmngr file manager server side on PHP > Pick a Flmngr backend for your stack: a Composer package, Laravel, Symfony, a no-Composer PHP zip, Node packages or a microservice. Source: https://n1ed.com/docs/file-manager Section: File manager Updated: 2026-11-12 In order to let your Flmngr file manager dialog to list files, upload and modify them on the server, you need to install Flmngr backend to add such support to your server. Users who use CMS integrations like Drupal, Joomla, Prestashop already have backend installed and configured. Users of custom integrations (when you install JS snippet or CKEditor or TinyMCE plugin) need to integrate the file manager backend to their CMS or framework manually. ## PHP server - [Composer package: PHP package for any custom frameworks.](https://n1ed.com/docs/file-manager/php-composer) - [Laravel framework: Tutorial for installing the file manager on a Laravel app or website.](https://n1ed.com/docs/file-manager/laravel) - [Symfony framework: Implementing a PHP file manager in the Symfony framework.](https://n1ed.com/docs/file-manager/symfony) - [PHP script (no Composer): PHP scripts set in a zip archive for use in a legacy project without Composer support.](https://n1ed.com/docs/file-manager/php-script) ## Node server - [Node package: The Flmngr library for any Node app: route requests from your own framework to its API.](https://n1ed.com/docs/file-manager/node-custom) - [Express framework: Flmngr Node module for your website or app on the Express framework.](https://n1ed.com/docs/file-manager/node-express) - [Nest framework: Flmngr Node module for your website or app on the Nest framework.](https://n1ed.com/docs/file-manager/node-nest) ## Microservice [Standalone microservice: A ready-to-use server app for running in any environment.](https://n1ed.com/docs/file-manager/microservice) ## File manager configuration There are various methods for setting up Flmngr, depending on the specific goal you want to achieve. Primarily, you have access to visual configuration options for Flmngr. This approach is both the default and the recommended way to set up your HTML editor. In the majority of situations, this method is sufficient to customize all the preferences according to your requirements. Additionally, there are instances where you might need to configure Flmngr programmatically. For this purpose, you can utilize the configuration formats of CKEditor or TinyMCE, incorporating specialized Flmngr keys into them. This approach complements the visual configuration preferences and should be employed when you need to override the default configuration. --- # Install PHP file manager using Composer > Run composer require edsdk/flmngr-server-php, point a PHP handler at FlmngrServer, and set the two URLs in the Dashboard to link it. Source: https://n1ed.com/docs/file-manager/php-composer Original: https://flmngr.com/doc/install-file-manager-server-php-composer Section: File manager > PHP Composer package ## Install the package Go into your PHP project and in its root directory, run: ```bash composer require edsdk/flmngr-server-php ``` This will install [PHP Flmngr Composer package](https://packagist.org/packages/edsdk/flmngr-server-php). > **Hint:** If you do not use Composer you can use a [no-Composer archive](https://n1ed.com/docs/file-manager/php-script) And let some URL be a handler. If you do not use any framework, just create a PHP file `flmngr.php` with the following contents: ```php '/var/www/files', ) ); ``` In frameworks like [Laravel](https://n1ed.com/docs/file-manager/laravel), [Symfony](https://n1ed.com/docs/file-manager/symfony), Yii, CodeIgniter, etc., you can create a new method in some controller calling the same method. A URL mapped to this method will be the entry point of all Flmngr requests. ## Update Later, this package will be automatically updated among all your packages each time you call `composer update`. If you wish to update only the backend of Flmngr, call: ```bash composer update edsdk/flmngr-server-php ``` ## Link Flmngr with the server Using the visual Dashboard, you can specify the URLs of your server to link Flmngr with it. - **File Manager URL** is the full URL of `flmngr.php`. - **Files URL** is the full URL of `dirFiles` (not a directory path!). [Go to Dashboard](https://n1ed.com/dashboard) ![File manager control panel](https://n1ed.com/img/screenshots/docs/widgets/config-editor/file-manager-set-url.png) > **Note:** Alternatively, you can pass these parameters as [Flmngr.urlFileManager](https://flmngr.com/doc/api-load#method_load__param_urlFileManager) and [Flmngr.urlFiles](https://flmngr.com/doc/api-load#method_load__param_urlFiles) parameters into the Flmngr config. This is useful when you need to use different directories based on the current user to support [multi-user installations](https://n1ed.com/docs/multisite/separating-file-storages). ### Files URL explanation The **Files URL** option is the prefix Flmngr will add to any file when inserting it into your content (or returning it into a callback of your API call). If you can use Flmngr fine, but all inserted images are broken, please see this sample to understand how it works: **Files URL** or `Flmngr.urlFiles` client-side parameter `http://your-website.com/files/` `/var/www/my-project/files/` `dirFiles` server-side parameter \+ `/path/to/image.png` For example, Flmngr inserts the file `/path/to/image.png` into your content as `http://your-website.com/files/path/to/image.png`, and on the server that file is `/var/www/my-project/files/path/to/image.png`. ## Multi-user environment Flmngr can work in applications where you have many users with different storages. You can programmatically specify `Flmngr.urlFiles` and `dirFiles` parameters synchronously with values based on the current user's session. [Multi-user manual](https://n1ed.com/docs/multisite/separating-file-storages) ## S3/Blob support Flmngr supports not only your own server but also cloud storages: Amazon S3 and Azure Blob. This is an enterprise feature we offer as a separate option. [S3/Blob support](https://n1ed.com/docs/cloud-storage) --- # Install Flmngr as a module for your Laravel website or app > Add edsdk/flmngr-server-php with Composer and declare a POST route in routes/web.php that calls FlmngrServer with your dirFiles path. Source: https://n1ed.com/docs/file-manager/laravel Original: https://flmngr.com/doc/install-file-manager-server-php-laravel Section: File manager > PHP Laravel package ## Install Composer package Installing the file manager backend into the Laravel framework is easy: in the project directory install the PHP package: [`edsdk/flmngr-server-php`](https://packagist.org/packages/edsdk/flmngr-server-php) with the following command: ```bash composer require edsdk/flmngr-server-php ``` ## Set up routes to map a URL Configure the routing of your Laravel app to serve a specific URL for communication between the client (file manager dialog) and the server (Laravel app). You don't even need to have any code in the Laravel controller. It's more easy: in the file `routes/web.php` define a new route that calls a function from the Flmngr package: ```js Route::post('/flmngr', function () { \EdSDK\FlmngrServer\FlmngrServer::flmngrRequest( array( 'dirFiles' => base_path() . '/public/files' ) ); }); ``` The code above demonstrates how to manage the public directory `public/files/` with the file manager using the `/flmngr` endpoint (route). Of course, you can manage the entire `public/` directory if you wish. ## GitHub sample There is a sample on GitHub showing how to implement the Flmngr backend in an existing app: [Flmngr backend in Laravel app sample](https://github.com/flmngr/flmngr-server-php-laravel-example) > **Hint:** You can fork the sample if you are starting a new Laravel project where you need the Flmngr file manager to be included. ## Link Flmngr with the server Using the visual Dashboard, you can specify the URLs of your server to link Flmngr with it. - **File Manager URL** is the value you've passed into the `Route::post` as the `urlFileManager` option. - **Files URL** is the URL of your files you manage with Flmngr. `public/` suffix must be omitted. ![File manager control panel](https://n1ed.com/img/screenshots/docs/widgets/config-editor/file-manager-set-url.png) **Use absolute URLs**. While URLs in the Laravel server should be without a domain, but from the root of your website (like `/path`), these URLs on the client (in Dashboard or config) should be set in the full absolute form (like `http://your-domain.com/path`) to avoid any possible mistakes. > **Note:** If you use a HTTP proxy server like Nginx, please use URLs it maps to the internal Laravel app. [Go to Dashboard](https://n1ed.com/dashboard) > **Note:** Alternatively, you can pass these parameters as the [Flmngr.urlFileManager](https://flmngr.com/doc/api-load#method_load__param_urlFileManager) and [Flmngr.urlFiles](https://flmngr.com/doc/api-load#method_load__param_urlFiles) parameters into the Flmngr config. This is useful when you need to use different directories based on the current user to support [multi-user installations](https://n1ed.com/docs/multisite/separating-file-storages). ### Files URL explanation The **Files URL** option is the prefix that Flmngr will add to any file when inserting it into your content (or returning it in the callback of your API call). If you can use Flmngr fine, but all inserted images are broken, please see this sample to understand how it works: **Files URL** or `Flmngr.urlFiles` client-side parameter `http://your-website.com/files/` `/var/www/laravel-app/public/files/` `dirFiles` server-side parameter \+ `/path/to/image.png` For example, Flmngr inserts the file `/path/to/image.png` into your content as `http://your-website.com/files/path/to/image.png`, and on the server that file is `/var/www/laravel-app/public/files/path/to/image.png`. ## Multi-user environment Flmngr can work in applications where you have many users with different storages. You can programmatically specify `Flmngr.urlFiles` and `dirFiles` parameters synchronously with values based on the current user's session. [Multi-user manual](https://n1ed.com/docs/multisite/separating-file-storages) ## S3/Blob support Flmngr supports not only your own server but also cloud storages: Amazon S3 and Azure Blob. This is an enterprise feature we offer as a separate option. [S3/Blob support](https://n1ed.com/docs/cloud-storage) --- # Install Flmngr as a module to your Symfony website or app > Install the Composer package and add a FlmngrController with a /flmngr route that hands requests to FlmngrServer in your Symfony app. Source: https://n1ed.com/docs/file-manager/symfony Original: https://flmngr.com/doc/install-file-manager-server-php-symfony Section: File manager > PHP Symfony package ## Install Composer package Installing the file manager backend into Symfony framework is easy: in the project directory install PHP package: [`edsdk/flmngr-server-php`](https://packagist.org/packages/edsdk/flmngr-server-php) with the command: ```bash composer require edsdk/flmngr-server-php ``` ## Set routes to map a URL To provide communication between the client (file manager dialog) and the server (Symfony app) you need to serve some URL in your Symfony app. This URL will provide access to all the file operations. Inside `src/Controller/` create a file `FlmngrController` with contents: ```php $this->getParameter('kernel.project_dir') . '/public/files' ) ); // As far Flmngr returns a response itself, // you must use "die" here to prevent a error. die; } } ``` The code above demonstrates how to manage a public directory `public/files/` with the file manager using `/flmngr` endpoint (route). Of course you can manage whole the `public/` directory if you wish. ## GitHub sample There is a sample on GitHub showing how to implement the Flmngr backend in an existing app: [Flmngr backend in Symfony app sample](https://github.com/flmngr/flmngr-server-php-symfony-example) > **Hint:** You can fork the sample if you are starting a new Symfony project where you need the Flmngr file manager to be included. ## Link Flmngr with the server Using the visual Dashboard, you can specify the URLs of your server to link Flmngr with it. - **File Manager URL** is the value you've set in the `#[Route()]` annotation in your controller - **Files URL** is the URL of your files you manage with Flmngr. `public/` suffix must be omitted. ![File manager control panel](https://n1ed.com/img/screenshots/docs/widgets/config-editor/file-manager-set-url.png) **Use absolute URLs**. While URLs in the Symfony server should be without a domain, but from the root of your website (like `/path`), these URLs on the client (in Dashboard or config) should be set in the full absolute form (like `http://your-domain.com/path`) to avoid any possible mistakes. > **Note:** If you use a HTTP proxy server like Nginx, please use URLs it maps to the internal Symfony app. [Go to Dashboard](https://n1ed.com/dashboard) > **Note:** Alternatively, you can pass these parameters as the [Flmngr.urlFileManager](https://flmngr.com/doc/api-load#method_load__param_urlFileManager) and [Flmngr.urlFiles](https://flmngr.com/doc/api-load#method_load__param_urlFiles) parameters into the Flmngr config. This is useful when you need to use different directories based on the current user to support [multi-user installations](https://n1ed.com/docs/multisite/separating-file-storages). ### Files URL explanation The **Files URL** option is the prefix that Flmngr will add to any file when inserting it into your content (or returning it in the callback of your API call). If you can use Flmngr fine, but all inserted images are broken, please see this sample to understand how it works: **Files URL** or `Flmngr.urlFiles` client-side parameter `http://your-website.com/files/` `/var/www/symfony-app/public/files/` `dirFiles` server-side parameter \+ `/path/to/image.png` For example, Flmngr inserts the file `/path/to/image.png` into your content as `http://your-website.com/files/path/to/image.png`, and on the server that file is `/var/www/symfony-app/public/files/path/to/image.png`. ## Multi-user environment Flmngr can work in applications where you have many users with different storages. You can programmatically specify `Flmngr.urlFiles` and `dirFiles` parameters synchronously with values based on the current user's session. [Multi-user manual](https://n1ed.com/docs/multisite/separating-file-storages) ## S3/Blob support Flmngr supports not only your own server but also cloud storages: Amazon S3 and Azure Blob. This is an enterprise feature we offer as a separate option. [S3/Blob support](https://n1ed.com/docs/cloud-storage) --- # Install PHP file manager by including PHP files > Download the no-Composer ZIP, unpack it and set dirFiles in flmngr.php to run the backend on projects that do not use Composer. Source: https://n1ed.com/docs/file-manager/php-script Original: https://flmngr.com/doc/install-file-manager-server-php-script Section: File manager > PHP script (no Composer) ## Download Despite the fact that the best solution for modern projects is to install the [Flmngr Composer package](https://n1ed.com/docs/file-manager/php-composer), there is a set of cases when a project does not use Composer. Especially for those cases, we've prepared a no-Composer version and published it as a ZIP file: [Download PHP backend](https://flmngr.com/download/flmngr-php.zip) Unpack it into your project and edit `flmngr.php` file. By default it configured to work with sample files shipped in the archive. Change the value of `dirFiles` parameter to some path where you store your files, for example `/var/www/my-website/files`: ```php '/var/www/my-website/files' ) ); ``` Be sure that this path with files is publicly available through web. ## Update When you need to update the package, just re-download it and overwrite all the files. If you made some changes to the config inside `flmngr.php`, please copy an existing config to the updated file. ## Link Flmngr with the server Using the visual Dashboard, you can specify the URLs of your server to link Flmngr with it. - **File Manager URL** is the full URL of `flmngr.php`. - **Files URL** is the full URL of `dirFiles` (not a directory path, but an URL). [Go to Dashboard](https://n1ed.com/dashboard) ![File manager control panel](https://n1ed.com/img/screenshots/docs/widgets/config-editor/file-manager-set-url.png) > **Note:** Alternatively, you can pass these parameters as [Flmngr.urlFileManager](https://flmngr.com/doc/api-load#method_load__param_urlFileManager) and [Flmngr.urlFiles](https://flmngr.com/doc/api-load#method_load__param_urlFiles) parameters into the Flmngr config. This is useful when you need to use different directories based on the current user to support [multi-user installations](https://n1ed.com/docs/multisite/separating-file-storages). ### Files URL explanation The **Files URL** option is the prefix Flmngr will add to any file when inserting it into your content (or returning it into a callback of your API call). If you can use Flmngr fine, but all inserted images are broken, please see this sample to understand how it works: **Files URL** or `Flmngr.urlFiles` client-side parameter `http://your-website.com/files/` `/var/www/my-website/files/` `dirFiles` server-side parameter \+ `/path/to/image.png` For example, Flmngr inserts the file `/path/to/image.png` into your content as `http://your-website.com/files/path/to/image.png`, and on the server that file is `/var/www/my-website/files/path/to/image.png`. ## Multi-user environment Flmngr can work in applications where you have many users with different storages. You can programmatically specify `Flmngr.urlFiles` and `dirFiles` parameters synchronously with values based on the current user's session. [Multi-user manual](https://n1ed.com/docs/multisite/separating-file-storages) ## S3/Blob support Flmngr supports not only your own server but also cloud storages: Amazon S3 and Azure Blob. This is an enterprise feature we offer as a separate option. [S3/Blob support](https://n1ed.com/docs/cloud-storage) --- # Install Flmngr into a custom app > Use the @edsdk/flmngr-server-node package as a library and wire FlmngrServer.flmngrRequest into the routing of any Node framework. Source: https://n1ed.com/docs/file-manager/node-custom Original: https://flmngr.com/doc/install-file-manager-server-node-custom Section: File manager > Node package Flmngr Node backend support popular frameworks like [Express](https://n1ed.com/docs/file-manager/node-express) or [Nest](https://n1ed.com/docs/file-manager/node-nest) and has prepared packages for easy integration with them. However, sometimes your NodeJS app is based on another framework or your own custom framework. This is not a problem, and you can still use the Flmngr Node backend as a library with the NPM package we provide. ## Install Install Flmngr backend library NPM package into your app or website with the following command: ```bash npm i @edsdk/flmngr-server-node --save ``` ## Manage requests Flmngr backend needs a single endpoint to handle the entire set of requests from the file manager dialog or API. Using the tools of your application, define the URL (File Manager URL — you will need it later for linking with the client) and go into a function that processes this request. Now, you need to call the library function `FlmngrServer.flmngrRequest(config, on)` to pass the request to the Flmngr library and wait for the response in `on.onFinish` listener. Your call should be made in the following way: ```js import {FlmngrServer} from "@edsdk/flmngr-server-node"; // ... some code of your app ... // Call this when processing URL you set as // File Manager URL in your app's routing code: // onProcessURLFileManager(() => { // your routing function FlmngrServer.flmngrRequest( { // the path to the directory with all storage files on your server dirFiles: '/path/to/files', // optional, by default the cache will store inside dirFiles/.cache folder // dirCache: '/path/to/cache', // optional: the biggest request accepted, no limit by default // maxUploadSize: '100M', request: { getParameterNumber: (name: string, defaultValue?: number) => { // TODO: return a parameter with name `name` // from the request in the `number` format }, getParameterString: (name: string, defaultValue?: string) => { // TODO: return a parameter with name `name` // from the request in the `string` format }, getParameterStringArray: (name: string, defaultValue?: string[]) => { // TODO: return a parameter with name `name` // from the request in the `string[]` format }, getParameterFile: (name: string) => { // TODO: return a parameter with name `name` // from the request in the `{data: Buffer, fileName: string}` format }, // Optional, but recommended: hand over the whole request as the transport // saw it, so the library tells GET from POST and keeps the client's lists // getMethod: () => string, // getPost: () => { [name: string]: string | string[] }, // getGet: () => { [name: string]: string | string[] }, // getFiles: () => { file: { name: string, tmp_name: string, size: number } }, // getContentLength: () => number | null } }, { onFinish: ( httpStatusCode: number, headers: { [key: string]: string }, response: string | // - only together with httpStatusCode != 200 { error: string|null, data: any } | // - normal response, send this object as JSON ReadStream // - when need to send a file ) => { // TODO: send headers and response }, onLogError: (message: string) => { console.error(message); // or your custom call to log errors } } ); // }); ``` So, you need to implement the functions of the Flmngr library interface: - `getParameterNumber(..)`, `getParameterString(..)`, `getParameterStringArray(..)`, `getParameterFile(..)` — the set of functions must return the POST variables passed by the client. - `onFinish(..)` — the function that must return the response from the library to the browser. - `onLogError(..)` — the callback for logging possible errors. Note that almost all requests are sent by the Flmngr file manager client in the `application/x-www-form-urlencoded` format. The only upload request (with the file inside) is sent in the `multipart/form-data` content encoding. There may be different functions available in your framework to parse these values from the request. However, Flmngr library does not make any difference between transport (protocol) layer of your app. You must return the value to the library regardless of the encoding in which it was received. For example, in our [Express integration](https://n1ed.com/docs/file-manager/node-express), we read `this.req.body[name]` to get a parameter in `application/x-www-form-urlencoded` encoding, and use a library from `Busboy` NPM package to parse `multipart/form-data` encoded requests. ## GitHub sample We recommend that you use our Express framework integration NPM package's source code as an example of how to implement all the required callbacks: [Flmngr backend for Express framework](https://github.com/edsdk/flmngr-server-node-express) ## Serving files Flmngr will display all file and directory listings in its window. However, after a user selects a file and inserts it into content, the direct link to file is generated. To ensure that such images are displayed correctly and files can be downloaded by website visitors or application users, please serve the directory you set as the storage directory as a public directory. This can be easily accomplished with NGinx or any other HTTP server you use as a reverse proxy. The library itself adds no CORS headers: when the file manager runs on another origin than this backend, add them in your app or in NGinx (our [Express module](https://n1ed.com/docs/file-manager/node-express) adds them for you, so there they must not be duplicated by the proxy). ## Link Flmngr with the server Using the visual Dashboard, you can specify the URLs of your server to link Flmngr with it. - **File Manager URL** is the value you use as the endpoint for Flmngr. - **Files URL** is the URL of the publicly available files you serve with NGinx. ![File manager control panel](https://n1ed.com/img/screenshots/docs/widgets/config-editor/file-manager-set-url.png) **Use absolute URLs**. While URLs in your routing table may be without a domain, but from the root of your website (e.g., `/path`), these URLs on the client side (in the Dashboard or config) should be set in the full absolute form (e.g., `http://your-domain.com/path`) to avoid any possible mistakes. > **Note:** If you are using a HTTP reverse proxy server like Nginx, please use the URLs that it maps to the internal Nest app. [Go to Dashboard](https://n1ed.com/dashboard) > **Note:** Alternatively, you can pass these parameters as [Flmngr.urlFileManager](https://flmngr.com/doc/api-load#method_load__param_urlFileManager) and [Flmngr.urlFiles](https://flmngr.com/doc/api-load#method_load__param_urlFiles) parameters into the Flmngr config. This is useful when you need to use different directories based on the current user to support [multi-user installations](https://n1ed.com/docs/multisite/separating-file-storages). ### Files URL explanation The **Files URL** option is the prefix that Flmngr will add to any file when inserting it into your content (or returning it in a callback of your API call). If you are able to use Flmngr without any issues, but all inserted images appear broken, please refer to this sample to understand how it works: **Files URL** or `Flmngr.urlFiles` client-side parameter `http://your-website.com/files/` `/var/www/files/` Server-side storage dir \+ `/path/to/image.png` For example, Flmngr inserts the file `/path/to/image.png` into your content as `http://your-website.com/files/path/to/image.png`, and on the server that file is `/var/www/files/path/to/image.png`. ## Multi-user environment Flmngr can work in applications where you have many users with different storages. You can programmatically specify `Flmngr.urlFiles` and `dirFiles` parameters synchronously with values based on the current user's session. [Multi-user manual](https://n1ed.com/docs/multisite/separating-file-storages) ## S3/Blob support Flmngr supports not only your own server but also cloud storages: Amazon S3 and Azure Blob. This is an enterprise feature we offer as a separate option. [S3/Blob support](https://n1ed.com/docs/cloud-storage) --- # Install Flmngr as a module to your Express website or app > Install @edsdk/flmngr-server-node-express and call bindFlmngr to map the file manager URL and a files directory in an Express app. Source: https://n1ed.com/docs/file-manager/node-express Original: https://flmngr.com/doc/install-file-manager-server-node-express Section: File manager > Node Express module ## Requirements The module requires Node.js >= 18.17 on your server and works with Express 4 and 5. You can check the version you use with the `node -v` command. ## Install NPM package Flmngr for Express apps ships as the [`@edsdk/flmngr-server-node-express`](https://www.npmjs.com/package/@edsdk/flmngr-server-node-express) NPM package. Go into the directory of your project and run: ```bash npm i @edsdk/flmngr-server-node-express --save ``` ## Set routes to map a URL Next you need to map a URL to the backend. This URL will handle all JSON dialogs between the Flmngr file manager and the server. This can be done with the `bindFlmngr` function from the package. Here is a sample of the app code you will have after: ```js import express from "express"; import {bindFlmngr} from "@edsdk/flmngr-server-node-express"; const app = express(); bindFlmngr({ app: app, urlFileManager: "/flmngr", urlFiles: "/files/", dirFiles: "./files" }); // Your app custom routes go here app.listen(80, '127.0.0.1', function() { console.log("Started"); }); ``` In the sample above, we tell Flmngr to attach to the `flmngr` URL of the server and use `./files` as storage for all the files the user will manage. Also this app will serve this storage directory as a public folder mapped to the URL `files`. Do not confuse the path to the directory with the URL it will be published on. Also, remember that the `urlFiles` parameter is optional in case you decide to publish this directory using other tools (e.g., Nginx). ## GitHub samples There is a sample on GitHub showing how to implement the Flmngr backend in an existing app: [Flmngr backend in Express app sample](https://github.com/flmngr/flmngr-server-node-express-example-ts) > **Hint:** You can fork the sample if you are starting a new Express project where you need the Flmngr file manager to be included. ## Link Flmngr with the server Using the visual Dashboard, you can specify the URLs of your server to link Flmngr with it. - **File Manager URL** is the value you've passed into the `bindFlmngr()` as the `urlFileManager` option. - **Files URL** is the value you've passed into the `bindFlmngr()` as the `urlFiles` option. ![File manager control panel](https://n1ed.com/img/screenshots/docs/widgets/config-editor/file-manager-set-url.png) **Use absolute URLs**. While URLs in the Express server should be without a domain, but from the root of your website (like `/path`), these URLs on the client (in Dashboard or config) should be set in the full absolute form (like `http://your-domain.com/path`) to avoid any possible mistakes. > **Note:** If you use a HTTP proxy server like Nginx, please use URLs it maps to the internal Express app. [Go to Dashboard](https://n1ed.com/dashboard) > **Note:** Alternatively, you can pass these parameters as the [Flmngr.urlFileManager](https://flmngr.com/doc/api-load#method_load__param_urlFileManager) and [Flmngr.urlFiles](https://flmngr.com/doc/api-load#method_load__param_urlFiles) parameters into the Flmngr config. This is useful when you need to use different directories based on the current user to support [multi-user installations](https://n1ed.com/docs/multisite/separating-file-storages). ### Files URL explanation The **Files URL** option is the prefix that Flmngr will add to any file when inserting it into your content (or returning it in the callback of your API call). If you can use Flmngr fine, but all inserted images are broken, please see this sample to understand how it works: **Files URL** or `Flmngr.urlFiles` client-side parameter `http://your-website.com/files/` `/var/www/files/` `dirFiles` server-side parameter \+ `/path/to/image.png` For example, Flmngr inserts the file `/path/to/image.png` into your content as `http://your-website.com/files/path/to/image.png`, and on the server that file is `/var/www/files/path/to/image.png`. ## Multi-user environment Flmngr can work in applications where you have many users with different storages. You can programmatically specify `Flmngr.urlFiles` and `dirFiles` parameters synchronously with values based on the current user's session. [Multi-user manual](https://n1ed.com/docs/multisite/separating-file-storages) ## S3/Blob support Flmngr supports not only your own server but also cloud storages: Amazon S3 and Azure Blob. This is an enterprise feature we offer as a separate option. [S3/Blob support](https://n1ed.com/docs/cloud-storage) --- # Install Flmngr as a module to your Nest website or app > Install the Nest Express package and call bindFlmngr inside bootstrap to serve file manager requests from your NestJS application. Source: https://n1ed.com/docs/file-manager/node-nest Original: https://flmngr.com/doc/install-file-manager-server-node-nest Section: File manager > Node Nest module ## Requirements The module requires Node.js >= 18.17 on your server and Nest 9 or newer. You can check the version you use with the `node -v` command. ## Install NPM package Flmngr for Nest apps ships as [`@edsdk/flmngr-server-node-nest-express`](https://www.npmjs.com/package/@edsdk/flmngr-server-node-nest-express) NPM package. Go into the directory of your project and run: ```bash npm i @edsdk/flmngr-server-node-nest-express --save ``` Note that this package is compatible with Nest installations based on the Express platform (this is the default, the alternative platform, Fastify, will be supported in the future). ## Set routes to map a URL Next, you need to map a URL to the backend. This URL will handle all JSON dialogs between Flmngr file manager and the server. This can be done with the `bindFlmngr` function from the package. Here is a sample of the app code you will have after: ```js import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; import { bindFlmngr } from "@edsdk/flmngr-server-node-nest-express"; async function bootstrap() { const app = await NestFactory.create(AppModule); bindFlmngr({ app: app, urlFileManager: "/flmngr", urlFiles: "/files/", dirFiles: "./files" }); await app.listen(3000); } bootstrap(); ``` In the sample above, we tell the Flmngr to attach to the `flmngr` URL of the server and use `./files` as a storage with all files user will manage. Also, this app will serve this storage directory as a public folder mapped to the URL `/files`. Do not confuse the path to the directory with the URL it will be published on, and remember that the `urlFiles` parameter is optional in case you will publish this directory with other tools (e.g., Nginx). ## GitHub sample There is a sample on GitHub showing how to implement Flmngr backend in existing app: [Flmngr backend in Nest app sample](https://github.com/flmngr/flmngr-server-node-nest-express-example-ts) > **Hint:** You can fork the sample if you are starting a new Nest project where you need the Flmngr file manager to be included. ## Link Flmngr with the server Using the visual Dashboard, you can specify the URLs of your server to link Flmngr with it. - **File Manager URL** is the value you've passed into the `bindFlmngr()` as the `urlFileManager` option. - **Files URL** is the value you've passed into the `bindFlmngr()` as the `urlFiles` option. ![File manager control panel](https://n1ed.com/img/screenshots/docs/widgets/config-editor/file-manager-set-url.png) **Use absolute URLs**. While URLs in Nest server should be without a domain, but from the root of your website (like `/path`), these URLs on the client (in Dashboard or config) should be set in the full absolute form (like `http://your-domain.com/path`) to avoid any possible mistakes. > **Note:** If you use a HTTP proxy server like Nginx, please use URLs it maps to internal Nest app. [Go to Dashboard](https://n1ed.com/dashboard) > **Note:** Alternatively, you can pass these parameters as [Flmngr.urlFileManager](https://flmngr.com/doc/api-load#method_load__param_urlFileManager) and [Flmngr.urlFiles](https://flmngr.com/doc/api-load#method_load__param_urlFiles) parameters into the Flmngr config. This is useful when you need to use different directories based on the current user to support [multi-user installations](https://n1ed.com/docs/multisite/separating-file-storages). ### Files URL explanation The **Files URL** option is the prefix Flmngr will add to any file when inserting it into your content (or returning it in a callback of your API call). If you can use Flmngr fine, but all inserted images are broken, please see this sample to understand how it works: **Files URL** or `Flmngr.urlFiles` client-side parameter `http://your-website.com/files/` `/var/www/files/` `dirFiles` server-side parameter \+ `/path/to/image.png` For example, Flmngr inserts the file `/path/to/image.png` into your content as `http://your-website.com/files/path/to/image.png`, and on the server that file is `/var/www/files/path/to/image.png`. ## Multi-user environment Flmngr can work in applications where you have many users with different storages. You can programmatically specify `Flmngr.urlFiles` and `dirFiles` parameters synchronously with values based on the current user's session. [Multi-user manual](https://n1ed.com/docs/multisite/separating-file-storages) ## S3/Blob support Flmngr supports not only your own server but also cloud storages: Amazon S3 and Azure Blob. This is an enterprise feature we offer as a separate option. [S3/Blob support](https://n1ed.com/docs/cloud-storage) --- # Install Flmngr as a standalone microservice > Run the prebuilt Flmngr Node server on its own port behind Nginx when you have no app to embed it into, or need it on another host. Source: https://n1ed.com/docs/file-manager/microservice Original: https://flmngr.com/doc/install-file-manager-server-microservice Section: File manager > Standalone microservice Microservice Flmngr server is a prebuilt app that serves file manager HTTP requests on some port from a some storage directory, which is set in the config file. It perfectly works together with NGinx or other HTTP reverse proxy server. This is useful when you don't have an existing Node app and only need to run a Flmngr backend to support the file manager on your website. Another case is if you need to run the Flmngr backend on a server that is different from the main website, on a subdomain, etc. The benefit of the standalone service is that you don't need to create a Node project: you just download the app, set the domain, port, and path in the config, and just run it from the terminal. ## Requirements The standalone app is a precompiled server. It requires Node.js >= 18.17 to be installed on your server. You can check the version you are using with the `node -v` command. ## Install Download the archive with the server an unpack it into a directory on your server. [Download Flmngr Microservice](https://flmngr.com/download/flmngr-server-microservice.zip) Alternatively, you can clone our GitHub repository (you may also fork it) and build it yourself with the two commands below: [Flmngr Microservice](https://github.com/flmngr/flmngr-server-microservice) Go into the downloaded directory and install all its dependencies: ```bash npm i ``` and build it: ```bash npm run build ``` ## Configure See the file `flmngr.conf` in the root of the directory and optionally edit the options. They are: - `host` — the host server to listen on - `port` — the port server to listen on - `urlFileManager` — the URL of the Flmngr endpoint that will process all requests. Use the absolute URL form without a host or port. - `urlFiles` — the URL of the served public directory with files (read-only). Flmngr will create links to this URL when a user inserts an image using the file manager. Use the absolute URL form without a host or port. This is an optional value, but if you omit it, you will need to serve the storage directory with some other server, for example directly through Nginx. - `dirFiles` — the path of the directory in the server file system (not a URL). `./files` means a directory in the current folder (sample files are shipped with this server), but you can use an absolute path to your directory (and this is recommended). - `maxUploadSize` — the biggest upload accepted, in bytes or with a k/m/g suffix (`100M` as shipped). Remove the line for no limit. The optional settings, commented out in the file with their defaults: `dirCache` (previews and file info, `dirFiles/.cache`), `dirTmp` (where an upload waits while a request runs), `dirPermissions` (`0755`), `denyFilePatterns` (a comma-separated list of file names that can not be uploaded or renamed to; scripts, server config files and HTML by default), `doUpscalePreviews` and `cors` (`false` when your proxy adds the CORS headers). ## Run Start the service by typing the following command in the terminal: ```bash npm run start ``` Your current directory must be the directory of the Flmngr microservice server. ## Autostart Make changes to your startup scripts (e.g., `systemd` on Linux servers) to run the Flmngr server when the server restarts. We recommend adding there the following command: `cd /path/to/flmngr-server-microservice/ && npm run start` Do not forget to change the path in this command to point to the directory where you installed the microservice. ## NGinx The most popular (but optional) case is to run this microservice through NGinx HTTP reverse proxy server. This allows you to add the microservice to a centralized HTTP server configuration and also use SSL certificates (to enable HTTPS connections) using NGinx. NGinx also provides other tools such as configuring the number of parallel requests and other useful features that can improve your server's availablity. The sample configuration for it is placed in the `nginx.conf` file. This file shows you how to run NGinx on your domain (uncomment this option and specify your domain) and proxy all requests to the Flmngr microservice app, which is running locally. You can also change the routes here (but this will affect linking with the file manager). It's recommended to have the same routes both in the Nginx config file and in the Flmngr microservice config. > **Note:** Never add any CORS headers to the NGinx route to avoid their duplication (if you do, the browser will ignore both of them), because the Flmngr microservice already adds them to allow Flmngr to work on one domain and the microservice on another (in case you have such a configuration). In order to let NGinx use this config, you must link or copy this file into the `sites-enabled` folder of NGinx (usually `/etc/nginx/sites-enabled` in Unix environments). Then, test the configuration to be sure: ```bash nginx -t ``` and reload the configuration to apply it: ```bash service nginx reload ``` If you are using this microservice along with other services on this server, you can merge this NGinx config with your existing config. ## Link Flmngr with the server Using the visual Dashboard, you can specify the URLs of your server to link Flmngr with it. - **File Manager URL** is the value you passed into the `flmngr.conf` config file as `urlFileManager` option. - **Files URL** is the value you passed into the `flmngr.conf` config file as the `urlFiles` option. ![File manager control panel](https://n1ed.com/img/screenshots/docs/widgets/config-editor/file-manager-set-url.png) **Use absolute URLs**. While URLs in the Flmngr microservice config should be without a domain, but from the root of your website (e.g., `/path`), these URLs on the client side (in Dashboard or config) should be set in the full absolute form (e.g., `http://your-domain.com/path`) to avoid any possible mistakes. > **Note.** If you are using a HTTP reverse proxy server like Nginx, please use the URLs it maps to the internal Nest app. [Go to Dashboard](https://n1ed.com/dashboard) > **Note:** Alternatively, you can pass these parameters as [Flmngr.urlFileManager](https://flmngr.com/doc/api-load#method_load__param_urlFileManager) and [Flmngr.urlFiles](https://flmngr.com/doc/api-load#method_load__param_urlFiles) parameters into the Flmngr config. This is useful when you need to use different directories based on the current user to support [multi-user installations](https://n1ed.com/docs/multisite/separating-file-storages). ### Files URL explanation The **Files URL** option is the prefix Flmngr will add to any file when inserting it into your content (or returning it in the callback of your API call). If you can use Flmngr fine, but all inserted images are broken, please see this sample to understand how it works: **Files URL** or `Flmngr.urlFiles` client-side parameter `http://your-website.com/files/` `/var/www/files/` `dirFiles` server-side parameter \+ `/path/to/image.png` For example, Flmngr inserts the file `/path/to/image.png` into your content as `http://your-website.com/files/path/to/image.png`, and on the server that file is `/var/www/files/path/to/image.png`. ## Multi-user environment Flmngr can work in applications where you have many users with different storages. You can programmatically specify `Flmngr.urlFiles` and `dirFiles` parameters synchronously with values based on the current user's session. [Multi-user manual](https://n1ed.com/docs/multisite/separating-file-storages) ## S3/Blob support Flmngr supports not only your own server but also cloud storages: Amazon S3 and Azure Blob. This is an enterprise feature we offer as a separate option. [S3/Blob support](https://n1ed.com/docs/cloud-storage) --- # Configure File Manager > Link N1ED to your Flmngr backend with the File Manager URL and Files URL, then set up folders, uploads, stock images and the file list in the Dashboard. Source: https://n1ed.com/docs/configuration/file-manager Section: File manager > File manager settings Updated: 2026-11-13 N1ED browses, uploads and edits images with the Flmngr file manager. Its settings are in the **File Manager** section of your [Dashboard](https://n1ed.com/dashboard)'s **Settings** tab, in the same order as on this page. Most of them are part of the Premium plan: on other API keys you can see them but not change them. ## Link file manager with the server Two URLs connect N1ED to your file storage: the **File Manager URL**, where the Flmngr backend you installed on your server answers, and the **Files URL**, the public address of the folder it manages, from which N1ED builds the links to your files. Set both in the **Server** row. ![Server row of the File Manager settings: File Manager URL, User, Password, Files URL](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-file-manager.png) Until you set them, N1ED uses our public demo file server, which is for trying N1ED out and not for your real files. Please review the [File manager installation manual](https://n1ed.com/docs/file-manager) to set up the file manager on the server side if you haven't done so already. If your server asks for a login (HTTP Basic Auth), fill in **User** and **Password** too, and every request of the file manager carries them. Keep in mind that the configuration of an API key is sent to every browser that opens your editor, so anyone who can open the editor page can read this password. Use it only to keep robots out, never for an account that protects anything else. With a CMS module (Drupal, Joomla and others), the module tells N1ED where its file manager is, so these fields are locked in the Dashboard. ## Directories settings The **Directories** and **Uploads** rows control the folder tree on the left of the file manager, and where files go when they are uploaded without opening it. ![Directories and Uploads rows of the File Manager settings](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-file-manager-directories.png) ### Available options - **Auto expand tree levels:** how many levels of the folder tree are open when the file manager starts. The folder of the file you are editing is always open. - **Preload auto expanded directories only:** instead of fetching the whole folder tree at once, the file manager loads the first level of folders, and the folders inside each one when you open it. Use it for storages with many folders. Search only looks through the folders loaded so far. - **Sort directories:** None keeps the order your server returns, Alphabetical sorts by name character by character, Natural sorts numbers the way people do ("9" before "10") and ignores letter case. - **Hide folders with names:** one name per line. Folders with exactly that name (letter case matters) are not shown in the tree, at any depth. This hides them from view only: the folders are still there and search still looks into them. - **Default upload directory:** the folder, relative to your storage root, for uploads made without opening the file manager: files dropped or pasted into the editor, and the **Upload** button. Uploads made in the file manager itself go to the folder that is open there. - **Uploads hierarchy:** adds date folders inside the default upload directory, from the date of the upload: `yyyy/mm` gives `/2026/09/`, `yyyy/mm/dd` gives `/2026/09/5/` (the day has no leading zero). The folders are created on the first upload. In code the values are written `YYYY/mm` and `YYYY/mm/dd`, capital Y ([`Flmngr.defaultUploadDirStructure`](https://n1ed.com/docs/configuration/file-manager#uploads-hierarchy)). - **When a file name is taken:** what an upload made outside the file manager does when a file of that name already exists: **Auto rename** saves the new one as `photo_1.jpg`, **Overwrite** replaces the old one, **Ask** opens the upload dialog with the choice. Inside the file manager the dialog always asks; this setting only preselects its answer. A dropped file keeps its own name; an image pasted from the clipboard has none (browsers call it `image.png`). - **Ask for a name when an image is pasted:** such an upload first opens the dialog to name the file; the name is checked against the server as you type. A file copied with its name (from a file manager) and pasted keeps that name and is not asked about. ## File list settings The **File list** row sets how the files of the open folder are listed. ![File list row of the File Manager settings](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-file-list-settings.png) ### Available options - **Load on scroll:** the file manager lists a big folder in portions of this many files and loads the next one when you scroll to the end. - **Initial file sorting order:** by Name, Size or Date. Users can still change it in the file manager. - **Ascending sorting order:** uncheck it for Descending. - **Enable file grouping by date:** puts a header over the files of each period while the list is sorted by date. - **Group files by:** the period for those headers: Date (today, yesterday, then each day), Week, Month or Year. - **Hide files with names:** one name per line, for example `.gitignore`. With our PHP backend a line can be a pattern: `*.log` hides every log file, and letter case does not matter. Hidden files are left out of search results too. ## File view settings The file manager shows a folder as previews or as a table. The **File view** row picks what each of the two shows under a file: its size, the resolution of an image, the date and the time it was changed, and its folder, which is shown in search results only. ![File view row of the File Manager settings](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-file-manager-file-view-settings.png) ## Stock images The file manager can search free photos on Unsplash and add the one you pick to the open folder: the **Get from stock** button on its toolbar. It needs your own Unsplash access key in the **Stock images** row. [How to get an Unsplash access key](https://n1ed.com/docs/configuration/generate-unsplash-key). ![Stock images row of the File Manager settings: Unsplash API access key](https://n1ed.com/img/screenshots/docs/widgets/config-editor/unsplash-api-key-setting.png) ## Advanced settings The **Advanced** row has two options, and the login for your server is in the **Server** row (see [Link file manager with the server](https://n1ed.com/docs/configuration/file-manager#link-flmngr)). ![Advanced row of the File Manager settings: Remove Flmngr link, codec](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-file-manager-advanced-settings.png) ### Available options - **Set username and password:** for servers with [HTTP Basic Auth](https://flmngr.com/doc/api-load#method_load__param_urlFileManager__user), in the **Server** row now. - **Unsplash API key:** has its own **Stock images** row now, see [Stock images](https://n1ed.com/docs/configuration/file-manager#stock-images). - **Remove Flmngr link:** hides the bar at the bottom of the file manager with the Flmngr logo and the help link. - **Use codec to get through a firewall:** Base64 encodes the values of every request to your server, for firewalls that block requests with paths or HTML in them. Your backend has to decode them: our PHP backend does. ## Configuration parameters Each setting above is a key in the configuration of your API key. You can also set it in the editor's own config for a particular page or user, see [Dynamic config](https://n1ed.com/docs/configuration/api). A value set there overrides the Dashboard. ## File Manager URL URL of the Flmngr backend on your server. - **API parameter:** `Flmngr.urlFileManager` - **Type:** `string` - **Default:** `https://flmngr.democdn.com/file-manager-default` - **Dashboard:** Settings → File Manager → Server → File Manager URL More info in the [installation manual](https://n1ed.com/docs/file-manager/php-composer). A top-level `urlFileManager` key from older configs is still used while this one is empty or the default. ## User User name for accessing the file manager. Use it only if your server requires Basic Auth. - **API parameter:** `Flmngr.urlFileManager__user` - **Type:** `string` - **Default:** `null` - **Dashboard:** Settings → File Manager → Server → User ## Password Password for accessing the file manager. Use it only if your server requires Basic Auth, and remember that it is readable by anyone who can open the editor page. - **API parameter:** `Flmngr.urlFileManager__password` - **Type:** `string` - **Default:** `null` - **Dashboard:** Settings → File Manager → Server → Password ## Files URL URL prefix of the files on your server: the public address of the storage root. - **API parameter:** `Flmngr.urlFiles` - **Type:** `string` - **Default:** `https://flmngr.democdn.com/files/default` - **Dashboard:** Settings → File Manager → Server → Files URL More info in the [installation manual](https://n1ed.com/docs/file-manager/php-composer). A top-level `urlFiles` key from older configs is still used while this one is empty or the default. ## Uploads directory The default directory for uploads made outside the file manager, relative to your storage root. - **API parameter:** `Flmngr.defaultUploadDir` - **Type:** `string` - **Default:** `/` - **Dashboard:** Settings → File Manager → Uploads → Default upload directory More info in the [installation manual](https://n1ed.com/docs/file-manager/php-composer). A top-level `dirUploads` key from older configs is still used while this one is `/`. ## Uploads hierarchy Date folders to create inside the default upload directory. - **API parameter:** `Flmngr.defaultUploadDirStructure` - **Type:** `string` - **Default:** `flat` - **Valid values:** `flat`, `YYYY/mm`, `YYYY/mm/dd` - **Dashboard:** Settings → File Manager → Uploads → Uploads hierarchy ## Upload mode What an upload made outside the file manager (the **Upload** button, a pasted or dropped file, `Flmngr.upload()`) does when the name is already taken. Files pasted or dropped together go up together: one dialog lists them all and asks once. An image lands as an image, any other file as a **Download** link to it. - **API parameter:** `Flmngr.uploadMode` - **Type:** `string` - **Default:** `AUTORENAME` - **Valid values:** `AUTORENAME`, `OVERWRITE`, `ASK` - **Dashboard:** Settings → File Manager → Uploads → When a file name is taken `AUTORENAME` saves the new file under a free name (`photo_1.jpg`), `OVERWRITE` replaces the existing file, `ASK` opens the upload dialog so the user chooses (rename automatically, overwrite, or type new names; with "Auto rename" selected the dialog shows the name that will be used). Inside the file manager the dialog always asks, and this value only preselects its answer. An upload started from code without the dialog (`Flmngr.upload()` without `interactive: true`) cannot ask and renames automatically. ## Ask for a name when an image is pasted An image pasted from the clipboard has no name of its own: browsers call it `image.png`. A dropped or chosen file keeps its name either way. - **API parameter:** `Flmngr.askNameOnPaste` - **Type:** `boolean` - **Default:** `false` - **Dashboard:** Settings → File Manager → Uploads → Ask for a name when an image is pasted When on, an upload started by a paste of such an image first opens the dialog to name the file, prefilled with `image.png`, the name checked against the server as it is typed (a taken name is allowed; the upload mode then decides). A file copied with its name and pasted is not asked about. ## Auto expand tree levels How many levels of the folder tree are open when the file manager starts. - **API parameter:** `Flmngr.expandLevels` - **Type:** `number` - **Default:** `99` - **Dashboard:** Settings → File Manager → Directories → Auto expand tree levels ## Preload auto expanded directories only Load the folder tree level by level instead of all at once. - **API parameter:** `Flmngr.isDynamicDirListing` - **Type:** `boolean` - **Default:** `false` - **Dashboard:** Settings → File Manager → Directories → Preload auto expanded directories only ## Sort directories The order of the folders in the tree. - **API parameter:** `Flmngr.sortDirs` - **Type:** `string` - **Default:** `none` - **Valid values:** `none`, `alphabetical`, `natural` - **Dashboard:** Settings → File Manager → Directories → Sort directories ## Hide folders with names List of folder names to hide in the tree: exact names, letter case matters. - **API parameter:** `Flmngr.hideDirs` - **Type:** `string[]` - **Default:** `[".cache", ".tmp", "tmp"]` - **Dashboard:** Settings → File Manager → Directories → Hide folders with names ## Hide files with names List of file names to hide in the list and in search results. With our PHP backend the names can be patterns (`*.log`) and letter case does not matter. - **API parameter:** `Flmngr.hideFiles` - **Type:** `string[]` - **Default:** `[".gitignore"]` - **Dashboard:** Settings → File Manager → File list → Hide files with names ## Load on scroll How many files to load at a time in a big folder. - **API parameter:** `Flmngr.filesPerPortion` - **Type:** `number` - **Default:** `100` - **Dashboard:** Settings → File Manager → File list → Load on scroll ## Initial file sorting order - **API parameter:** `Flmngr.orderBy` - **Type:** `string` - **Default:** `name` - **Valid values:** `name`, `size`, `date` - **Dashboard:** Settings → File Manager → File list → Initial file sorting order - **API parameter:** `Flmngr.orderAsc` - **Type:** `boolean` - **Default:** `true` - **Dashboard:** Settings → File Manager → File list → Ascending sorting order ## File grouping by date Headers over the files of each period, while the list is sorted by date. - **API parameter:** `Flmngr.enableFileGrouping` - **Type:** `boolean` - **Default:** `false` - **Dashboard:** Settings → File Manager → File list → Enable file grouping by date - **API parameter:** `Flmngr.groupBy` - **Type:** `string` - **Default:** `month` - **Valid values:** `date`, `week`, `month`, `year` - **Dashboard:** Settings → File Manager → File list → Group files by ## File view What the preview and the table views show under each file. - **API parameter:** `Flmngr.fileFields` - **Type:** `{preview: {...}, table: {...}}` - **Dashboard:** Settings → File Manager → File view Each of `preview` and `table` holds five flags: `size`, `resolution`, `date`, `time` and `dir` (the folder of a file, shown in search results only). By default `size`, `resolution` and `dir` are on in both, `date` and `time` are off. ## Unsplash API access key Your Unsplash access key for the stock image search. [How to get one](https://n1ed.com/docs/configuration/generate-unsplash-key). - **API parameter:** `Flmngr.apiKeyUnsplash` - **Type:** `string` - **Dashboard:** Settings → File Manager → Stock images → Unsplash API access key ## Remove Flmngr link - **API parameter:** `Flmngr.whiteLabel` - **Type:** `boolean` - **Default:** `false` - **Dashboard:** Settings → File Manager → Advanced → Remove Flmngr link ## Codec `1` encodes the values of every request to your backend in Base64. Use the number, not a string. - **API parameter:** `Flmngr.codec` - **Type:** `number` - **Default:** `0` - **Valid values:** `0`, `1` - **Dashboard:** Settings → File Manager → Advanced → Use codec to get through a firewall ## CSRF protection Extra headers or parameters for every request to your backend, when your server protects its forms from CSRF. A function, an object `{headers, params}`, or `drupal8` for Drupal's session token. - **API parameter:** `Flmngr.urlFileManager__CSRF` - **Type:** `function | object | string` - **Dashboard:** no control, [set it in the editor's config](https://n1ed.com/docs/configuration/api) --- # Unsplash stock images inside Flmngr > Register an Unsplash application and paste its access key so editors can search and download free stock photos from inside Flmngr. Source: https://n1ed.com/docs/configuration/generate-unsplash-key Section: File manager > Unsplash API key Updated: 2026-10-19 Unsplash is a free service that provides high-quality photos and images for personal or commercial use. Users can browse the website's extensive collection of photos, download and use them for free. Flmngr users can easily access Unsplash's photo gallery directly from the file manager. This will allow you to search and download high-quality stock images from Unsplash without ever having to leave Flmngr. ![Unsplash gallery](https://n1ed.com/img/screenshots/docs/widgets/usplash/unsplash-gallery.jpg) ## How to get access to Unsplash stock images To do so, you will need to obtain an access key from Unsplash, which can be done quickly and easily on their website, just follow these steps: 1\. Register for an account on [Unsplash.com](https://unsplash.com/join). ![Create account](https://n1ed.com/img/screenshots/docs/widgets/usplash/unsplash-login.png) 2\. Head to your [applications dashboard](https://unsplash.com/oauth/applications) and select New Application. > Any application can utilize the Unsplash API for free, with a default rate limit of 50 requests per hour, referred to as a Demo status. ![Create application](https://n1ed.com/img/screenshots/docs/widgets/usplash/unsplash-new-application.png) 3\. Agree to the terms and click Accept. ![Accept terms](https://n1ed.com/img/screenshots/docs/widgets/usplash/unsplash-accept-terms.png) 4\. You will need to enter an Application name and Description. After providing the details, click on Create application. ![Application info](https://n1ed.com/img/screenshots/docs/widgets/usplash/unsplash-application-info.png) 5\. Go to Application page. Your access key should be available on your application details page after scrolling down. ![Application page](https://n1ed.com/img/screenshots/docs/widgets/usplash/unsplash-application-page.png) ![Unsplash access key](https://n1ed.com/img/screenshots/docs/widgets/usplash/unsplash-key.png) 6\. Once you have the access key, simply navigate to the settings of the file manager in the [Dashboard](https://n1ed.com/dashboard) and enter it there: **Settings** → **File Manager** → **Stock images** → **Unsplash API access key**, then save the configuration. ![Specify Unsplash access key](https://n1ed.com/img/screenshots/docs/widgets/config-editor/unsplash-api-key-setting.png) --- # File manager cloud storage support > How a proxy microservice serves your bucket or container to Flmngr, so cloud files work with any editor and no backend of your own. Source: https://n1ed.com/docs/cloud-storage Original: https://flmngr.com/doc/file-manager-with-cloud-storage Section: File manager > Cloud storage > This article is for N1ED Premium users who purchased the additional option to support Amazon S3 / Azure Blob storage. All the support for working with files in N1ED is provided by the built-in [Flmngr](https://flmngr.com) file manager. You can use it with your own (local server) storage after installing its backend on your server, but it also supports cloud storages such are Amazon S3 and Azure Blob. - [Amazon S3](https://n1ed.com/docs/cloud-storage/amazon-s3) - [Azure Blob](https://n1ed.com/docs/cloud-storage/azure-blob) ![](https://n1ed.com/img/icons/conf.svg) ## Easy configuration and compatibility Does not matter what editor you use or which backend on your server you have - Flmngr when configured to work with the cloud file system will work with any of your applications. In such configurations it will access the cloud server acting as a proxy between the file manager and S3/Blob storage. So when accessing Amazon S3 or Azure blob from Flmngr file manager you do not need to install anything. The file manager will transparently access your Amazon S3 bucket or Azure Blob container. This is done using our server with microservice we provide you fully configured with cloud file system option. So you start using file manager right after you install N1ED/Flmngr on your client side (in CKEditor, TinyMCE, React app, etc.) ![](https://n1ed.com/img/icons/cloudshot.png) ## Fast working with S3/Blob The configurable deep caching algorithm is the main feature of Flmngr implementation of cloud file systems support. It will significantly increase the speed of loading directory/file structure and loading and generating image previews (remember, Flmngr is an images-first file manager). If you use the cloud storage using Flmngr only (and no other app or the user can change manually the content of your S3 bucket or Blob container), caching time can be set to an unlimited value, so on every start the file manager will take just milliseconds to retrieve contents to build the tree and populate file items. Then it will quickly load image previews from caching server so no requests to S3/Blob will be done (if the cache was already built). ![](https://n1ed.com/img/icons/users.png) ## Multi-user support Some customers use the file manager with the single storage they place files into. This is some directory in a single Amazon S3 bucket or Azure Blob container. But some website/app developers need to store files of different users in different folders or even in different buckets. Flmngr supports such independent storages and this is one of its main features. ![](https://n1ed.com/img/icons/security.png) ## Security A high level of isolation up to storing service on a dedicated server we offer to you will help you keep the security level high. S3/Blob access credentials will not be exposed to end users because the file manager client accesses the cloud only through the server. This is covered by access tokens owned individually by each user accessing S3/Blob from your side. Our developer team will review your implementation to avoid any misconfiguration. ![](https://n1ed.com/img/icons/plugin.png) ## Self-hosted and cloud versions The most users need just a cloud version of Flmngr backend we provide on an already preconfigured shared or dedicated server. For big enterprise clients we offer a self-hosted backend (instead of our cloud service) on individual conditions. We also offer free help with integration of this software into your project (directly to the server or into the source repository to fit your build & deploy process, CI rules, etc.). --- # Configure Flmngr file manager to use Amazon S3 storage > Store files in an Amazon S3 bucket with no Flmngr backend on your server: enter the bucket credentials and directory in the Dashboard. Source: https://n1ed.com/docs/cloud-storage/amazon-s3 Original: https://flmngr.com/doc/file-manager-for-amazon-s3 Section: File manager > Cloud storage > Amazon S3 > This article is for N1ED Premium users who purchased the additional option to support Amazon S3 storage. Amazon Web Services (AWS) are very popular. Many websites use Amazon S3 for storing files and images there for fast-serving media available to visitors. Flmngr file manager can use Amazon S3 bucket with files and here is some info about what you need to configure it. ![N1ED](https://n1ed.com/img/logo/32px/N1ED.png) + ![Amazon S3](https://n1ed.com/img/docs/s3.png) ## Zero configuration on your server As far as you do not store files on your server and use Amazon S3 for that, you do not need to install any Flmngr backend on your server. Anything you need to do for switching using S3 is to set it according to the checkbox and fill the required values. Go into your [Dashboard](https://n1ed.com/dashboard), select an API key you use to load N1ED, and specify the access credentials of your server: ![S3 bucket configuration](https://n1ed.com/img/docs/s3-configuration.png) You can get these credentials from your [S3 console](https://s3.console.aws.amazon.com/s3/home). The value of the "Directory" field tells which directory is inside the bucket to use. In the sample above we show how to use whole the bucket as a storage for the file manager. "Cache time (sec)" means time in seconds Flmngr can cache file and directory listing results to all your users. This can save your money on API requests to S3 and significantly increase the speed of accessing the cloud. If you use the Amazon S3 bucket via Flmngr file manager only, increasing this value is recommended. This will not affect the caching previews: Flmngr can detect their change by other sings (file name, size, timestamp). Not seeing the option "Use Amazon S3 bucket"? This means you didn't [purchase](https://n1ed.com/pricing) this additional option yet. ## Multi-user support If you have different users, you can isolate them from each other by storing their files: - in the different folders inside one S3 bucket - in the different S3 buckets You can also configure that. Once this option is purchased our managers will unlock your required fields in the dashboard and explain how to use them. ## Configuring S3 bucket In order to make your files accessible for reading by website visitors and editors of your website, you should make your bucket public (for read only). Probably you already did it, but if you are configuring a new bucket to avoid getting HTTP error 403 from Amazon, please check you have opened public access to this bucket: - Go to the bucket in [Amazon web console](https://s3.console.aws.amazon.com/s3/home), select your bucket, go into the "Permissions tab" - Uncheck the "Block all public access" parameter - Add bucket policy like: ```json { "Version": "2012-10-17", "Id": "Policy1637840001466", "Statement": [ { "Sid": "Stmt1637839995898", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::my-bucket/*" } ] } ``` You can use [this generator](https://awspolicygen.s3.amazonaws.com/policygen.html) to generate a policy for your bucket. Another thing you need to do is to configure CORS for S3 bucket. This is required for an image editor called by Flmngr file manager. Modern browsers require some additional CORS configuration to allow scripts (like image editor) drawing images from external domains on the canvas. At the same "Permissions" tab inside AWS Console find a section "Cross-origin resource sharing (CORS)" there, please paste there a JSON with origin (a protocol + domain + port you run your image editor from), "\*" is for any origin. For example: ```json [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "HEAD", "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ] ``` ![CORS configuration](https://n1ed.com/img/screenshots/amazon-s3/configure-s3-bucket-cors.png) --- # Connect an S3-compatible storage (Custom) > Set the storage type to Custom to use Cloudflare R2, DigitalOcean Spaces, Wasabi, Backblaze B2 or MinIO, with settings per provider. Source: https://n1ed.com/docs/cloud-storage/s3-compatible Section: File manager > Cloud storage > S3-compatible (Custom) Updated: 2026-09-26 > This article is for N1ED Premium users who purchased the additional option to support cloud storage. Besides [Amazon S3](https://n1ed.com/docs/cloud-storage/amazon-s3), Flmngr works with **any S3-compatible storage** — Cloudflare R2, DigitalOcean Spaces, Wasabi, Backblaze B2, a self-hosted MinIO or rclone server, and more. You configure it in the same **Cloud storages** dialog of your dashboard: pick the storage, open **Edit credentials**, and switch the storage type from **Amazon S3** to **Custom**. ## The Custom form - **Endpoint URL** — the S3 API URL of your storage, e.g. `https://.r2.cloudflarestorage.com`. Buckets are accessed in path style (`endpoint/bucket/object`), which every S3-compatible server supports. - **Bucket** — the bucket (or container/space) name. Create it on the provider side first. - **Key / Secret** — the access key id and secret. Most providers have a dedicated screen to create an S3 access key pair (e.g. R2 "API tokens", DigitalOcean "Spaces keys", Google "HMAC keys"). - **Server has no per-object ACL or folder markers** — a checkbox for compatibility. Some servers do not implement per-object ACLs or empty-folder marker objects; without this box ticked, copy / move / rename and creating empty folders fail on them. Turn it **on** only for such servers (see the table). ## Settings per provider | Provider | Endpoint URL | "No per-object ACL / folder markers" | Notes | |---|---|---|---| | **MinIO** (self-hosted) | `https://minio.example.com` | Off | Full S3 server. Create the bucket first. | | **rclone serve s3** (self-hosted) | `https://your-host` | **On** | Serves a plain directory as S3; no ACLs / markers. | | **Cloudflare R2** | `https://.r2.cloudflarestorage.com` | **On** | Create an R2 API token for the key/secret. | | **DigitalOcean Spaces** | `https://.digitaloceanspaces.com` | Off | e.g. `sgp1`, `nyc3`. Use a Spaces key pair. | | **Wasabi** | `https://s3..wasabisys.com` | Off | Full S3 compatibility. | | **Backblaze B2** | `https://s3..backblazeb2.com` | Off | Use the S3-compatible application key. | | **Google Cloud Storage** | `https://storage.googleapis.com` | Off | Needs HMAC interoperability keys. Note: deleting a folder is not supported over the S3 API — for full GCS support ask us about the native Google option. | ## Public file URLs To display and download uploaded files, the storage must serve them publicly (like a public bucket), and your Flmngr configuration's `urlFiles` must point at that public base URL — usually `//`. This is the same `urlFiles` rule as for [Amazon S3](https://n1ed.com/docs/cloud-storage/amazon-s3), and CORS still needs to allow your editor's origin so the image editor can read images. --- # Configure Flmngr file manager to use Azure Blob storage > Point Flmngr at an Azure Blob container using credentials from the Azure portal, with no file manager backend installed on your server. Source: https://n1ed.com/docs/cloud-storage/azure-blob Original: https://flmngr.com/doc/file-manager-for-azure-blob Section: File manager > Cloud storage > Azure Blob > This article is for N1ED Premium users who purchased the additional option to support Azure Blob storage. Azure Blob like [Amazon S3](https://n1ed.com/docs/cloud-storage/amazon-s3) is a type of network storage that can be used for storing images and other media for your websites and apps. You can configure Flmngr to work with the Azure Blob container absolutely transparently for your file manager users and this article will explain to you how. ![N1ED](https://n1ed.com/img/logo/32px/N1ED.png) + ![Azure Blob](https://n1ed.com/img/docs/blob.png) ## Zero configuration on your server As far as you do not store files on your server and use Azure Blob for that, you do not need to install any Flmngr backend on your server. Anything you need to do for switching using Blob is to set it according to the checkbox and fill the required values. Go into your [Dashboard](https://n1ed.com/dashboard), select an API key you use to load N1ED, and specify the access credentials of your server: ![Blob container configuration](https://n1ed.com/img/docs/blob-configuration.png) You can get these credentials from [Azure portal](https://portal.azure.com/). The value of the "Directory" field tells which directory is inside the container to use. In the sample above we show how to use whole the container as storage for the file manager. "Cache time (sec)" means time in seconds Flmngr can cache file and directory listing results to all your users. This can save your money on API requests to S3 and significantly increase the speed of accessing the cloud. If you use Azure Blob container via Flmngr file manager only, increasing this value is recommended. This will not affect the caching previews: Flmngr can detect their change by other sings (file name, size, timestamp). Not seeing the option "Use Azure Blob container"? This means you didn't [purchase](https://n1ed.com/pricing) this additional option yet. ## Multi-user support If you have different users, you can isolate them from each other by storing their files: - in the different folders inside one Blob container - in the different Blob containers You can also configure that. Once this option is purchased our managers will unlock your required fields in the dashboard and explain how to use them. ## Configuring Blob container In order to make your files accessible for reading by website visitors and editors of your website, you should make your container public (for read only). Probably you already did it, but if you are configuring a new container to avoid getting HTTP error 403 from Azure, please check you have opened public access to this container: - Please go to [your containers](https://portal.azure.com/), select the container you want to reconfigure - Press "Change access level" and set it to "Blob (anonymous read access for blobs only)", then press OK. ![Azure Blob public access](https://n1ed.com/img/screenshots/azure-blob/azure-blob-public-access.png) Another thing you need to do is to configure CORS for the Blob container. This is required for an image editor called by Flmngr file manager. Modern browsers require some additional CORS configuration to allow scripts (like image editor) drawing images from external domains on the canvas. Go into the "Resource sharing (CORS)" section in your Azure dashboard and add a pattern for the domain you run the image editor from to the "Allowed origins" field, then save it. If you specify "\*" there, all domains will be allowed not only to download images but also to dynamically use them on a canvas of an image editor. ![CORS configuration](https://n1ed.com/img/screenshots/azure-blob/azure-blob-cors-configuration.png) --- # Editing N1ED configuration > Where N1ED keeps its settings and how to change them: the Dashboard's Settings tab, reached from the editor's gear button, and overrides in the editor's config. Source: https://n1ed.com/docs/configuration Section: Configuration Updated: 2026-11-06 N1ED keeps its settings in the cloud, attached to your API key: the toolbar, the UI mode, the CSS framework of your website, the file manager, the image editor and the third-party services. Every editor that loads N1ED with your API key gets the same settings, so you configure a website once, not every page with an editor on it. First of all visual N1ED configuration is available for you: the Settings tab of your [Dashboard](https://n1ed.com/dashboard). This is the default and recommended way to configure your HTML editor, and in most cases it is enough to set all the preferences you need. Also sometimes you need to [pass configuration programmatically](https://n1ed.com/docs/configuration/api), for example a separate upload folder for every user: then you put N1ED keys into the TinyMCE or CKEditor configuration of the page. This works together with the Dashboard, and a value passed this way overrides the Dashboard's. ## Visual configuration ![The Configure button on the N1ED toolbar](https://n1ed.com/img/screenshots/docs/widgets/config-editor/configure-button.png) To change the settings, open your [Dashboard](https://n1ed.com/dashboard), pick the website on the left and go to the **Settings** tab. The gear button (**Configure**) at the right of the editor's toolbar opens the Dashboard in a new tab, and so does the configuration page of our CMS modules: it starts on the **Blocks** tab of the first website of your account, so pick yours there. Each API key has its own settings: a website is one API key. ![The Settings tab of the N1ED Dashboard](https://n1ed.com/img/screenshots/docs/widgets/config-editor/visual-configuration.png) The Settings tab has a section for each part of N1ED: | Section | What you set there | Manual | |---|---|---| | Your framework (Bootstrap or Tailwind CSS) | which framework your website uses, where it is loaded from, extra CSS and JS, the grid on start | [Bootstrap and Tailwind CSS settings](https://n1ed.com/docs/configuration/bootstrap-editor), [CSS theming](https://n1ed.com/docs/configuration/css-theming) | | N1ED → Toolbar | the toolbar mode, and the title, hint and visibility of each button, the templates of widgets | [UI, toolbar and widgets](https://n1ed.com/docs/configuration/ui-and-widgets) | | N1ED → UI mode, Tag editing | the Classic, Grid or Maximized mode, the sidebar, tag options | [UI modes and tag editing](https://n1ed.com/docs/configuration/ui-and-widgets#interface) | | File Manager | the link to your file storage, folders, uploads, stock images, the file list | [File manager](https://n1ed.com/docs/configuration/file-manager) | | Image Editor | tools, colors, crop ratios, fonts, stickers, shapes, resize limits | [Image editor](https://n1ed.com/docs/configuration/image-editor) | | Txt42 (Chat GPT) | your OpenAI API key for text generation | [ChatGPT](https://n1ed.com/docs/configuration/chat-gpt) | | Translate | the translation service, its API key, the languages | [Translator](https://n1ed.com/docs/configuration/translator) | Two more tabs sit next to Settings: **Blocks**, your library of saved blocks ([Managing Bootstrap custom blocks](https://n1ed.com/docs/configuration/bootstrap-blocks)), and **Status**, which shows the services that are ready and the ones that still need a key, and whether the API key takes its settings from another one. Whenever you change something, the Dashboard says **Configuration was changed** and offers to **Save** or **Undo** it. Set it back the way it was and the offer goes away, as there is nothing to save. The settings are applied as soon as the configuration is saved: just reload the page with N1ED to see the change. Most settings are part of the Premium plan. On an API key without it you can see them, but they are locked, and a note at the bottom of the page leads to the upgrade. ### One configuration for several websites The **Parent** row of the Status tab says whether the API key has its own settings. **Attach** makes it inherit the configuration of another API key of your account: useful when a staging and a production website, or many similar websites, should work the same way. The other key becomes a parent, its row says how many keys inherit from it, and its changes apply to all of its children. A child key's page shows the configuration it inherits, read-only, under a box with **Edit Parent**, **Detach**, which gives the key its own settings again, and a switch to the settings it had before. See [parent and child API keys](https://n1ed.com/docs/multisite/parent-and-child-api-keys). ### Who can read the configuration Every editor that uses your API key downloads its configuration, so treat it as public: the Unsplash, YouTube and translation keys and the file manager's login you put there can be read by anyone who can open the page with your editor, so give them no more rights than the service needs. The OpenAI key is not sent to the editor: our server uses it to generate texts. Only you can change the configuration: that needs signing in to the Dashboard. ### Visit these manuals to learn how to set up - [Widgets and toolbar configuration](https://n1ed.com/docs/configuration/ui-and-widgets) - [CSS theming: include CSS/JS configuration](https://n1ed.com/docs/configuration/css-theming#config) - [File manager configuration](https://n1ed.com/docs/configuration/file-manager) - [Image editor configuration](https://n1ed.com/docs/configuration/image-editor) - [Bootstrap and Tailwind CSS configuration](https://n1ed.com/docs/configuration/bootstrap-editor) - [Managing Bootstrap custom blocks](https://n1ed.com/docs/configuration/bootstrap-blocks) - [Translator configuration](https://n1ed.com/docs/configuration/translator) - [ChatGPT for text generation](https://n1ed.com/docs/configuration/chat-gpt) - [YouTube API key](https://n1ed.com/docs/configuration/youtube) - [Unsplash access key for stock images](https://n1ed.com/docs/configuration/generate-unsplash-key) - [Passing configuration in the editor's config](https://n1ed.com/docs/configuration/api) --- # Bootstrap Editor settings: Bootstrap 5 and Tailwind CSS > Tell N1ED which framework your site uses (Bootstrap 5, Tailwind CSS 4 or older Bootstrap), where it loads from and how the grid behaves, with API parameters. Source: https://n1ed.com/docs/configuration/bootstrap-editor Section: Configuration > Bootstrap & Tailwind CSS Updated: 2026-11-13 In order to use all the features related to Bootstrap grid, blocks, widgets, and other Bootstrap tools, you need to specify to N1ED which framework your website uses and how. N1ED supports Bootstrap 5 and Tailwind CSS 4, and Bootstrap 4 and 3 for older websites. Configured once, these settings are used on every N1ED load. They are the first section of the **Settings** tab of your [Dashboard](https://n1ed.com/dashboard), named after your framework: ![Framework row of the N1ED Dashboard: Bootstrap 5, Load from CDN, Extra CSS & JS, Show grid on start](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-bootstrap.png) *The framework of your website* ## Framework **Change** next to the name of the framework picks it: Bootstrap 5 or Tailwind 4. Check **Show legacy frameworks** to see Bootstrap 4 and Bootstrap 3 too. ![Choose Bootstrap framework](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-bootstrap-framework.png) *Choose the framework* Changing it affects the content you create from then on, and how N1ED supports the framework's content on your visitors' pages. The content you already have is not converted. With Tailwind CSS, the section also shows the **Theme** of your content: a theme from the DaisyUI collection, or the URL of your own DaisyUI theme. ## Where the framework is loaded from **Load from CDN** loads the framework from a public CDN, which fits a website that uses the stock framework. If your website has its own build, for example Bootstrap with your colors and fonts, click **Change** and enter its URL under **Use Custom CSS**, so the content in the editor looks exactly as on your website: - for Bootstrap, the URL of the folder of the build, the one with the `css` and `js` folders in it (like `https://example.com/assets/bootstrap/`): N1ED loads `css/bootstrap.min.css` from it; - for Tailwind CSS, the URL of the CSS file. ![Load options of the framework: CDN or your own CSS, loading on visitor pages](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-own-bootstrap-build.png) *Your own build of the framework* **Load on visitor pages** adds the framework's CSS to the pages of your website that show the edited content, for websites whose theme does not load the framework itself. It works through `widgets.js`, the small script N1ED adds to the content it saves. Under **Advanced…**, **Use fallback JS for Tabs & Accordions** makes these widgets work on your pages without the framework's own JavaScript. **Extra CSS & JS** adds your own files to the editor and to your pages, see [CSS theming](https://n1ed.com/docs/configuration/css-theming). **Show grid on start** outlines the containers, rows and columns of your content as soon as the editor loads, see [structure highlighting](https://n1ed.com/docs/configuration/ui-and-widgets#structure). ## Advanced options A few options change how N1ED finds and fixes the structure of the framework in your content. **Please do not change them** if you do not know what exactly you do. On older API keys they are under **Advanced → Configure** in the same section; on new ones they are not in the Dashboard, and you can set them in the editor's config (see [Dynamic config](https://n1ed.com/docs/configuration/api)). ## Configuration parameters The keys of a framework's settings start with its name: `bootstrap5.url`, `tailwind4.url`, `bootstrap4.url`, `bootstrap3.url`. Below they are shown for `bootstrap5`. ## Framework Specify the framework you use. - **API parameter:** `framework` - **Type:** `string` - **Default:** `bootstrap4`, new API keys: `bootstrap5` - **Valid values:** `bootstrap5`, `tailwind4`, `bootstrap4`, `bootstrap3` - **Dashboard:** Settings → Framework → Change ## Use your own build `false` loads the framework from the CDN, `true` from the URL below. - **API parameter:** `bootstrap5.useCustomFrameworkUrl` - **Type:** `boolean` - **Default:** `false` - **Dashboard:** Settings → Framework → Load from CDN → Change ## Bootstrap URL URL from where you load your Bootstrap in the theme of your website. You can use the default Bootstrap version from CDN, but specifying here exactly your Bootstrap URL will apply to content preview all your custom styles you could probably include in your own Bootstrap build. - **API parameter:** `bootstrap5.url` - **Type:** `string` - **Default:** `https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/` - **Dashboard:** Settings → Framework → Load from CDN → Change → Use Custom CSS Absolute (recommended) URL of the folder with the Bootstrap build, with `css/bootstrap.min.css` inside. The defaults are Bootstrap 5.3.8, 4.6.2 and 3.4.1 from jsDelivr, and inside the editor N1ED loads them from its own cloud. For `tailwind4` it is the URL of a CSS file, empty by default. ## Include Bootstrap on visitor pages Add the framework's CSS to the pages that show the edited content. - **API parameter:** `include.frameworkCssOnVisitorPage` - **Type:** `boolean` - **Default:** `false`, new API keys: `true` - **Dashboard:** Settings → Framework → Load from CDN → Change → Load on visitor pages ## Fallback JS for Tabs & Accordions Make Tabs and Accordions work on visitor pages without the framework's JavaScript. - **API parameter:** `bootstrap5.useFallbackJsForWidgets` - **Type:** `boolean` - **Default:** `true` - **Dashboard:** Settings → Framework → Load from CDN → Change → Advanced… ## Elements in root The type of elements you have in your content root element. **Please do not change this value** if you do not know what exactly do you do. This parameter is for supporting some tricky configurations when you need to fill content for example with rows only. Contact support if you are not sure, please. - **API parameter:** `bootstrap5.rootContains` - **Type:** `string` - **Default:** `containers` - **Valid values:** `containers`, `rows`, `none` - **Dashboard:** older API keys: Settings → Framework → Advanced ## Detect structure Automatically detect Bootstrap structure. **Please do not change this value** if you do not know what exactly do you do. - **API parameter:** `bootstrap5.detectStructure` - **Type:** `boolean` - **Default:** `true` - **Dashboard:** older API keys: Settings → Framework → Advanced ## Fix Bootstrap structure Fix Bootstrap structure on editor load. This is very important **not to disable this flag** in order to support your existing, probably non-Bootstrap content. This is also a solution from not expected HTML modification your CMS may do on the server side when you save or load content. - **API parameter:** `bootstrap5.fixStructure` - **Type:** `boolean` - **Default:** `true` - **Dashboard:** older API keys: Settings → Framework → Advanced ## Fix Bootstrap structure on new content too Keep all the content inside the grid: an empty content gets a block with one full-width column to write in. - **API parameter:** `bootstrap5.fixStructureAlways` - **Type:** `boolean` - **Default:** `false` - **Dashboard:** older API keys: Settings → Framework → Advanced ## Protect the grid Keep the containers and rows of your content from being deleted or broken while you type: only the content of the columns is editable as text, the grid is changed with the block and grid tools. - **API parameter:** `bootstrap5.protectContent` - **Type:** `boolean` - **Default:** `true` - **Dashboard:** older API keys: Settings → Framework → Advanced ## Tailwind CSS theme The DaisyUI theme of the content with Tailwind CSS 4, or the URL of your own theme: `useCustomThemeUrl: true` loads the theme from `urlThemeCss` instead of the one named in `theme`. - **API parameter:** `tailwind4.theme` - **Type:** `string` - **Default:** `light` - **Dashboard:** Settings → Framework → Theme → Change - **API parameter:** `tailwind4.useCustomThemeUrl` - **Type:** `boolean` - **Default:** `false` - **Dashboard:** Settings → Framework → Theme → Change → Use Custom Theme - **API parameter:** `tailwind4.urlThemeCss` - **Type:** `string` - **Default:** `""` - **Dashboard:** Settings → Framework → Theme → Change → Use Custom Theme --- # Theming your content with CSS > Add the stylesheet of your site to N1ED so the editing area shows your real fonts, colors and Bootstrap build, and add CSS or JS to your visitors' pages. Source: https://n1ed.com/docs/configuration/css-theming Section: Configuration > Extra CSS & JS Updated: 2026-09-28 It is important to enable your content managers to write new content while visualizing the styles applied to that content. Your website can define fonts, colors, backgrounds, margins, and other elements for its visitors. N1ED will incorporate these styles within the editor box as well. To achieve this, open the **Settings** tab of your [Dashboard](https://n1ed.com/dashboard) and click **Change** next to **Extra CSS & JS** in the **Framework** row. Enter the URL of the CSS file of your website under **Inside the Editor**. Once this step is completed, N1ED will utilize this theme as the styling within the WYSIWYG editor. ![Specify URL of CSS-file with the content theme to apply on your website](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-theming.png) Each list takes as many URLs as you need: a new empty field appears under the last one. Use absolute URLs. - **Inside the Editor:** CSS and JavaScript files loaded into the editing area, together with your framework. JavaScript is for deep tuning only, in most cases you do not need to include scripts into your content area. - **On Visitor Pages:** CSS and JavaScript files added to the pages of your website that show the edited content. They are loaded by `widgets.js`, the small script N1ED adds to the content it saves, so they reach your pages even when your website's theme does not load them. ## Bootstrap support In case you are utilizing your own Bootstrap theme, specify the URL of your Bootstrap build instead of the one from the CDN: **Change** next to **Load from CDN**, then **Use Custom CSS**. For Bootstrap this URL points to the directory where the styles and scripts are stored, the one with the `css` and `js` folders in it. See [Bootstrap Editor settings](https://n1ed.com/docs/configuration/bootstrap-editor#url). ![New Bootstrap theme for your website](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-own-bootstrap-build.png) ## Configuration parameters ## CSS in the editor Absolute URLs of your CSS files (theme stylesheets), loaded into the editing area. - **API parameter:** `include.extraCssInEditor` - **Type:** `string[]` - **Default:** `[]` - **Dashboard:** Settings → Framework → Extra CSS & JS → Inside the Editor → Extra CSS ## JS in the editor Absolute URLs of JavaScript files loaded into the editing area. - **API parameter:** `include.extraJsInEditor` - **Type:** `string[]` - **Default:** `[]` - **Dashboard:** Settings → Framework → Extra CSS & JS → Inside the Editor → Extra JS ## CSS on visitor pages Absolute URLs of CSS files added to the pages that show the edited content. - **API parameter:** `include.extraCssOnVisitorPage` - **Type:** `string[]` - **Default:** `[]` - **Dashboard:** Settings → Framework → Extra CSS & JS → On Visitor Pages → Extra CSS ## JS on visitor pages Absolute URLs of JavaScript files added to the pages that show the edited content. - **API parameter:** `include.extraJsOnVisitorPage` - **Type:** `string[]` - **Default:** `[]` - **Dashboard:** Settings → Framework → Extra CSS & JS → On Visitor Pages → Extra JS --- # Configuring UI, toolbar and widgets > Pick the Auto, Auto (old) or Manual toolbar for TinyMCE and CKEditor, hide, rename or add tooltips to its buttons, set widget templates and the UI mode of N1ED. Source: https://n1ed.com/docs/configuration/ui-and-widgets Section: Configuration > UI, toolbar and widgets Updated: 2026-11-13 These settings are in the **N1ED** section of your [Dashboard](https://n1ed.com/dashboard)'s **Settings** tab: the **Toolbar** row for the toolbar and the widgets, **UI mode** and **Tag editing** for the rest of the editor. ## Toolbar modes There are three toolbar modes, picked with **Toolbar mode** in the **Toolbar** row: - [Modern](https://n1ed.com/docs/configuration/ui-and-widgets#modern-toolbar), **Auto** in the Dashboard: the one new API keys start with; - [Classic](https://n1ed.com/docs/configuration/ui-and-widgets#classic-toolbar), **Auto (old)**: the previous version of the automatic toolbar; - [Manual](https://n1ed.com/docs/configuration/ui-and-widgets#manual-toolbar): you list the buttons yourself. Under the switch is a live copy of the toolbar in the chosen mode. Click any button of it to set up that button. ### Modern toolbar ![Auto toolbar in the N1ED Dashboard](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-auto-toolbar.png) The modern toolbar, **Auto** in the Dashboard, fills the toolbar of your TinyMCE or CKEditor with the buttons of N1ED, so you do not change the toolbar in the editor's own config. The buttons are grouped into sections: - Blocks and the grid: add a block, the Grid mode, and save, move, duplicate or delete the selected block - Widgets and related tools: add a widget, edit, save or delete the selected one, add text before or after it - Tools for working with images and files: upload, browse, edit an image - Services: AI text generation and the translator - Editor settings: Configure, Info and Maximize For swift access to widgets, the second line has a button for each widget: check **Show widgets line** to show it, and hide single widgets there by clicking them. A greyed-out button in the copy is a hidden one. Click a button to hide or show it, change its title, or add a tooltip. The sidebar settings and the templates of widgets are in the same dialog, see [Widget templates](https://n1ed.com/docs/configuration/ui-and-widgets#widget). ### Classic toolbar ![Auto (old) toolbar in the N1ED Dashboard](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-classic-toolbar.png) The classic toolbar, **Auto (old)** in the Dashboard, is the automatic toolbar N1ED had before. It stays for the websites that use it, and we recommend switching to Auto. It has the widget buttons, and on its right the top buttons: "Configuration", "Bootstrap Editor" for seamless transitioning into the grid mode for block structuring, and "Maximize" for full-screen editing. The Bootstrap quick panel at the bottom left adds and rearranges blocks without switching to the 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. Click a top button or the quick panel to set it up the same way. ### Manual toolbar With the manual toolbar, N1ED adds no buttons by itself, and you customize your editor's toolbar according to your preferences: add the buttons you need to the toolbar in the editor's own config. **See buttons list** shows every button you can use, with the name to put there: ![Buttons list](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-manual-toolbar.png) For example, in TinyMCE: ```js tinymce.init({ selector: "#editor", plugins: "n1ed", toolbar: "undo redo | bold italic | BlockAdd Grid | Upload Flmngr ImgPen | Image YouTube Table | Configure Maximize", }); ``` In CKEditor 4 the same names go into `config.toolbar`. The buttons, with their default hints: | Section | Buttons | |---|---| | Widgets | `AddWidget` Add widget, `EditWidget` Edit widget, `DeleteWidget` Delete widget, `SaveWidget` Save as custom widget, `AddTextUp` Add text before, `AddTextDown` Add text after | | Widgets to insert | `Image`, `ImagePreview2` image preview, `ImageGallery2` gallery, `Carousel`, `FontAwesome` and `BootstrapIcons` icons, `YouTube`, `Video` video file, `Table`, `Link`, `Anchor`, `Button`, `Tabs`, `Accordion`, `Alert`, `Badge`, `Header`, `IFrame` embedded page, `HTML` snippet, `CustomTemplates` custom widgets, `Placeholder`, `JoomlaReadMore` (Joomla only) | | Blocks | `Grid`, `BlockAdd` Add block, `BlockAddUp` Add block before, `BlockSave` Save block, `BlockMoveUp`, `BlockMoveDown`, `BlockDuplicate`, `BlockDelete` | | File Manager | `Upload`, `Flmngr` Browse, `ImgPen` Edit image | | Translator | `Translator` Translate selected text, `TranslatorReverse` Reverse direction, `TranslatorConf` Translation options | | Text generation | `Txt42` GPT Text, `Txt42Less` Less GPT text, `Txt42More` More GPT text | | UI | `Info`, `Configure`, `Maximize` | On Joomla there is one more, `JoomlaReadMore`, the "Read more" cut. ## 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: - **Show on the toolbar** and **Show on the sidebar**: where the widget can be inserted from; - **Hint** and, for buttons with a label, **Title**; - the template of the widget: the classes, styles and attributes every new widget of this kind gets. The Image Preview widget, for example, is created 240 pixels high by default; - the widget's own options, such as the [YouTube API key](https://n1ed.com/docs/configuration/youtube) of the YouTube widget. ![Settings of the Image Preview button: visibility, hint and template](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-toolbar.png) A template applies to the widgets you insert from then on, not to the ones already in your content. ## 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. ![Show grid on start, in the Framework row of the N1ED Dashboard](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-structure-highlighting.png) ### The usage options - **Automatically on load:** check **Show grid on start** in the **Framework** row of your framework's section to have the outlines on as soon as the editor loads. - **Manual activation:** uncheck it, and turn the outlines on precisely when required with the button at the left end of the editor's status bar. - **Highlight Bootstrap structure:** the **Grid** button (or "Bootstrap Editor" on the Auto (old) toolbar) switches to the grid mode, which shows only the containers, rows and columns, to work with the layout. - **Highlight any structure:** the outlines of the normal mode show every element of the content, the grid and the text alike. ## Advanced options You can change the advanced UI settings for the editor view to suit your preferences. The **UI mode** row picks how the editor behaves on your page, and **Tag editing** the tools for classes, styles and attributes. ![UI mode and Tag editing rows of the N1ED Dashboard](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-ui.png) - **Classic mode:** use the editor as usual; it is maximized only with its Maximize button. Two options: - **Manual sidebar opening:** the sidebar with the settings of the selected element opens only with the "Edit widget" button (or a double click), not as soon as an element is selected. Do not hide the "Edit widget" button on the toolbar in combination with this setting. - **Sidebar is on the left:** `true` — position the sidebar to the left of the editor, `false` — to the right. - **Grid mode:** the editor is covered, and a click anywhere on it opens it maximized in the grid mode, to work with blocks. - **Maximized mode:** the same, but it opens maximized in the normal mode. - Grid and Maximized modes have two more options: - **Work only in fullscreen mode**, **Full screen editing only** in the Dashboard: the editor is covered again every time you leave the full screen, so it is only ever edited maximized. Without it, the cover is gone after the first time. Maximized, you can also switch the screen size to check how responsive your content is. - **Style editor with cover:** a click-to-edit label and a tint over the editor on hover. Unchecked, the cover is invisible. - **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. - **Autocomplete classes for all widgets**, **Custom autocompletion classes** in the Dashboard: here, you can add your theme classes, one per line, for the autocomplete feature in Tag options. The option **Show structure on the sidebar** is gone: the breadcrumbs under the content show the structure of the selected element. ## Configuration parameters Each setting above is a key in the configuration of your API key. You can also set it in the editor's own config for a particular page or user, see [Dynamic config](https://n1ed.com/docs/configuration/api). A value set there overrides the Dashboard. ## Fullscreen mode only The UI mode of the editor. `classic` is the Classic mode, `grid_once` and `fullscreen_once` are the Grid and Maximized modes, `grid` and `fullscreen` are the same with **Full screen editing only**. Inline editors are always in the classic mode. - **API parameter:** `ui.mode` - **Type:** `string` - **Default:** `classic` - **Valid values:** `classic`, `grid_once`, `fullscreen_once`, `grid`, `fullscreen` - **Dashboard:** Settings → N1ED → UI mode ## Show sidebar only when maximized In the Classic mode, `true` opens the sidebar only with the "Edit widget" button or a double click, `false` opens it as soon as an element is selected. Maximized, the sidebar is always there. - **API parameter:** `ui.showSidebarOnlyInFullScreen` - **Type:** `boolean` - **Default:** `true`, new API keys: `false` - **Dashboard:** Settings → N1ED → UI mode → Classic mode → Manual sidebar opening ## Sidebar is on the left Sidebar position in normal mode. - **API parameter:** `ui.leftSidebar` - **Type:** `boolean` - **Default:** `true` - **Dashboard:** Settings → N1ED → UI mode → Sidebar is on the left ## Cover style The look of the cover over the editor in the Grid and Maximized modes. - **API parameter:** `ui.themeCovers` - **Type:** `string` - **Default:** `classic` - **Valid values:** `classic`, `transparent` - **Dashboard:** Settings → N1ED → UI mode → Style editor with cover ## Top buttons The buttons on the right of the **Auto (old)** toolbar. With the Auto toolbar, Configure and Maximize are ordinary buttons of the toolbar, set up in `ui.toolbarButtons` below. - **API parameter:** `ui.showFullScreenButton` - **Type:** `boolean` - **Default:** `true` - **Dashboard:** Settings → N1ED → Toolbar, Auto (old): click the Maximize button "Maximize" button visibility - **API parameter:** `ui.fullScreenButtonTitle` - **Type:** `string` - **Default:** `Maximize` - **Dashboard:** the same dialog Fullscreen button title in normal mode - **API parameter:** `ui.fullScreenExitButtonTitle` - **Type:** `string` - **Default:** `OK` - **Dashboard:** the same dialog Fullscreen button title in maximized mode - **API parameter:** `ui.showBootstrapEditorButton` - **Type:** `boolean` - **Default:** `true` - **Dashboard:** Settings → N1ED → Toolbar, Auto (old): click the Bootstrap Editor button Bootstrap Editor button visibility - **API parameter:** `ui.bootstrapEditorButtonTitle` - **Type:** `string` - **Default:** `Bootstrap Editor` - **Dashboard:** the same dialog Bootstrap Editor button title - **API parameter:** `ui.gridButtonTitle` - **Type:** `string` - **Default:** `Grid` - **Dashboard:** the same dialog Grid button title ("Bootstrap Editor" button in maximized mode) - **API parameter:** `ui.showConfButton` - **Type:** `boolean` - **Default:** `true` - **Dashboard:** Settings → N1ED → Toolbar, Auto (old): click the Configure button Configuration button visibility - **API parameter:** `ui.confButtonTitle` - **Type:** `string` - **Default:** `""` - **Dashboard:** the same dialog Configuration button title ## Bootstrap quick panel The panel for adding and moving blocks at the bottom left of the Auto (old) toolbar's editor. - **API parameter:** `ui.showBootstrapEditorQuickPanel` - **Type:** `boolean` - **Default:** `true` - **Dashboard:** Settings → N1ED → Toolbar, Auto (old): click the quick panel ## 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 set it to `false`, only the buttons you add to the editor's toolbar yourself are displayed: the [Manual](https://n1ed.com/docs/configuration/ui-and-widgets#manual-toolbar) mode. 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` - **Dashboard:** Settings → N1ED → Toolbar → Toolbar mode ## Automatic toolbar version `2` is the Auto toolbar, `1` Auto (old). - **API parameter:** `ui.autoToolbarVersion` - **Type:** `number` - **Default:** `1`, new API keys: `2` - **Valid values:** `1`, `2` - **Dashboard:** Settings → N1ED → Toolbar → Toolbar mode ## Widgets line The second line of the Auto toolbar, with a button for each widget. - **API parameter:** `ui.showWidgetsOnAutoToolbar` - **Type:** `boolean` - **Default:** `false`, new API keys: `true` - **Dashboard:** Settings → N1ED → Toolbar → Show widgets line ## Auto toolbar lines The Auto (old) 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` - **Default:** `0` - **Valid values:** `0`, `1`, `2` - **Dashboard:** no control, [set it in the editor's config](https://n1ed.com/docs/configuration/api) `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` - **Default:** `0` - **Valid values:** `0`, `1`, `2` - **Dashboard:** no control, [set it in the editor's config](https://n1ed.com/docs/configuration/api) `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 [above](https://n1ed.com/docs/configuration/ui-and-widgets#manual-toolbar). - **API parameter:** `ui.toolbarButtons` - **Type:** `{[name: string]: {title?: string, hint?: string, isVisible?: boolean}}` - **Dashboard:** Settings → N1ED → Toolbar: click a button The Auto toolbar reads the same fields with a `_v2` suffix: `title_v2`, `hint_v2` and `isVisible_v2`, so a button can look different there and in Auto (old). Place into this object only the buttons whose properties you want to override, for example: ```js ui: { toolbarButtons: { ImgPen: { title_v2: "Edit photo" }, Translator: { isVisible: false, isVisible_v2: false } } } ``` ## Widget templates What every new widget of a kind gets: its classes, its styles and its attributes. Most widgets have one `template`, Tabs and Accordion have one for each of their parts. - **API parameter:** `widgets..template` - **Type:** `{classes: string[], styles: {[property: string]: string}, attributes: {[name: string]: string}}` - **Dashboard:** Settings → N1ED → Toolbar: click the widget's button For example, `widgets.Image.template` is `{classes: ["img-fluid"], styles: {width: "auto", height: "auto"}, attributes: {alt: ""}}` by default, and `widgets.Table.template` gives new tables the `table` class and 100% width. ## Widget on the sidebar Whether the widget can be inserted from the sidebar. - **API parameter:** `widgets..enabled` - **Type:** `boolean` - **Default:** `true` - **Dashboard:** Settings → N1ED → Toolbar: click the widget's button → Show on the sidebar ## Expand Tag options Open the Tag options of the sidebar expanded. - **API parameter:** `ui.expandTagOptions` - **Type:** `boolean` - **Default:** `false` - **Dashboard:** Settings → N1ED → Tag editing → Expand tag options on the sidebar by default ## Autocomplete classes for all widgets These classes will be available in autocomplete dropdown when you add classes to some widget. You can add there some class names from your website theme which you use to style content. - **API parameter:** `ui.autoCompleteClasses` - **Type:** `string[]` - **Default:** `[]` - **Dashboard:** Settings → N1ED → Tag editing → Custom autocompletion classes --- # Create YouTube API key > Create a Google Cloud project, enable YouTube Data API v3 and paste the key into N1ED to search and embed videos in the editor. Source: https://n1ed.com/docs/configuration/youtube Section: Configuration > YouTube API key Updated: 2026-10-30 YouTube is a popular online video-sharing platform where users can upload, view, and share videos. N1ED provides the functionality to embed YouTube videos on your website and facilitates video searches based on keywords or video URLs using the YouTube Data API. To enable this feature, you must generate your personal API key. In our comprehensive guide, we provide step-by-step instructions on how to create your free API key. ### 1. Create a Google Cloud Platform (GCP) Project - Go to the [Google Cloud Console](https://console.cloud.google.com/). - Click on the project drop-down and create a new project. If you already have a project, you can use it instead. ![Create project in Google console](https://n1ed.com/img/screenshots/docs/widgets/youtube/google-console-create-project.png) ### 2. Enable the YouTube Data API v3 - In the Google Cloud Console, navigate to the "APIs & Services" > "Library" section. - Search for "YouTube Data API v3" and click on it. - Click the "Enable" button. ![Enable YouTube Data API](https://n1ed.com/img/screenshots/docs/widgets/youtube/google-console-youtube-api.png) ### 3. Create API Key - In the Google Cloud Console, navigate to the "APIs & Services" > "Credentials" section. - Click the "Create credentials" button and select "API Key." - Your API key will be generated. ![Create API key for YouTube service](https://n1ed.com/img/screenshots/docs/widgets/youtube/google-console-create-api-key.png) ### 4. Use the API Key Now that you have your API key, add it to N1ED: - Open your [Dashboard](https://n1ed.com/dashboard), go to the **Settings** tab and find the **Toolbar** row of the **N1ED** section. - Click the YouTube button in the copy of your toolbar there (its hint is "Insert YouTube video"), enter the API key in the **YouTube API key** field of the window that opens, click **OK** and save the configuration. ![Specify YouTube API key for the YouTube widget](https://n1ed.com/img/screenshots/docs/widgets/youtube/use-youtube-api-key.png) The same field is in **Status** → **3rd party services**. The window also has the defaults for new videos: whether they are created in a responsive 16:9 container, whether they use YouTube's privacy mode, and **Limit calls to YouTube API**, which skips the checks of a video when you edit it. Our server searches YouTube with your key, so it only works when it is saved in the Dashboard: a key passed in the editor's own config is not used. Without a key you can still insert a video by pasting its link, but not search for one by words. In the Google Cloud Console, restrict the key to the YouTube Data API v3. Do not restrict it to your website's address: some of the requests come from our server, not from your website. --- # Editing Image42 image editor configuration > Set up the Image42 image editor of N1ED in the Dashboard: its tools, your colors, crop ratios, fonts, stickers and shapes, and the resize limits. Source: https://n1ed.com/docs/configuration/image-editor Section: Configuration > Image Editor Updated: 2026-11-12 Image42 (formerly ImgPen) is the image editor of N1ED: it opens from the **Edit** button of the file manager and the toolbar. Its settings are in the **Image Editor** section of your [Dashboard](https://n1ed.com/dashboard)'s **Settings** tab, and all of them are part of the Premium plan. - **Version:** the first row of the section switches between the current Image42 (**v2**, the default) and the previous one (**v1**), which stays available for a while until it is retired. The change applies from the next load of the editor. ![Image Editor section of the N1ED Dashboard](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-image-editor.png) *Image Editor settings* - **Tools:** click a tool to hide or show it in the image editor. - **Colors**, **Crop ratios**, **Fonts**, **Stickers** and **Shapes:** add your own to the ones the editor has. Once you have added some colors, crop ratios, stickers or shapes, **Remove default …** leaves only yours. - **Resize:** the smallest and the largest size the Resize tool gives an image. - **New text title:** the text of a new caption. - **Saving → JPEG quality:** the quality the **Save image** dialog starts at. A set of options used to customize Image42 image editor is listed below. You can also set them in the editor's own config, see [Dynamic config](https://n1ed.com/docs/configuration/api). ## Tools The list of tools will be shown on the main Image42 toolbar, in this order. - **API parameter:** `ImgPen.tools` - **Type:** `string[]` - **Valid values:** `crop`, `resize`, `corners`, `filter`, `draw`, `text`, `shapes`, `stickers` - **Dashboard:** Settings → Image Editor → Tools All of them by default. A tool you leave out is not shown. ## Custom colors Customize the color palette with your own website colors with this option. They are added after the default colors. - **API parameter:** `ImgPen.colors` - **Type:** `string[]` - **Default:** `null` - **Dashboard:** Settings → Image Editor → Colors → Add custom color Colors in HEX notation (like `#54b9ff`) ## Remove default colors Check this checkbox to clear the default colors list and use only custom one. - **API parameter:** `ImgPen.removeDefaultColors` - **Type:** `boolean` - **Default:** `false` - **Dashboard:** Settings → Image Editor → Colors → Remove default colors ## Minimum and maximum resize widths and heights The Resize tool keeps images between these sizes, and changes a size you type to the nearest allowed one. Cropping is not limited by them. - **API parameter:** `ImgPen.resizeMinWidth` - **Type:** `number` - **Dashboard:** Settings → Image Editor → Resize → Minimum In pixels - **API parameter:** `ImgPen.resizeMinHeight` - **Type:** `number` - **Dashboard:** Settings → Image Editor → Resize → Minimum In pixels - **API parameter:** `ImgPen.resizeMaxWidth` - **Type:** `number` - **Dashboard:** Settings → Image Editor → Resize → Maximum In pixels - **API parameter:** `ImgPen.resizeMaxHeight` - **Type:** `number` - **Dashboard:** Settings → Image Editor → Resize → Maximum In pixels ## Crop ratios If you need to adopt all images inside your content to some predefined aspect ratios, define them for crop tools too. They are added after the default ones. - **API parameter:** `ImgPen.cropRatios` - **Type:** `{w: number, h: number}[]` - **Default:** `null` - **Dashboard:** Settings → Image Editor → Crop ratios → Add custom crop ratio In abstract units: only the proportion matters, `{w: 16, h: 9}` is 16:9. ## Remove default crop ratios Check this checkbox to clear the default crop ratios list and use only custom one - **API parameter:** `ImgPen.removeDefaultCropRatios` - **Type:** `boolean` - **Default:** `false` - **Dashboard:** Settings → Image Editor → Crop ratios → Remove default crop ratios ## Fonts If your website uses some custom fonts and you wish to add captions on your images with these fonts, add links to the fonts here. They are added after the default fonts. - **API parameter:** `ImgPen.fonts` - **Type:** `{family: string, url: string}[]` - **Default:** `null` - **Dashboard:** Settings → Image Editor → Fonts → Add custom font Use absolute URLs (`https://…`): a font from a path like `/fonts/my.woff2` is not loaded. The server of the font has to allow loading it from other websites (CORS). An empty `url` is a font the browser already has. ## New text title The text of a caption just added to an image. - **API parameter:** `ImgPen.defaultText` - **Type:** `string` - **Dashboard:** Settings → Image Editor → Fonts → New text title ## Stickers Custom stickers will be added to the special sticker category in the Image42 dialog. - **API parameter:** `ImgPen.stickers` - **Type:** `string[]` - **Default:** `null` - **Dashboard:** Settings → Image Editor → Stickers → Add custom sticker Array of URLs to PNG or SVG stickers: absolute (`https://…`), or relative to the page the editor runs on. The server of a sticker has to allow loading it from other websites (CORS). ## Remove default stickers Check this checkbox to clear the default stickers list and use only custom one. - **API parameter:** `ImgPen.removeDefaultStickers` - **Type:** `boolean` - **Default:** `false` - **Dashboard:** Settings → Image Editor → Stickers → Remove default stickers ## Shapes You can extend the list of shapes by typing SVG paths in this section. - **API parameter:** `ImgPen.shapes` - **Type:** `{title: string, path: string, freeScaling: boolean}[]` - **Default:** `null` - **Dashboard:** Settings → Image Editor → Shapes → Add custom shape `path` is the data of an SVG path in any coordinate space, like `M 10 10 L 90 10 L 50 90 Z` (a triangle): the shape is placed by its own bounds, a quarter of the picture across. `freeScaling: false` keeps the proportions of the shape when it is resized. ## Remove default shapes Check this checkbox to clear the default shapes list and use only custom one. - **API parameter:** `ImgPen.removeDefaultShapes` - **Type:** `boolean` - **Default:** `false` - **Dashboard:** Settings → Image Editor → Shapes → Remove default shapes ## JPEG quality When you save an edited image, the **Save image** dialog asks for its name and its format, PNG or JPEG (it starts with the format of the original, or PNG for other formats). For a JPEG it also asks for the quality, and this is the value it starts at. You can still change it for each image. - **API parameter:** `ImgPen.jpegQuality` - **Type:** `number` - **Default:** `95` - **Dashboard:** Settings → Image Editor → Saving → JPEG quality From 1 to 100 --- # Create OpenAI API Key > Step-by-step guide to enabling ChatGPT service in N1ED. Source: https://n1ed.com/docs/configuration/chat-gpt Section: Configuration > OpenAI API key Updated: 2026-11-13 ## Why do I need an OpenAI API Key? The OpenAI service unlocks a multitude of powerful AI capabilities, one of which is ChatGPT. The ChatGPT plugin (Txt42) is an extension that incorporates ChatGPT's features into text editors such as CKEditor and TinyMCE. With this plugin, users gain the ability to harness AI-generated text. To unlock the functionality of the OpenAI service through the Txt42 ChatGPT plugin, users are required to obtain an OpenAI API key. ## How do I get an OpenAI API Key? To get your own OpenAI API key, follow the steps below: ### 1. Create an OpenAI account Visit the [OpenAI website](https://openai.com/) and log in. ![Official OpenAI website](https://n1ed.com/img/screenshots/docs/widgets/chat-gpt/login.png) If you don't already have an OpenAI account you'll need to sign up. ![Creating OpenAI account](https://n1ed.com/img/screenshots/docs/widgets/chat-gpt/create-account.png) ### 2. Navigate to the API section Once logged in, navigate to the API section or dashboard on the OpenAI website. This is where you can create and manage your API keys. ![OpenAI dashboard](https://n1ed.com/img/screenshots/docs/widgets/chat-gpt/api-section.png) ### 3. Generate a new API key Go to the 'API keys' tab and click on the 'Create a new secret key' button. In the opened window, enter a custom name for the key and confirm the key creation. That's it – your API key is generated and ready for use. ![OpenAI API keys tab](https://n1ed.com/img/screenshots/docs/widgets/chat-gpt/api-key-tab.png) ![Generate a new OPenAI API key](https://n1ed.com/img/screenshots/docs/widgets/chat-gpt/create-api-key.png) ### 4. Set up billing OpenAI charges for the usage of its API on a usage basis. To enable your plugin, you'll need to set up a payment method for billing. To do this, visit the 'Billing' tab. ![OpenAI billing](https://n1ed.com/img/screenshots/docs/widgets/chat-gpt/openai-billing.png) ### 5. Connect Txt42 with OpenAI Now, to connect the Txt42 plugin with OpenAI, open your [Dashboard](https://n1ed.com/dashboard), go to the **Settings** tab and enter the secret key in the **OpenAI (ChatGPT)** field of the **Txt42 (Chat GPT)** section, then save the configuration. The same field is in **Status** → **3rd party services**. ![OpenAI API key in the Txt42 section of the N1ED Dashboard](https://n1ed.com/img/screenshots/docs/widgets/chat-gpt/txt42-configure.png) The texts are generated by our server, which calls OpenAI with your key. So the key has to be saved in the Dashboard (a key passed in the editor's own config is not used), and it is never sent to the browsers of your users. The GPT buttons of the toolbar ask for it until it is set. --- # Translator configuration > Choose Google or Yandex as the translation service of the N1ED Translator, set its API key and the default languages, and show its buttons on the toolbar. Source: https://n1ed.com/docs/configuration/translator Section: Configuration > Translator Updated: 2026-11-13 The Translator translates the selected text of your content right in the editor, with Google Translate or Yandex Translate. Its settings are in the **Translate** section of your [Dashboard](https://n1ed.com/dashboard)'s **Settings** tab: the service, its API key, and the languages it starts with. The Translator is a part of the Premium plan. ![Translate section of the N1ED Dashboard: service, API keys, languages](https://n1ed.com/img/screenshots/docs/widgets/config-editor/config-editor-translator.png) *Configuring Translator* The Translator's buttons are hidden on the toolbar of new API keys. To show them, click **Translate** in the copy of the toolbar in the **N1ED → Toolbar** row and check **Show on the toolbar**, and do the same for the two buttons next to it (see [UI, toolbar and widgets](https://n1ed.com/docs/configuration/ui-and-widgets#modern-toolbar)). When you use the Translator you can change the languages on the fly right from its buttons: one swaps the two languages, the other one opens the languages for the rest of the session. What you set here is where every session starts. The translation is requested from the browser of the user who edits, so the API key is visible to anyone who can open the editor page. For Google, restrict the key to the Cloud Translation API and to the address of your website in the Google Cloud Console. ## Translation API provider Specify which service will be used to translate texts in your content. They have a bit different language sets and terms of use. Google uses the Cloud Translation API (Basic), Yandex the Yandex Translate API v1.5 with its `trnsl.` keys. Write the value in lower case. - **API parameter:** `Translator.provider` - **Type:** `string` - **Default:** `yandex` - **Valid values:** `google`, `yandex` - **Dashboard:** Settings → Translate → Services → Default translation service ## Yandex API key API key for using Yandex Translate engine. [Get a Yandex API key](https://yandex.com/dev/translate/) - **API parameter:** `Translator.yandexAPIKey` - **Type:** `string` - **Dashboard:** Settings → Translate → Services → Yandex Translate API key A configuration without this key uses our demo key, and the Dashboard shows it in the field. A field you empty stays empty. ## Google API key API key for using Google Translate engine. [Get a Google API key](https://console.cloud.google.com/) - **API parameter:** `Translator.googleAPIKey` - **Type:** `string` - **Default:** `""` - **Dashboard:** Settings → Translate → Services → Google Translate API key ## Source language Default source language Translator will use on load. Use a language code here. The two services use a few different codes (Google `zh-CN`, `iw`, Yandex `zh`, `he`): pick them in the Dashboard, which lists the codes of the service you chose. - **API parameter:** `Translator.langFrom` - **Type:** `string` - **Default:** `en` - **Dashboard:** Settings → Translate → Languages → From ## Target language Default target language Translator will use on load. Use a language code here. - **API parameter:** `Translator.langTo` - **Type:** `string` - **Default:** `de` - **Dashboard:** Settings → Translate → Languages → To --- # Managing Bootstrap custom blocks > Save a Bootstrap block from the editor to your own library, insert it on any page, and sort, copy or share your blocks between websites in the Dashboard. Source: https://n1ed.com/docs/configuration/bootstrap-blocks Section: Configuration > Custom blocks Updated: 2026-09-27 A custom block is a part of your page (a Bootstrap container or row with everything inside it) saved to your own library. Build a section once, save it, and insert it on any other page: a header, a row of cards, a call to action. The library belongs to the API key, so every editor of the website sees the same blocks, and you can share them with your other websites. Step-by-step guides with more pictures: [Bootstrap custom block templates](https://n1ed.com/how-to/bootstrap/templates/bootstrap-custom-block-templates). ## Save a block Select the block in the editor and press the star button (**Save block**): it is on the toolbar and on the panel of the selected block. The **Save block** dialog opens: - **Title**, optional; - **Category**: the collection of your library the block goes to, and **+ New category** starts a new one; - **Update existing block** or **Save as new block**, when the block came from your library: overwrite the block in the library, or keep it and save this one next to it. N1ED makes the screenshot of the block by itself: it is the preview you pick the block by later. ![Save block dialog of N1ED with the options to update the existing block or save it as a new one](https://n1ed.com/img/how-to/bootstrap/templates/update-bootstrap-custom-template.png) *Saving a block that came from the library* Saving a block needs your full 24-character API key; an old 8-character key cannot save one. More: [create a block](https://n1ed.com/how-to/bootstrap/templates/how-to-create-bootstrap-block-template), [update a block](https://n1ed.com/how-to/bootstrap/templates/how-to-update-bootstrap-block-template). ## Insert a block The **Block** button opens the gallery of blocks: your own categories come first, then the blocks other websites share with this one, then the grid and the built-in blocks. Click a block to insert it. More: [insert a custom block](https://n1ed.com/how-to/bootstrap/templates/how-to-use-bootstrap-block-templates). Inserting blocks from the gallery (your own, the shared ones, the built-in blocks and the grid) and managing the library are part of the Premium plan. Saving is not: you can build your library first. ### Leave room for other content: Placeholder If the same block should hold a different picture or video on every page, put a **Placeholder** widget into it before you save it. After the block is inserted, the placeholder's **Set widget** turns it into an image, a video, an icon or any other widget. The Placeholder has no button on the toolbar by default: insert it from the list of the **Widget** button. More: [Placeholder](https://n1ed.com/how-to/placeholder). ## Manage your library The **Blocks** tab of your [Dashboard](https://n1ed.com/dashboard) shows the library of the selected website. The gear button of the editor opens the Dashboard on this tab. - **Drag** a block to change its place, in its category or to another one. - **Edit** changes the title and the category of the block. The block itself is changed from the editor: insert it, change it, and save it with **Update existing block**. - **Copy** puts a copy of the block into the library of another website of your account. The copy is independent: a later change to one does not reach the other. - **Delete** removes the block from the library. The pages where it was inserted keep their content. - The pencil next to the categories renames, reorders, adds and deletes categories. A category must be empty to be deleted. The same controls, except Copy, are in the gallery of the **Block** button, so the editor's users can sort the library without the Dashboard. More: [organize blocks](https://n1ed.com/how-to/bootstrap/templates/how-to-manage-bootstrap-block-templates). ![Edit Block dialog of N1ED with the title and the category of a custom block](https://n1ed.com/img/how-to/bootstrap/templates/manage-bootstrap-block-template-item.png) *Changing the title and the category of a block* ## Sharing block templates When you run several websites with similar markup, build the blocks once and give them to the other websites. There are two ways: - **Copy** one block to another website, as above. The copy belongs to that website, which can change it. - **Share** whole categories with a sharing rule. The blocks stay in one library: when you change them, every website sees the change, and the other websites can insert them but not change them. A sharing rule is made in the **Block Sharing** section of the **Blocks** tab: **+ Add Rule**, then the **Block categories to share** and the **Destination websites**: **All websites** of your account, including the ones you add later, or **Selected** ones. With **Include children**, a selected website's [child API keys](https://n1ed.com/docs/multisite/parent-and-child-api-keys) get the blocks too. Sharing is part of the Premium plan, and it waits for the first block in the library. More: [share blocks across websites](https://n1ed.com/how-to/bootstrap/templates/how-to-share-bootstrap-block-templates). ![Block sharing rule dialog of the N1ED Dashboard](https://n1ed.com/img/how-to/bootstrap/templates/share-bootstrap-block-templates.png) *A sharing rule: which categories, and which websites get them* On the other websites the shared categories appear in the gallery of the **Block** button, marked **Blocks from shared collection**. ![Blocks shared from another website in the N1ED block gallery](https://n1ed.com/img/how-to/bootstrap/templates/bootstrap-imported-block-templates.png) *Shared blocks in the gallery of another website* --- # API > Entry point for developers who need N1ED configuration calculated per user, or who call the Flmngr file manager from their own code. Source: https://n1ed.com/docs/api Section: For developers Updated: 2026-09-28 Sometimes you need to implement something special for your user. Maybe you would like to have dynamic configuration of your N1ED on the fly (based on current user) or want to call File Manager from the code to create some special field outside of an editor. This section is for all developers who wish to make seamless integration with their CMS. - [Dynamic config](https://n1ed.com/docs/configuration/api): pass N1ED parameters in the editor's config, to override the Dashboard for a page, a user or a role. - [Custom CMS](https://n1ed.com/docs/custom-cms): a CMS shipped to many customers, with an N1ED API key per website. - [Multisite](https://n1ed.com/docs/multisite): a SaaS CMS or website builder where every site has its own API key, file storage and blocks. - [Admin API](https://n1ed.com/docs/admin-api): create, list, rotate and delete the API keys of your customers from your server. --- # Configure N1ED dynamically using API > Pass N1ED parameters in tinymce.init() or the CKEditor 4 or 5 config to override the Dashboard for a page, a user or a role, with samples for each editor. Source: https://n1ed.com/docs/configuration/api Section: For developers > Dynamic config Updated: 2026-11-11 The [Dashboard](https://n1ed.com/docs/configuration) is the best way to configure N1ED, but it holds one configuration per API key. What if some values depend on who is editing? For example, you want a separate upload folder for every user, or some features only for some user roles. For that, pass the parameters in the config of the editor itself, the same place where you enable N1ED. They are the same parameters the Dashboard sets, and a value you pass there wins over the Dashboard's. Everything you don't pass still comes from the Dashboard. Every parameter in this documentation is shown in a box like this one: ## Example parameter Some parameter for sample - **API parameter:** `example.param` - **Type:** `string` - **Default:** `null` - **Dashboard:** where the Dashboard sets it, if it does Some description The dots in the name are levels of objects: `Flmngr.urlFiles` is `urlFiles` inside a `Flmngr` object in your config. The samples below pass one parameter, `Flmngr.urlFiles`: the files of the user who is logged in, in a folder of their own (see [Individual folders for different users or websites](https://n1ed.com/docs/multisite/separating-file-storages)). ## Passing parameters to TinyMCE If you use TinyMCE as a base editor (or Editor42, where `editor42.init()` works the same way), there is one correct place to pass parameters: the `tinymce.init()` call that you already use to enable N1ED. ```js tinymce.init({ selector: "#editor", plugins: "n1ed", apiKey: "YOUR-API-KEY", Flmngr: { urlFiles: "https://example.com/files/user-42/" } }); ``` With the [CDN script](https://n1ed.com/docs/install/javascript), the API key is in the script's URL and N1ED is already enabled, so your `tinymce.init()` has only your own parameters: ```html ``` ## Passing parameters to CKEditor There are two ways to pass a parameter to CKEditor 4. The first one is the same as with TinyMCE: add it to the config you pass to `CKEDITOR.replace()`. Its first argument is the `id` (or `name`) of your textarea, without `#`: ```js CKEDITOR.replace("editor", { extraPlugins: "N1ED-editor", skin: "n1theme", allowedContent: true, removePlugins: "iframe,magicline", apiKey: "YOUR-API-KEY", Flmngr: { urlFiles: "https://example.com/files/user-42/" } }); ``` The second one is for when you call `replace()` without parameters and keep them in CKEditor's `config.js` file: ```js CKEDITOR.editorConfig = function(config) { config.extraPlugins = "N1ED-editor"; config.skin = "n1theme"; config.allowedContent = true; config.removePlugins = "iframe,magicline"; config.apiKey = "YOUR-API-KEY"; config.Flmngr = { urlFiles: "https://example.com/files/user-42/" }; }; ``` When you use both, CKEditor takes each top-level object from `replace()` as a whole: a `Flmngr` object there replaces the one in `config.js` instead of adding to it. ## Passing parameters to CKEditor 5 On CKEditor 5, N1ED is one plugin, `@edsdk/n1ed-ckeditor5`, and its parts read their parameters from the config you pass to `ClassicEditor.create()`, next to `plugins` and the API key, under the same names: ```js ClassicEditor.create(document.querySelector("#editor"), { licenseKey: "GPL", // or your commercial key: CKEditor 5 v44+ will not start without one plugins: [Essentials, Paragraph, Bold, Italic, Image, N1ED], apiKey: "YOUR-API-KEY", Flmngr: { urlFiles: "https://example.com/files/user-42/" } }); ``` Which parts run, the blocks, the file manager and the image editor, is set for the key in the Dashboard; `N1ED: { plugins: { Flmngr: false } }` in the config switches one off for this editor. The [ready-to-use bundle and the CDN script](https://n1ed.com/docs/install/ckeditor-5) take the same config in `CKEditor5WithN1ED.create()`, which is `ClassicEditor` with the plugin built in. ## What cannot be passed this way A few keys are used by our servers, not by the editor in the browser, so they work only when they are saved in the Dashboard: - the OpenAI API key of [text generation](https://n1ed.com/docs/configuration/chat-gpt) (`openAiApiKey`), - the [YouTube API key](https://n1ed.com/docs/configuration/youtube) (`widgets.YouTube.apiKey`). Keep in mind that everything you put into the editor's config is visible to anyone who can open the page with the editor, so leave passwords and secret keys out of it. --- # Integration with Custom CMS > Why a CMS shipped to many customers needs a separate N1ED API key per website, and what deeper integration gives its managers. Source: https://n1ed.com/docs/custom-cms Section: For developers > Custom CMS Updated: 2026-09-29 Previous articles of the installation manual taught you how to install and use N1ED. This could be enough if you do not plan to clone your CMS on different servers. But when you make some own CMS and ship it to a number of customers, you want to have individual API keys there (to have separated custom templates and editor preferences), so you need tools for easy visual API key configuration on any website your customers create. Another use case is a CMS whose administrators should reach the N1ED configuration of their website from the admin panel they already use. Which targets can you reach with more deep integration: 1. CMS user can set N1ED API key visually. 2. CMS administrators open the Dashboard of their website's API key from the admin panel, with no N1ED code in sight. 3. Configuration button can be hidden in N1ED, but available in administration panel only if you wish. We recommend to pass step by step all next articles to get the most complete and consistent result. --- # Storing API key in DB and injecting it into N1ED > Add an API key column to your database and inject the key into tinymce.init, so each website your CMS serves loads its own N1ED configuration. Source: https://n1ed.com/docs/custom-cms/store-api-key Section: For developers > Custom CMS > Storing API key in DB Updated: 2026-09-29 N1ED can be installed on many websites, and each of them needs an API key of its own: the key selects the configuration the editor loads, its custom blocks and its file storage. A CMS you ship to many customers therefore injects the API key into N1ED dynamically, and lets an administrator set or change it without touching code. This page does the first half: the key comes from your database. Create a field for the API key in the database (a string of 24 characters). Its default value is the shared demo key of N1ED, `N1ED24RR1234123412341234`: N1ED runs on it out of the box, with a shared configuration nobody can change, until an administrator sets a key of their own in the [next steps](https://n1ed.com/docs/custom-cms/set-and-change-api-key). Then read the key from the database and pass it to the editor where you initialize it, as `apiKey`. For TinyMCE and PHP: ```php ``` This only reads the key and passes it as it is; the next step adds the script that updates it. #### Check it Be sure N1ED loads with your default API key. Its configuration is the one the [Dashboard](https://n1ed.com/dashboard) shows for that key: on the shared demo key it cannot be changed, which is what the next steps are for. --- # Set or change API key and update it in DB > Add a server script behind urlSetApiKey that receives the n1edApiKey the configuration widget posts and saves it in your database. Source: https://n1ed.com/docs/custom-cms/set-and-change-api-key Section: For developers > Custom CMS > Set and change API key Updated: 2026-09-29 The [configuration widget](https://n1ed.com/docs/custom-cms/configuration-widget) of the next step lets an administrator set or change the API key from your admin panel. It does not write to your database itself: it posts the new key to a URL of your server, and a script of yours saves it. This page is that script. The widget sends a `POST` request with two form fields: - `n1edApiKey`: the new API key, 24 characters. The widget has already checked it with the N1ED cloud before posting. - `n1edToken`: always `-`. Older versions of the widget also stored an access token here; the field stays for compatibility, and your script can ignore it. Create the script (say `setApiKey.php`) and let it save the key where the [previous step](https://n1ed.com/docs/custom-cms/store-api-key) reads it. PHP sample: ```php ``` Any response with a 2xx status code counts as success; on any other the widget shows an error with the response. If your admin panel protects POST requests with a CSRF token, the widget can send it: see `urlSetApiKey__CSRF` on the next page. #### Check it There is nothing to see yet: the script is called by the widget the next step adds. To test it alone, post `n1edApiKey=` to it with `curl` and check the database. --- # Embed configuration widget to administrator panel > Add the n1ed-cms-conf script to a settings page of your admin panel to link the CMS to an API key, open its Dashboard and let administrators change the key. Source: https://n1ed.com/docs/custom-cms/configuration-widget Section: For developers > Custom CMS > Embed configuration widget Updated: 2026-11-13 In the administrative area of your CMS there is a section with the CMS configuration. Add a page with N1ED options there. The configuration itself lives in the cloud and is edited in the [Dashboard](https://n1ed.com/dashboard); this page is where an administrator links the CMS to an API key, opens the Dashboard for it and changes the key later. ![The N1ED configuration widget on a settings page of a CMS admin panel, linked to an API key: the Dashboard button and Change key](https://n1ed.com/img/screenshots/docs/widgets/config-editor/cms-configuration-widget.png) *The widget on a settings page of your admin panel, linked to an API key* There is a ready widget for that, the one our own CMS modules embed. On the page, load the script and attach the widget to a placeholder. PHP example: ```php
``` The options: - `el`: the element the widget renders into. - `urlSetApiKey`: the URL of the script of the [previous step](https://n1ed.com/docs/custom-cms/set-and-change-api-key); the new key is posted there. - `urlSetApiKey__CSRF`: optional. When that URL is protected by a CSRF token, either an object `{headers: {...}, params: {...}}` the widget adds to the request, or a function `(onSuccess, onError) => ...` that fetches the token and calls `onSuccess` with such an object. - `apiKey`: the key from your database. - `editorName`: `tinymce` or `ckeditor`. - `integration`: the name of your CMS in lowercase. It becomes part of the registration link the widget offers, so choose it once and keep it. - `isCheckBoxN1EDEcoEnabledVisible`, `checkBoxN1EDEcoEnabledTitle`, `checkBoxN1EDEcoEnabledValue`, `onN1EDEcoEnabledChange`: an on/off switch for N1ED in your CMS, shown when the first one is `true`. The widget shows the title and the value you pass, and calls `onN1EDEcoEnabledChange(isEnabled, onFinished)` when the switch is toggled: save the value, then call `onFinished(null)`, or `onFinished("error text")`. - `onApiKeyChange(apiKey)`: called after a new key was saved, for a page that shows the key somewhere else too. What the widget shows depends on the key. Until the CMS has an API key of its own, that is, on the shared demo key, it says that N1ED is not linked to a key of yours and offers to set one or to register an account: ![The N1ED configuration widget before an API key is set: the Set API key button and the Register new account link](https://n1ed.com/img/screenshots/docs/widgets/config-editor/cms-configuration-widget-set-api-key.png) *The widget before an API key is set* **Set API key** asks for the 24-character key, checks it with the N1ED cloud (an unknown key is refused right there) and posts it to `urlSetApiKey`. Linked to a key, the widget shows the first 8 characters of the key, a **Dashboard** button, which opens the Dashboard in a new tab, and **Change key**. No password is involved: the Dashboard has its own login, so your CMS never stores it. If you prefer that authors do not open the Dashboard from the editor, switch its Configure button off for the key (`ui.showConfButton`, [UI and widgets](https://n1ed.com/docs/configuration/ui-and-widgets)): the settings page of your admin panel is then the only way to it. #### Check it Create one more API key in the [Dashboard](https://n1ed.com/dashboard). Open your N1ED settings page, press **Set API key** (or **Change key**) and paste the new key: the widget checks it with the cloud and posts it to your script. Reload the page: the widget shows the first characters of the new key, and the editor on your pages loads with the new key and its configuration. --- # N1ED in a Custom Multisite CMS > Give every site in a SaaS CMS or website builder its own N1ED API key so preferences, file storages and block templates stay isolated. Source: https://n1ed.com/docs/multisite Section: For developers > Multisite Updated: 2026-09-20 A lot of **SaaS CMSs** and **online website builders** help a wide audience of people and companies create their own websites. The main difference between single-website CMSs and multisite CMSs is that the latter manage multiple websites independently, ensuring their preferences, file storages, and custom Bootstrap block templates do not intersect between different users (websites) until you explicitly use [block template sharing](https://n1ed.com/how-to/bootstrap/templates/how-to-share-bootstrap-block-templates) feature. So you need to use an individual API key for every website your CMS users have and load the editor (N1ED, TinyMCE+N1ED, or CKEditor+N1ED) with these personal API keys. Use the [Admin API](https://n1ed.com/docs/admin-api) to automate API key management, and configure [separate file storages](https://n1ed.com/docs/multisite/separating-file-storages) to isolate users in their personal directories. --- # Individual Folders for Different Users or Websites > Isolate each user or website in its own folder by setting dirFiles on the server and the matching files URL on the client side. Source: https://n1ed.com/docs/multisite/separating-file-storages Section: For developers > Multisite > Multi-user app storages Updated: 2026-10-30 When using a multisite CMS or app, each site has an individual set of files and images used in their page content. Therefore, it is critically important to isolate users of these websites in their own directories using a structure like this: Path on disk Set as **`dirFiles`** in the **server** config file ```text /var /www /files /user-1 /user-2 /user-3 ... ``` Access from web Set as **Files URL** in the Dashboard or **`Flmngr.urlFiles`** in the **client** config file ```text https://example.com/files/user-1/ https://example.com/files/user-2/ https://example.com/files/user-3/ ... ``` Note: These instructions relate to the self-hosted file manager script installation. If you use any cloud storage ([Amazon S3](https://n1ed.com/docs/cloud-storage/amazon-s3) or [Azure Blob](https://n1ed.com/docs/cloud-storage/azure-blob)), please refer to the instructions provided to you directly. ## Client-side parameters There are two parameters in the [Dashboard](https://n1ed.com/dashboard) that are responsible for working with URLs: **File Manager URL:** URL of your PHP/Node script that processes the file manager's requests Parameter name: `Flmngr.urlFileManager` **Files URL:** URL prefix of the directory with static files available from web Parameter name: `Flmngr.urlFiles` When you have just one website, you can specify the parameters manually directly in the Dashboard interface. However, with multiple websites, especially as the number grows, you need to define the parameters dynamically. The most common strategy is to have a single File Manager URL for everyone, which will serve requests from any website user and distinguish between directories on the fly according to cookies or other authentication data you use to access the backoffice of your CMS. At the same time, each website will have a different Files URL prefix. These will be respected when the editor forms URLs for newly inserted images. When you initialize N1ED (either as a standalone editor or as a plugin to CKEditor or TinyMCE), simply override these parameters at the start: ### Tab: NPM ```js import Flmngr from "flmngr"; let userId = getUserId(); // your function Flmngr.open({ apiKey: "your-n1ed-api-key", urlFileManager: 'https://example.com/flmngr/flmngr.php', urlFiles: 'https://example.com/files/user-' + userId, isMultiple: false, onFinish: (files) => { console.log("User picked:"); console.log(files); } }); ``` ### Tab: React ```js import Flmngr from "@flmngr/flmngr-react"; import * as React from "react"; export class MyButton extends React.Component { render() { return } } ``` ### Tab: Snippet ```html ``` ### Tab: TinyMCE ```html ``` ### Tab: CKEditor 4 ```html ``` ### Tab: CKEditor 5 ```js ClassicEditor.create( document.querySelector('#editorId'), { apiKey: "your-n1ed-api-key", Flmngr: { urlFileManager: 'https://example.com/flmngr/flmngr.php', urlFiles: 'https://example.com/files/user-' + userId, } } ).then( (editor) => { editor.getFlmngr( (Flmngr) => { // Flmngr argument contains Flmngr API, // for example you can open the file manager and let user pick a file: Flmngr.open({ // There is no need to set 'apiKey', 'urlFileManager' or 'urlFiles' here // due to you already set them in the config of CKEditor. isMultiple: false, onFinish: (files) => { console.log("User picked:"); console.log(files); } }); } ); } ).catch((error) => {}); ``` ### Tab: Froala ```js let userId = getUserId(); // your function FroalaEditor('#editor', { Flmngr: { apiKey: "your-n1ed-api-key", urlFileManager: 'https://example.com/flmngr/flmngr.php', urlFiles: 'https://example.com/files/user-' + userId, } }); ``` ## Backend When using a PHP backend, you can use this sample code to call the Flmngr server-side component: ```php $userId = ... // get it yourself FlmngrServer::flmngrRequest( array( 'dirFiles' => '/var/www/files/user-' . $userId, ) ); ``` --- # Inherit settings from parent API keys > Make many N1ED API keys inherit framework, file manager and image settings from one parent key, and see what each key still keeps. Source: https://n1ed.com/docs/multisite/parent-and-child-api-keys Section: For developers > Multisite > Parent/child API keys Updated: 2026-11-06 Having multiple websites covered with N1ED causes having individual N1ED API keys for each of them. Each API key refers to an isolated configuration that is applied to the editor on the website you use the API key on. However, often having a lot of similar websites nudges you to find a way to control their settings in a centralized way. For example, you have the same framework for all your websites, the same UI options your workers are familiar with and many other settings that are also identical across sites. This is the perfect case for making all your API keys inherit from a single one that will be a parent. This inheritance can be configured in the [Dashboard](https://n1ed.com/dashboard). Each parameter change on a parent API key immediately applies to the children. Select a website there and open its **Status** tab: the **Parent** row says whether its API key stands alone, and **Attach** makes it a child of another API key of your account. A parent key's row says how many keys inherit from it, and its children are listed under it. ![Dashboard with a parent API key selected: its children under it, and the Parent row of its Status tab](https://n1ed.com/img/screenshots/docs/dashboard/parent-api-key-settings-inheritance.png) ### What's inherited and what's not These properties of child keys will be inherited from the parent, and their editing in the Dashboard for child keys will be locked: - All parameters you see on the Settings tab: parameters of your framework (Bootstrap/Tailwind), file manager configuration, image editor options, etc. - Fixed product version option And this is what this API key will continue to ship regardless of the inheritance: - [Custom blocks](https://n1ed.com/how-to/bootstrap/templates/bootstrap-custom-block-templates) for Bootstrap/Tailwind - [Custom widgets](https://n1ed.com/how-to/custom-widgets) - Block sharing rules ### A child key in the Dashboard Select a child key and the Dashboard shows the configuration it inherits: its parent's, with the parent's API key, read-only. The box above it has **Edit Parent**, which opens the parent's page, **Detach** (see below) and a switch to the **Old configuration**: the settings the key had before it was attached, read-only too, which it gets back if you detach it. The **Blocks** tab always shows the key's own library. ![Dashboard with a child API key selected: the Child API key box with Edit Parent, Detach and the switch, above its parent's configuration](https://n1ed.com/img/screenshots/docs/dashboard/child-api-key-inherited-configuration.png) ### Overriding configuration Sometimes, especially when you are configuring the file manager, you might need to override some parameters of the child key. You can do this using programmatic passing parameters. Here is the list of [file manager parameters](https://n1ed.com/docs/configuration/file-manager#config). Just [specify](https://n1ed.com/docs/configuration/api) them among other CKEditor/TinyMCE config and they will have higher priority than the configuration of the parent API key. File manager overriding example: #### Tab: TinyMCE ```html ``` #### Tab: CKEditor 4 ```html ``` It's actually the same as you might do when assigning [individual folders](https://n1ed.com/docs/multisite/separating-file-storages) for app users/tenants. ### Custom blocks inheritance Custom blocks and settings are different things. While settings are inherited within parent-child pair, custom blocks are always individual along all API keys. They store blocks of your website you are using this API key on and usually no other website should access them due to privacy concerns. However, N1ED has a flexible way to export blocks from one API key to other ones using [sharing custom blocks](https://n1ed.com/how-to/bootstrap/templates/how-to-share-bootstrap-block-templates). You can share blocks from the parent API key to all your child keys, to certain API keys, or even use an external, non-parent API key to import all or some blocks from it, or combine all previous approaches. The easiest and the clearest way, of course, is to build your own universal block library on the parent key and share it to every child. ### What key to choose as a parent There are two main approaches of building API key hierarchy: 1. **To have an unused API key that only stores the base configuration.** This is the easiest way and it helps you to keep all custom blocks on this API key intact (see previous section about block sharing). So you will use child keys only, that are linked to individual websites. 2. **Use one of your websites as a parent, all others will be its children.** This way may also be used. ### Detaching from the parent If you decide that one of your websites is really special, and you don't want to let the parent key change its configuration, you can easily detach this API key: select it in the Dashboard and press **Detach** in the box at the top of its page. The API key configuration will be unlocked and you will be able to edit it. After detaching, the settings will revert to their state from before the key was attached; no parent parameters will be copied over. Actually, attaching API keys to some so-called parent API key doesn't cause self-configuration overwriting: it will still be stored in the Dashboard, and the **Old configuration** switch of the child key shows it, read-only. So you can always return to your previous configuration regardless of what happened, so the migration from a set of independent, standalone, keys to parent-children associations will be smooth and you can immediately revert everything in case of any issues. --- # Admin API > Request format, response structure and error codes of the N1ED Admin API used by SaaS providers to automate API key management. Source: https://n1ed.com/docs/admin-api Section: For developers > Admin API Updated: 2026-09-20 > **Note** > > Previously called "SaaS API" (after the SaaS providers it was designed for), renamed to better reflect its purpose. N1ED cloud servers have an API used to edit cloud settings. It provides HTTP requests for: - [Create API key](https://n1ed.com/docs/admin-api/create-api-key) - [List API keys](https://n1ed.com/docs/admin-api/list-api-keys) - [Delete API key](https://n1ed.com/docs/admin-api/delete-api-key) - [Undelete API key](https://n1ed.com/docs/admin-api/undelete-api-key) - [Set parent API key](https://n1ed.com/docs/admin-api/set-parent-api-key) - [Rotate API key](https://n1ed.com/docs/admin-api/rotate-api-key) - [Rotate Admin API token](https://n1ed.com/docs/admin-api/rotate-admin-token) It would be useful for website builder owners and other multi-tenant SaaS providers that would like to automate repetitive actions. This Admin API is available for everyone on the Studio and higher plans and may be connected by agreement on other plans ([contact support](mailto:support@helpdesk.edsdk.com?subject=N1ED%20-%20Admin%20API) for that). ## Request format **URL:** `https://cloud.n1ed.com/a/admin/action` **Request type:** `POST` **Content type:** `application/x-www-form-urlencoded` **Parameters:** action parameters Please replace "action" in the URL with the desired action from the list of available requests to the Admin API and specify the POST parameters according to the requirements of this request. ## Response format ### Success result The response format is always the same, and only the `data` section containing the returned data differs. Refer to the request documentation to review the returned structure schema. **HTTP code:** `200` (always) **Content type:** `application/json` **Body:** ```js { error: null, data: { ... } } ``` Result with an error: **HTTP code:** `200` **Content type:** `application/json` **Body:** ```js { error: "string-error-code", data: null } ``` Refer to the specific request documentation to review the returned error codes, and don't forget to check whether the request has failed due to network connectivity problems. Our servers will never respond with a code different from `200` even in the case of an error, but please check other HTTP codes in case of any potentially unhandled errors. ### Code samples Here are some samples of how to make this request from the Linux console, PHP-based CMSs, and JavaScript/TypeScript Node backends. You can also write code in the language you use. Of course, the parts `action-name` in the URL and `param1=value1¶m2=value2` should be replaced accordingly to the request your code is making. #### Sh/Bash This can be called in Linux console if you prefer `curl`. ```bash curl \ -X POST https://cloud.n1ed.com/a/admin/action-name \ -d "param1=value1¶m2=value2" ``` And this is the command for `wget` lovers: ```bash wget \ --post-data "param1=value1¶m2=value2" \ --header="Content-Type: application/x-www-form-urlencoded" \ -O - \ https://cloud.n1ed.com/a/admin/action-name ``` #### PHP If you use PHP without any libraries, this is the vanilla PHP code for you: ```php function request() { $url = "https://cloud.n1ed.com/a/admin/action-name"; $data = http_build_query([ "param1" => "value1", "param2" => "value2" ]); $options = [ "http" => [ "header" => "Content-Type: application/x-www-form-urlencoded", "method" => "POST", "content" => $data ] ]; $context = stream_context_create($options); $response = file_get_contents($url, false, $context); if ($response === false) { echo "Request failed"; return null; } else { return $response; } } // Example usage $response = request(); echo $response; ``` And here is the code for `curl` library users: ```php function request() { $url = "https://cloud.n1ed.com/a/admin/action-name"; $data = [ "param1" => "value1", "param2" => "value2" ]; $ch = curl_init($url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data)); curl_setopt($ch, CURLOPT_HTTPHEADER, [ "Content-Type: application/x-www-form-urlencoded" ]); $response = curl_exec($ch); if (curl_errno($ch)) { echo "cURL Error: " . curl_error($ch); curl_close($ch); return null; } curl_close($ch); return $response; } // Example usage $response = request(); echo $response; ``` #### JavaScript/TypeScript (NodeJS) You can make call with Axios library from any framework like Express, NestJS or similar or your custom app: ```js const axios = require('axios'); async function request() { try { const params = new URLSearchParams({ param1: "value1", param2: "value2" }); const response = await axios.post( "https://cloud.n1ed.com/a/admin/action-name", params, { headers: { "Content-Type": "application/x-www-form-urlencoded" } } ); return response.data; } catch (error) { console.error( "Error:", error.response ? error.response.data : error.message ); return null; } } // Example usage request().then(console.log); ``` #### Other languages You can write equivalent code in any other language using the samples above. The Admin API is available on any platform that can make HTTP requests. If you encounter any difficulties, ask support, and our developers will assist you. --- # Create API key > Call the N1ED Admin API to create an API key for a domain when a customer registers, and save the returned key in your own database. Source: https://n1ed.com/docs/admin-api/create-api-key Section: For developers > Admin API > Create API key Updated: 2026-09-29 Initially, as a first step in implementing N1ED in your CMS, you might have a single API key used for everyone. Change this behavior by defining a field (a new column) in your DB in the users table to store an N1ED API key for each customer. Then, always load the editor (N1ED, CKEditor with N1ED plugin, or TinyMCE with N1ED plugin) with the received and saved API key for that user as soon you can generate them. N1ED offers a special [Admin API](https://n1ed.com/docs/admin-api) for this available on Studio plan and higher ones. This action can be automated both for generating keys for all existing clients and when a new customer registers in your CMS or creates an additional website. When a user registers in your CMS, or when your manager does this for somebody, the CMS can automatically make a request to the N1ED server to create an API key and save it into your DB, attaching the resulting key to the newly registered user. You may also want to create API keys for all already registered users when implementing N1ED in the CMS with a number of existing users. To do this, write a script that makes this API request in a loop. ## Request format **URL:** `https://cloud.n1ed.com/a/admin/api-key-create` **Request type:** `POST` **Content type:** `application/x-www-form-urlencoded` **Parameters:** - `adminToken`: Your secret Admin API token - `domain`: Domain name for which to create the API key. Please don't include the protocol or port. The `www.` prefix may be omitted as well. Examples: `example.com` `example.com` If you don't know the domain for the final website yet, please use an internal domain that you are using temporarily: `user-534.example.com` Or even just a user ID if you don't have any temporary domain for that: `user-534` You can't have the same domains on different websites, so please ensure uniqueness. Otherwise, this Admin API request will return an error. Think of this value as both an ID for our system and a note for yourself at the same time. - `copyFrom` *optional*: API key on the same account that you want to use as the source for the configuration. When specified, all the preferences (but not custom blocks templates) will be copied from a website with this API key. If you need to provide existing block templates on the target key, please use [block sharing](https://n1ed.com/how-to/bootstrap/templates/how-to-share-bootstrap-block-templates) feature instead, which is available for you in the [Dashboard](https://n1ed.com/dashboard). It's recommended to use only the first 8 symbols of API key. - `parentApiKey` *optional*: API key on the same account that will be used as a parent for the newly created API key using the [parent/child API keys](https://n1ed.com/docs/multisite/parent-and-child-api-keys) mechanism. Parent API key dynamically provides configuration to its children. So editing configuration in the Dashboard for the child will be blocked and parent's options will be used. This request will not return a error if you incorrectly specify this parameter, but linking to the parent won't happen. It's recommended to use only the first 8 symbols of API key. ## Response format The server will return the newly created API key in the data section if the request succeeds, or an error code otherwise. **HTTP code:** `200` **Content type:** `application/json` **Body:** ```js { error: null, data: { apiKey: "newly-created-api-key" } } ``` Possible error codes: - `CANT-CREATE-API-KEY-WITHOUT-LICENSE` - you have reached your license limit on the account. Please purchase more licenses and retry. - `UNABLE-TO-FIND-API-KEY-TO-COPY-FROM` - may appear if you specified the `copyFrom` parameter but such a source API key doesn't exist. - `API-KEY-WITH-THIS-DOMAIN-ALREADY-EXISTS` - you tried to create an API key with an already existing (duplicate) domain. The response will contain the existing API key in `data.apiKey`. - `INCORRECT-TOKEN` - the `adminToken` parameter has been incorrectly specified. ## Sample request Here is a sample of how to make this request from the Linux console (sh, bash, or any other shell). ```bash curl \ -X POST https://cloud.n1ed.com/a/admin/api-key-create \ -d "adminToken=your-secret-admin-token&domain=example.com" ``` Please refer to [Admin API](https://n1ed.com/docs/admin-api) to see samples for PHP, JS, and learn how to write code for other languages. --- # List API keys > Fetch every API key on your N1ED account with its domain and creation date, or list deleted ones, to sync with your own database. Source: https://n1ed.com/docs/admin-api/list-api-keys Section: For developers > Admin API > List API keys Updated: 2026-09-29 When your CMS or website builder manages many websites, you may want to audit which API keys exist on your N1ED account and verify they are in sync with your own database: find keys you forgot to save, keys with outdated domains, or keys left after removed websites. This request of [Admin API](https://n1ed.com/docs/admin-api) (available on Studio and higher plans) returns all API keys that belong to your account. This is a lightweight read-only request, so you can safely call it from periodic synchronization scripts. By default it lists only active API keys. Pass the `deleted` parameter to list the keys you have [deleted](https://n1ed.com/docs/admin-api/delete-api-key) instead — e.g. to find a key you want to [undelete](https://n1ed.com/docs/admin-api/undelete-api-key). ## Request format **URL:** `https://cloud.n1ed.com/a/admin/api-key-list` **Request type:** `POST` **Content type:** `application/x-www-form-urlencoded` **Parameters:** - `adminToken`: Your secret Admin API token - `deleted` *optional*: Pass `true` to list deleted API keys instead of active ones. When omitted (or `false`), only active API keys are listed. ## Response format The server will return the list of your API keys in the data section if the request succeeds, or an error code otherwise. **HTTP code:** `200` **Content type:** `application/json` **Body:** ```js { error: null, data: { apiKeys: [ { apiKey: "your-api-key", domain: "example.com", createdAt: 1721400000000 }, ... ] } } ``` `createdAt` is the creation time as Unix time in milliseconds. `domain` can be `null` for API keys created without a domain. When you request deleted API keys (`deleted=true`), every entry additionally contains `deletedAt` — the deletion time as Unix time in milliseconds. Possible error codes: - `INCORRECT-TOKEN` - the `adminToken` parameter has been incorrectly specified. ## Sample request Here is a sample of how to make this request from the Linux console (sh, bash, or any other shell). ```bash curl \ -X POST https://cloud.n1ed.com/a/admin/api-key-list \ -d "adminToken=your-secret-admin-token" ``` Please refer to [Admin API](https://n1ed.com/docs/admin-api) to see samples for PHP, JS, and learn how to write code for other languages. --- # Delete API key > Free a N1ED license slot by deleting an API key through the Admin API, and learn which keys cannot be deleted and how to restore one. Source: https://n1ed.com/docs/admin-api/delete-api-key Section: For developers > Admin API > Delete API key Updated: 2026-09-29 When a customer leaves your CMS or website builder, or one of your websites is decommissioned, delete its API key with this [Admin API](https://n1ed.com/docs/admin-api) request (available on Studio and higher plans) so it no longer counts against your license and cannot be used to load the editor anymore. The deletion is reversible: the configuration is kept on N1ED servers, and the key can be restored later with the [Undelete API key](https://n1ed.com/docs/admin-api/undelete-api-key) request. Deleted API keys remain reserved — they will never be reassigned when new keys are generated. You can review them at any moment using [List API keys](https://n1ed.com/docs/admin-api/list-api-keys) with the `deleted=true` parameter. Note that some API keys cannot be deleted: the default (first) API key of the account, keys with a license or a Flmngr access key attached, and keys used as a [parent](https://n1ed.com/docs/multisite/parent-and-child-api-keys) by other active keys (detach or delete the children first). ## Request format **URL:** `https://cloud.n1ed.com/a/admin/api-key-delete` **Request type:** `POST` **Content type:** `application/x-www-form-urlencoded` **Parameters:** - `adminToken`: Your secret Admin API token - `apiKey`: API key on the current account to be deleted. Please specify the full (24-character) API key. ## Response format The server will return an "OK" confirmation in the data section if the request succeeds, or an error code otherwise. **HTTP code:** `200` **Content type:** `application/json` **Body:** ```js { error: null, data: "OK" } ``` Possible error codes: - `NO-SUCH-API-KEY` - there is no active API key with this value on your account. Are you trying to delete an already deleted API key? - `UNABLE-TO-CHANGE-NOT-OWN-API-KEY` - the specified API key does not belong to your account. - `CANT-DELETE-DEFAULT-API-KEY` - the default (first) API key of the account cannot be deleted. - `CANT-DELETE-API-KEY-WITH-LICENSE` - a license is attached to this API key, so it cannot be deleted. - `CANT-DELETE-API-KEY-WITH-ACCESS-KEY` - a Flmngr access key is attached to this API key, so it cannot be deleted. - `CANT-DELETE-PARENT-API-KEY` - other active API keys use this key as their [parent](https://n1ed.com/docs/multisite/parent-and-child-api-keys). Detach or delete the child keys first. - `INCORRECT-TOKEN` - the `adminToken` parameter has been incorrectly specified. ## Sample request Here is a sample of how to make this request from the Linux console (sh, bash, or any other shell). ```bash curl \ -X POST https://cloud.n1ed.com/a/admin/api-key-delete \ -d "adminToken=your-secret-admin-token&apiKey=your-api-key" ``` Please refer to [Admin API](https://n1ed.com/docs/admin-api) to see samples for PHP, JS, and learn how to write code for other languages. --- # Undelete API key > Restore a deleted N1ED API key together with its configuration, and resolve the error raised when an active key now holds its domain. Source: https://n1ed.com/docs/admin-api/undelete-api-key Section: For developers > Admin API > Undelete API key Updated: 2026-09-29 If you deleted an API key by mistake, or a customer returns to your CMS or website builder, restore the key together with its whole configuration using this [Admin API](https://n1ed.com/docs/admin-api) request (available on Studio and higher plans). To find the exact value of a deleted API key, use [List API keys](https://n1ed.com/docs/admin-api/list-api-keys) with the `deleted=true` parameter. The key is restored as it was at the moment of deletion, with one exception: if other API keys shared blocks specifically to this key, those sharing rules were detached on deletion and are not restored automatically. An API key cannot be undeleted if it would break your active keys, particularly when its domain is now occupied by another active API key of your account: in this case the request returns the `API-KEY-WITH-THIS-DOMAIN-ALREADY-EXISTS` error and the occupying API key in the `data` section. Delete that key or change its domain first, then retry. Restoring a key also requires a free license slot, same as creating a new one. ## Request format **URL:** `https://cloud.n1ed.com/a/admin/api-key-undelete` **Request type:** `POST` **Content type:** `application/x-www-form-urlencoded` **Parameters:** - `adminToken`: Your secret Admin API token - `apiKey`: Deleted API key on the current account to be restored. Please specify the full (24-character) API key. ## Response format The server will return an "OK" confirmation in the data section if the request succeeds, or an error code otherwise. **HTTP code:** `200` **Content type:** `application/json` **Body:** ```js { error: null, data: "OK" } ``` Possible error codes: - `NO-SUCH-API-KEY` - there is no deleted API key with this value on your account. - `API-KEY-IS-NOT-DELETED` - this API key is already active, there is nothing to undelete. - `UNABLE-TO-CHANGE-NOT-OWN-API-KEY` - the specified API key does not belong to your account. - `API-KEY-WITH-THIS-DOMAIN-ALREADY-EXISTS` - another active API key of your account now uses the same domain. The response will contain that API key in `data.apiKey`. Delete it or change its domain first. - `API-KEY-PREFIX-ALREADY-EXISTS` - another active API key of your account starts with the same first 8 characters, so restoring this key would make them ambiguous. This can happen only with API keys created before deleted keys became reserved; please [create a new API key](https://n1ed.com/docs/admin-api/create-api-key) instead. - `CANT-UNDELETE-API-KEY-WITH-DELETED-PARENT` - this API key inherits its configuration from a [parent](https://n1ed.com/docs/multisite/parent-and-child-api-keys) API key which is deleted. Undelete the parent first. - `CANT-UNDELETE-API-KEY-WITHOUT-LICENSE` - you have reached your license limit on the account. Please purchase more licenses and retry. - `INCORRECT-TOKEN` - the `adminToken` parameter has been incorrectly specified. ## Sample request Here is a sample of how to make this request from the Linux console (sh, bash, or any other shell). ```bash curl \ -X POST https://cloud.n1ed.com/a/admin/api-key-undelete \ -d "adminToken=your-secret-admin-token&apiKey=your-api-key" ``` Please refer to [Admin API](https://n1ed.com/docs/admin-api) to see samples for PHP, JS, and learn how to write code for other languages. --- # Set parent API key > Assign, replace or remove the parent of a child N1ED API key from code, so it inherits configuration from another key on the account. Source: https://n1ed.com/docs/admin-api/set-parent-api-key Section: For developers > Admin API > Set parent API key Updated: 2026-09-29 If you need to change the [parent/child](https://n1ed.com/docs/multisite/parent-and-child-api-keys) relationship for an existing API key, you can do this programmatically using the [Admin API](https://n1ed.com/docs/admin-api) available on Studio plan and higher ones. This request lets you assign a parent API key to an existing child, replace the current parent with a different one, or remove the parent connection entirely. ## Request format **URL:** `https://cloud.n1ed.com/a/admin/api-key-set-parent` **Request type:** `POST` **Content type:** `application/x-www-form-urlencoded` **Parameters:** - `adminToken`: Your secret Admin API token - `apiKey`: API key of the website you want to assign a parent to or remove a parent from. Both 8-character and full 24-character API keys are accepted. It's recommended to use only the first 8 symbols of API key. - `parentApiKey`: API key on the same account that will be used as a [parent](https://n1ed.com/docs/multisite/parent-and-child-api-keys). Parent API key dynamically provides configuration to its children. So editing configuration in the Dashboard for the child will be blocked and parent's options will be used. Both 8-character and full 24-character API keys are accepted. To remove the existing parent connection, pass an empty string as the value of this parameter. It's recommended to use only the first 8 symbols of API key. ## Response format The server will return a success response if the parent was set or removed successfully, or an error code otherwise. **HTTP code:** `200` **Content type:** `application/json` **Body:** ```js { error: null, data: "OK" } ``` Possible error codes: - `UNABLE-TO-CHANGE-NOT-OWN-API-KEY` - the `apiKey` does not belong to your account. - `NO-SUCH-API-KEY` - the `apiKey` parameter has been incorrectly specified or the API key doesn't exist. - `INVALID-PARENT-API-KEY` - the `parentApiKey` is too short. Use at least 8 characters. - `UNABLE-TO-SET-PARENT-API-KEY` - the parent could not be set (e.g. the parent API key doesn't exist, or the child already has children of its own). - `INCORRECT-TOKEN` - the `adminToken` parameter has been incorrectly specified. ## Sample request Here is a sample of how to set a parent API key from the Linux console (sh, bash, or any other shell). ```bash curl \ -X POST https://cloud.n1ed.com/a/admin/api-key-set-parent \ -d "adminToken=your-secret-admin-token&apiKey=your-api-key&parentApiKey=parent-api-key" ``` To remove the parent connection: ```bash curl \ -X POST https://cloud.n1ed.com/a/admin/api-key-set-parent \ -d "adminToken=your-secret-admin-token&apiKey=your-api-key&parentApiKey=" ``` Please refer to [Admin API](https://n1ed.com/docs/admin-api) to see samples for PHP, JS, and learn how to write code for other languages. --- # Rotate API key > Change characters 9 to 24 of an exposed N1ED API key through the Admin API while the public first 8 characters stay the same. Source: https://n1ed.com/docs/admin-api/rotate-api-key Section: For developers > Admin API > Rotate API key Updated: 2026-09-29 When you feel your API key might have been accidentally exposed, or as part of periodically changing secrets for security purposes, you can change API keys used on your websites. API key rotation may be used only with the help of [Admin API](https://n1ed.com/docs/admin-api) available on Studio and higher plans. Be careful when calling this request, because the specified key will be rotated immediately, and if your script loses the response and doesn't save it to the DB, you'll be left with an outdated API key. However, you can retrieve it manually from the [Dashboard](https://n1ed.com/dashboard). This request will change only characters 9–24 of the API key, keeping positions 1–8 intact. The first 8-character part is a constant public part and should never be changed. ## Request format **URL:** `https://cloud.n1ed.com/a/admin/api-key-rotate` **Request type:** `POST` **Content type:** `application/x-www-form-urlencoded` **Parameters:** - `adminToken`: Your secret Admin API token - `apiKey`: API key on the current account to be rotated (changed). ## Response format The server will return the new API key in the data section if the request succeeds, or an error code otherwise. **HTTP code:** `200` **Content type:** `application/json` **Body:** ```js { error: null, data: { apiKey: "rotated-api-key" } } ``` Possible error codes: - `NO-SUCH-API-KEY` - the `apiKey` parameter has been incorrectly specified. Are you trying to rotate the same old API key a second time? - `INCORRECT-TOKEN` - the `adminToken` parameter has been incorrectly specified. ## Sample request Here is a sample of how to make this request from the Linux console (sh, bash, or any other shell). ```bash curl \ -X POST https://cloud.n1ed.com/a/admin/api-key-rotate \ -d "adminToken=your-secret-admin-token&apiKey=your-api-key" ``` Please refer to [Admin API](https://n1ed.com/docs/admin-api) to see samples for PHP, JS, and learn how to write code for other languages. --- # Rotate Admin API token > Replace an exposed N1ED Admin API token with a new one and store it at once, because the old token stops working immediately. Source: https://n1ed.com/docs/admin-api/rotate-admin-token Section: For developers > Admin API > Rotate Admin API token Updated: 2026-09-29 When you feel your Admin API token (a key for accessing Admin API) might have been suddenly exposed to 3rd persons, or as part of periodically changing secrets for security purposes, you can change (rotate) it. Admin API token rotation may be used only with the help of [Admin API](https://n1ed.com/docs/admin-api) available on Studio adn higher plans. When you change Admin API token it will be rotated immediately, so you must immediately save it in the DB or you lose access to Admin API, and only support may help you then. ## Request format **URL:** `https://cloud.n1ed.com/a/admin/admin-token-rotate` **Request type:** `POST` **Content type:** `application/x-www-form-urlencoded` **Parameters:** - `adminToken`: Your secret Admin API token ## Response format The server will return the new Admin API token in the data section if the request succeeds, or an error code otherwise. **HTTP code:** `200` **Content type:** `application/json` **Body:** ```js { error: null, data: { adminToken: "rotated-admin-token" } } ``` Possible error codes: - `INCORRECT-TOKEN` - the `adminToken` parameter has been incorrectly specified. Are you trying to rotate the same old Admin API token a second time? ## Sample request Here is a sample of how to make this request from the Linux console (sh, bash, or any other shell). ```bash curl \ -X POST https://cloud.n1ed.com/a/admin/admin-token-rotate \ -d "adminToken=your-secret-admin-token" ``` Please refer to [Admin API](https://n1ed.com/docs/admin-api) to see samples for PHP, JS, and learn how to write code for other languages. --- # Licensing (N1ED) > One N1ED license covers one final website or app and five users; subdomains and path-separated sites each count as a website. Source: https://n1ed.com/resources/licensing Updated: 2026-11-07 N1ED is a website component that can be installed and used in some CMS/framework for managing a website or the website content. The editor offers a Free plan with no payment required and also provides various paid plans. ## Free plan Until you require premium features you can use N1ED for free. This tariff offers numerous features to help you start building fine content. ## Paid plans When you need premium features and priority support, several paid plans are available for you. The main idea behind our tariffs is that everybody pays proportionally for their usage. Individuals and small companies should not pay the same price as big companies with hundreds of users or websites. ## How many licenses do you need? You need as many licenses as websites you have. N1ED is licensed per the *final* website you publish on the web or intranet. If there is no such public website, it is licensed per app. Each website/app license, by default, covers 5 users (old customers may have more users by default). Cloud storage is a separate option. ## What is a website? We only count final websites with content that you publish and give access to visitors, not your dashboard domain with the editor. Therefore, these domains will always require an individual licenses, even if they are controlled from a single dashboard in your CMS. For example, here you need two licenses when having: `example1.com` and `example2.com` A subdomain is also considered a domain (and a website) too: `en.example.com` and `fr.example.com` When you have a CMS or website builder, you may have a single dashboard for hundreds of websites, but you will need one license for each final website, not just one for the dashboard. *Usually*, these websites are located on individual domains or subdomains like: `website1.example.com` and `website2.example.com` However, sometimes different websites are located on one domain/subdomain and are separated by some URL path parameter (prefix, suffix, argument, ets.): `example.com/website1/` and `example.com/website2/` or `example.com/sites/website1/` and `example.com/sites/website2/` or `example.com/pages?website=website1` and `example.com/pages?website=website2` All the examples mentioned above require individual licenses for each such website. If we wish to be more formal, we can ask: what is the difference between websites and just internal pages? Separate websites (even located on the same domain/subdomain) have these attributes (one or more): - Different owners/teams or contact forms - Different designs - Weakly overlapping menu structures and URLs, weakly linked with each other - Independent (isolated) file/image storages - etc. Usually, it is *obvious* whether you have individual websites or not. If you have any doubts, please [contact us](mailto:support@helpdesk.edsdk.com?subject=N1ED%20-%20Contact%20us) to clarify this for your case. ## What is a user? The word "user" actually refers to a seat: an employee using one browser on one device on one domain. If one employee uses two computers or a computer and a mobile device, they will be counted as two users. For the same reason, we do not recommend using incognito mode in your browser as each usage will be counted as a new device. Therefore, you need to pay for as many users as the number of employees who may use Flmngr (taking into account the notice above). The Flmngr buyer should keep track of the number of employees for themselves. Our servers also check the limits and try to be as accommodating as possible to users, within reason. So, please ensure this information is correct to prevent an alarm in our system, which could lead to notifying or suspending an account. On regular small websites/apps, you only need one [Premium plan](https://n1ed.com/pricing) license with 5 users included. For bigger websites/apps, you may need to purchase more seats. Common mistake: If your SaaS offers some service to your clients (for example, website builder), it is incorrect to count each your client as a user. Instead, you should purchase an additional website license with a minimum 5 users for each user. However, there is a limitation here: each website license includes only one storage, so you can't use dynamic directory changing regarding the current user (isolating users' storages) when you have just one license. ## What is storage? Local server or cloud storage is a location for the files you manage. Local storage refers to a directory on some server, while cloud storage refers to a directory inside an S3 bucket, BLOB container, etc. So, if you have a number of users on one website that need separate storages, purchase as many additional cloud storages as you need. If you host files on your server and use a local server storage, you may need an additional website license, as far most of time, separated users mean that they will not manage the contents of the current website but create/manage something of their own. See below for bulk discounts in cases when you have too many such independent users. ## Bulk licensing If you need more than 10 websites, or 50 users, or 3 cloud storages, please [contact us](mailto:support@helpdesk.edsdk.com?subject=N1ED%20-%20Contact%20us) for a special price. This is especially useful for SaaS. Also, write to us if you need to use the [Multiple users](https://n1ed.com/docs/multisite/separating-file-storages) (storage per user) feature on one website/app. ## Restrictions The license does not allow: redistribution, copying of any files or resources from our CDN, decompiling, or any other actions that may alter N1ED's behaviour or violate the intellectual rights of N1ED developers or third parties. The N1ED extension for Joomla itself is distributed under GPL v3: see [N1ED Joomla extension licensing](https://n1ed.com/joomla/license). --- # Contacts (N1ED) > Reach N1ED technical support from the Dashboard, and find where to send billing, licensing and legal questions to EdSDK. Source: https://n1ed.com/resources/contacts Updated: 2026-11-12 N1ED (Flmngr/Image42, formerly ImgPen) is a product of EdSDK company (Georgia), and in case of any purchases you will receive an invoice from PayPro Global, Inc., our authorized e-commerce reseller located at: 225 The East Mall, Suite 1117, Toronto, ON, M9B 0A9, Canada. We will be glad to answer all your questions you may have while using a product or interacting with the website. ## Technical support - Provides assistance with migrating from other product - Provides solution to problems you may have while using N1ED - Offers consulting regarding responsive layout of content - etc. You can ask support from your [Dashboard](https://n1ed.com/dashboard). ## Billing & legal support - Helps to resolve billing issues - Explains licensing details and limitations - Offers access to partnership programs - Gives comments regarding personal data storage Purchasing, billing and legal questions should be directed to: [[support@helpdesk.edsdk.com](mailto:support@helpdesk.edsdk.com)](mailto:support@helpdesk.edsdk.com?subject=N1ED%20-%20Contact%20us). --- # How-to and tutorials on how to build perfect Bootstrap content in TinyMCE and CKEditor > Cookbook for content authors: build Bootstrap structure, reuse block templates, style blocks, and insert widgets, images and video. Source: https://n1ed.com/how-to Section: How-to overview Updated: 2026-10-21 N1ED acts as a standalone block-by-block editor, and also has plugins for [CKEditor 4](https://n1ed.com/docs/install/ckeditor) and [TinyMCE](https://n1ed.com/docs/install/tinymce). The [standalone N1ED](https://n1ed.com/docs/install/javascript) runs on [Editor42](https://editor42.com), our free editor based on TinyMCE. This cookbook contains numerous guides for end users on how to create high-quality content efficiently, optimize it for mobile, and engage visitors with well-structured information. The tutorial is useful for end users; if you are a developer, please refer to the [technical manual](https://n1ed.com/docs) for installation details and maintenance practices. ## Create and edit content structure - [Build content block by block: 5 articles: Insert new blocks using Bootstrap column structures and edit existing ones](https://n1ed.com/how-to/bootstrap/editor/bootstrap-block-by-block-builder) - [Custom block templates: 6 articles: Define your own custom blocks and reuse them, organize into collections and share them](https://n1ed.com/how-to/bootstrap/templates/bootstrap-custom-block-templates) - [Composing block contents: 9 articles: Edit block structure, style blocks and their content, and master mobile-friendly design](https://n1ed.com/how-to/bootstrap/content/edit-bootstrap-blocks-content) ## Compose content and widgets - [Widgets and media: 10 articles: Insert and edit images or galleries, and add interactive widgets to your content](https://n1ed.com/how-to/widgets-and-media) - [Typography basics: 9 articles: Work with text content and standard styling tools](https://n1ed.com/how-to/typography-and-basics) - [AI text generation: 1 article: Automate filling repetitive content mockups with ChatGPT](https://n1ed.com/how-to/create-text-with-gpt-ai) --- # Create text with AI co-writer > Co-write text with the Txt42 GPT plugin in TinyMCE or CKEditor: continue a phrase with Ctrl+Enter and resize it with Less and More. Source: https://n1ed.com/how-to/create-text-with-gpt-ai Section: AI Text Updated: 2026-09-20 > **Note** > > To try out the new tool, we offer a free limit of 2500 words for each user. To continue using the plugin and beyond, you can obtain your OpenAI API key. Learn more about how to get the key in our [guide](https://n1ed.com/docs/configuration/chat-gpt). [Video](https://n1ed.com/img/video/textareaai.mp4) Txt42 (formerly known as TextareaAI) is embedded in N1ED an innovative tool powered by GPT technology, specifically designed to significantly enhance and expedite the process of writing text. ## How it works With Txt42, you can effortlessly start co-writing from the header or seamlessly continue existing text. Simply select a phrase that closely matches the topic of your new text or place the caret where you wish to continue, then press the `Ctrl+Enter` key combination or utilize the convenient new toolbar buttons. Txt42 will promptly generate relevant text for you. If you desire more or less generated content, you can easily manage it using the intuitive Less/More buttons. When it comes to working with lists, Txt42 streamlines the process by automatically formatting them for you, saving you valuable time and effort. To witness the remarkable capabilities of Txt42 in action, please take a moment to watch the video above. --- # Block-by-block Bootstrap editor for TinyMCE and CKEditor > How N1ED turns a classic WYSIWYG into a builder where each portion of content is a block placed on the Bootstrap column system. Source: https://n1ed.com/how-to/bootstrap/editor/bootstrap-block-by-block-builder Section: Bootstrap blocks > Bootstrap editor Updated: 2026-09-20 ![Block-by-block content building with Bootstrap](https://n1ed.com/img/index/block-by-block.png) Classic editors like CKEditor and TinyMCE work well for editing plain content, but N1ED enhances them by adding Bootstrap support to the editor. It allows you to build and visualize grid structures, create custom block templates, insert Bootstrap widgets, and much more. Each block represents a portion of content of any type, which can optionally be organized using the [Bootstrap column system](https://n1ed.com/how-to/bootstrap/content/bootstrap-12-column-structure-basics). As you write content, you continuously add blocks to your page from [grid templates](https://n1ed.com/how-to/bootstrap/editor/how-to-create-bootstrap-grid-blocks), the [built-in block template gallery](https://n1ed.com/how-to/bootstrap/editor/how-to-insert-bootstrap-blocks), or later by [reusing your own custom templates](https://n1ed.com/how-to/bootstrap/templates/how-to-use-bootstrap-block-templates). You still work within the WYSIWYG (What You See Is What You Get) paradigm but gain new capabilities for handling Bootstrap elements, particularly its column system and [Bootstrap widgets](https://n1ed.com/how-to/bootstrap-widgets). ![Advanced Bootstrap Editor plugin for TinyMCE and CKEditor](https://n1ed.com/img/how-to/bootstrap/editor/advanced-bootstrap-editor-for-ckeditor-and-tinymce.png) ![Insert new Bootstrap block to CKEditor or TinyMCE from Bootstrap template gallery](https://n1ed.com/img/how-to/bootstrap/editor/insert-block-templates-from-gallery.png) ![Bootstrap toolbar in TinyMCE or CKEditor](https://n1ed.com/img/how-to/bootstrap/editor/bootstrap-toolbar-in-ckeditor-tinymce.png) ![Edit Bootstrap column structure](https://n1ed.com/img/how-to/bootstrap/editor/edit-bootstrap-column-structure.png) ![Insert new empty Bootstrap grid structure from templates](https://n1ed.com/img/how-to/bootstrap/editor/bootstrap-grid-templates-collection.png) --- # How to insert new blocks from built-in gallery into TinyMCE and CKEditor > Press the plus button to open the block collection dialog and drop a ready-made Bootstrap block at the caret position in the content. Source: https://n1ed.com/how-to/bootstrap/editor/how-to-insert-bootstrap-blocks Section: Bootstrap blocks > Bootstrap editor > Insert new blocks from gallery Updated: 2026-09-20 Every Bootstrap block is inserted from a single place - the Bootstrap block collection dialog. It can be accessed from the CKEditor/TinyMCE toolbar, using buttons on the [block layout mockup](https://n1ed.com/how-to/bootstrap/content/how-to-edit-bootstrap-column-structure), or from context actions in several places within N1ED. Open the dialog by pressing the "+" button, scroll through it, and choose a desired block. Depending on the position in the content where you pressed the button, the selected block is inserted at that location. ![Insert new Bootstrap block to CKEditor or TinyMCE from Bootstrap template gallery](https://n1ed.com/img/how-to/bootstrap/editor/insert-block-templates-from-gallery.png) *Bootstrap block templates gallery* Initially, there is a built-in gallery with a lot of handy Bootstrap block templates. Later, you can [define your own block templates](https://n1ed.com/how-to/bootstrap/templates/how-to-create-bootstrap-block-template) after editing standard blocks directly in the editor and reuse them by [inserting custom blocks from templates](https://n1ed.com/how-to/bootstrap/templates/how-to-use-bootstrap-block-templates). [Grid built-in templates](https://n1ed.com/how-to/bootstrap/editor/how-to-create-bootstrap-grid-blocks) are also available for insertion. --- # How to insert custom Bootstrap grid into TinyMCE and CKEditor > Insert an empty Bootstrap grid from the block dialog, tune its columns in the structure editor, and optionally add sample content. Source: https://n1ed.com/how-to/bootstrap/editor/how-to-create-bootstrap-grid-blocks Section: Bootstrap blocks > Bootstrap editor > Insert blocks custom grid Updated: 2026-09-20 Inserting custom Bootstrap columns in CKEditor or TinyMCE is an essential feature. All the options for this are provided in the same Bootstrap block dialog you might have already used for [inserting blocks from gallery](https://n1ed.com/how-to/bootstrap/editor/how-to-insert-bootstrap-blocks). Select a place in the content where you want to insert a new block with an empty Bootstrap structure, open the dialog there, and click on the type of structure you wish to insert. ![Insert new empty Bootstrap grid structure from templates](https://n1ed.com/img/how-to/bootstrap/editor/bootstrap-grid-templates-collection.png) *Grid block templates gallery* Then the edit structure dialog will open, allowing you to resize and move columns, tuning the grid to your needs. There is also a checkbox that lets you fill this new structure with sample content. ![Edit Bootstrap column structure](https://n1ed.com/img/how-to/bootstrap/editor/edit-bootstrap-column-structure.png) *Bootstrap column structure editor* The [Bootstrap structure editor](https://n1ed.com/how-to/bootstrap/content/how-to-edit-bootstrap-column-structure) dialog above will be available to you later on as well. --- # How to rearrange, copy and delete Bootstrap blocks in TinyMCE and CKEditor > Clone a block, move it up or down, or delete it using the context actions on the toolbar, the sidebar or over the block itself. Source: https://n1ed.com/how-to/bootstrap/editor/how-to-rearrange-copy-delete-boostrap-blocks Section: Bootstrap blocks > Bootstrap editor > Rearrange, copy, delete blocks Updated: 2026-09-20 All the blocks are placed in the content area of TinyMCE and CKEditor. They are stacked on top of each other, defining a linear sequence. If you select a block by placing the caret inside it or clicking on any of its child elements, the context actions for the selected Bootstrap block are available. These actions are located on the CKEditor/TinyMCE toolbar, in the N1ED sidebar. ![Bootstrap toolbar in TinyMCE or CKEditor](https://n1ed.com/img/how-to/bootstrap/editor/bootstrap-toolbar-in-ckeditor-tinymce.png) *Bootstrap toolbar in CKEditor/TinyMCE* In [Advanced Bootstrap Editor mode](https://n1ed.com/how-to/bootstrap/editor/how-to-use-advanced-bootstrap-editor), all these actions are available directly near containers, rows, and columns. ![Apply any action to Bootstrap block in CKEditor or TinyMCE](https://n1ed.com/img/how-to/bootstrap/editor/actions-over-bootstrap-block.png) *Bootstrap block editing toolset in CKEditor/TinyMCE* You can clone the selected block, move it up or down, delete it, or [save the custom block template](https://n1ed.com/how-to/bootstrap/templates/how-to-create-bootstrap-block-template) or [update it](https://n1ed.com/how-to/bootstrap/templates/how-to-update-bootstrap-block-template) if it was inserted from the custom block template gallery. --- # How to build Bootstrap content with Advanced Bootstrap Editor in CKEditor or TinyMCE > Press the Grid button for a structure-first mode that exposes controls on containers, rows and columns and pauses content editing. Source: https://n1ed.com/how-to/bootstrap/editor/how-to-use-advanced-bootstrap-editor Section: Bootstrap blocks > Bootstrap editor > Bootstrap Editor advanced mode Updated: 2026-09-20 Advanced Bootstrap Editor mode helps you quickly compose a content block structure. Initially, it helps to add content mockups block by block fast, then switch to content editing mode. When you already have existing content, you may switch to Advanced Bootstrap Editor to have quick access to operations on blocks (containers, rows, columns). You can enter Advanced Bootstrap Editor mode by clicking the "Grid" button. This mode is also activated when your TinyMCE and CKEditor go to full-screen upon the first editor click, displaying the structure and adding context buttons to it (this default behavior can be changed). ![Advanced Bootstrap Editor plugin for TinyMCE and CKEditor](https://n1ed.com/img/how-to/bootstrap/editor/advanced-bootstrap-editor-for-ckeditor-and-tinymce.png) *Advanced Bootstrap Editor in CKEditor/TinyMCE* This mode shows almost all controls related to the Bootstrap structure (in content and on the sidebar) temporary disabling content editing features for that time but making a focus on blocks. In other words, while the standard CKEditor/TinyMCE editing mode is mostly content-oriented, the Advanced Bootstrap Editor mode is structure-first. You can perform any manipulations over the Bootstrap blocks here, and pressing the "Grid" button again will return you to standard content editing mode. Additionally, there is a way to edit the content of a specified Bootstrap column - please use the large "Edit" button above each of them. --- # How to use Bootstrap custom block templates in TinyMCE and CKEditor > The workflow behind custom block templates: start from a built-in block, save your version, organize collections and reuse them. Source: https://n1ed.com/how-to/bootstrap/templates/bootstrap-custom-block-templates Section: Bootstrap blocks > Block templates Updated: 2026-09-27 ![Bootstrap block templates workflow in CKEditor and TinyMCE](https://n1ed.com/img/how-to/bootstrap/templates/bootstrap-block-templates-workflow.png) To speed up [block-by-block constructing](https://n1ed.com/how-to/bootstrap/editor/bootstrap-block-by-block-builder), N1ED introduces a feature to semi-automate repetitive actions by [defining custom block templates](https://n1ed.com/how-to/bootstrap/templates/how-to-create-bootstrap-block-template) and [reusing them](https://n1ed.com/how-to/bootstrap/templates/how-to-use-bootstrap-block-templates). What is a custom block template? It is a Bootstrap block that has a column structure and predefined content inside it. Your editor includes some [built-in block templates](https://n1ed.com/how-to/bootstrap/editor/how-to-insert-bootstrap-blocks) and [empty grid templates](https://n1ed.com/how-to/bootstrap/editor/how-to-create-bootstrap-grid-blocks) you can start with these and save modified templates in your own private gallery, which can be [organized into collections](https://n1ed.com/how-to/bootstrap/templates/how-to-manage-bootstrap-block-templates) or even [shared to other websites](https://n1ed.com/how-to/bootstrap/templates/how-to-share-bootstrap-block-templates) of your own. ![Edit Bootstrap column structure](https://n1ed.com/img/how-to/bootstrap/templates/update-bootstrap-custom-template.png) ![Manage Bootstrap block template item in TinyMCE/CKEditor](https://n1ed.com/img/how-to/bootstrap/templates/manage-bootstrap-block-template-item.png) ![Create a sharing rule](https://n1ed.com/img/how-to/bootstrap/templates/bootstrap-blocks-control-panel.png) ![Dialog of Bootstrap block sharing rule](https://n1ed.com/img/how-to/bootstrap/templates/share-bootstrap-block-templates.png) Every control of the block library, and what is part of the Premium plan, on one page: [Managing Bootstrap custom blocks](https://n1ed.com/docs/configuration/bootstrap-blocks). --- # How to create custom Bootstrap block template in TinyMCE and CKEditor > Edit a built-in block in the editor and press the star button to save it as your own template with a preview generated for you. Source: https://n1ed.com/how-to/bootstrap/templates/how-to-create-bootstrap-block-template Section: Bootstrap blocks > Block templates > Create custom block template Updated: 2026-09-27 - Insert some built-in block using the button - Edit its contents directly in the editor - Save this block using the button - The block will then appear in the block gallery, and you can reuse or share it You can define custom blocks that can be used later for quickly building new article structures from your personalized blocks. When you edit content in CKEditor or TinyMCE, you can create a custom Bootstrap block at any time - there is no special mode for this: just click on the star icon, and the block creation dialog will appear. ![Create block template in CKEditor/TinyMCE](https://n1ed.com/img/how-to/bootstrap/save-custom-block-template.png) *Define Bootstrap block template dialog* N1ED will automatically create a screenshot for the new custom block, and you may optionally set a title and move it to one of your block collections. You can link the newly defined block to your own collection. These sets can be created and selected using the corresponding control. Later, you may want to [organize your template collections](https://n1ed.com/how-to/bootstrap/templates/how-to-manage-bootstrap-block-templates) more thoroughly. Pressing the "Save" button will store the block in your API key block storage and make it available for [inserting into the content](https://n1ed.com/how-to/bootstrap/templates/how-to-use-bootstrap-block-templates) from the [block gallery dialog](https://n1ed.com/how-to/bootstrap/editor/how-to-insert-bootstrap-blocks). Every control of the block library, and what is part of the Premium plan, on one page: [Managing Bootstrap custom blocks](https://n1ed.com/docs/configuration/bootstrap-blocks). --- # How to update custom Bootstrap block template in TinyMCE and CKEditor > Press the filled star to overwrite an existing block template, or tick the option to store the edited block as a new one instead. Source: https://n1ed.com/how-to/bootstrap/templates/how-to-update-bootstrap-block-template Section: Bootstrap blocks > Block templates > Update custom block template Updated: 2026-09-27 Updating custom block templates is also done in WYSIWYG mode of your CKEditor or TinyMCE powered by N1ED. You just edit your content as you normally do, and at any moment when you need to update the block template, you simply press the filled star icon, saving the block using the same process as when you [create custom block templates](https://n1ed.com/how-to/bootstrap/templates/how-to-create-bootstrap-block-template). ![Edit Bootstrap column structure](https://n1ed.com/img/how-to/bootstrap/templates/update-bootstrap-custom-template.png) *Update edited Bootstrap block template dialog in TinyMCE/CKEditor* You can distinguish whether the block already exists in the Bootstrap block gallery by its style: a filled star means you will update an existing block, while an unfilled star highlights the fact that this block will be saved as a new one. You can also save the block as new instead of updating it by checking the appropriate option in the save block dialog. Every control of the block library, and what is part of the Premium plan, on one page: [Managing Bootstrap custom blocks](https://n1ed.com/docs/configuration/bootstrap-blocks). --- # How to insert custom Bootstrap block from templates into TinyMCE and CKEditor > Open the block gallery with the plus button and insert one of your saved custom blocks at the chosen place in the content. Source: https://n1ed.com/how-to/bootstrap/templates/how-to-use-bootstrap-block-templates Section: Bootstrap blocks > Block templates > Insert custom block from templates Updated: 2026-09-27 All your custom block templates are organized into [collections](https://n1ed.com/how-to/bootstrap/templates/how-to-manage-bootstrap-block-templates) that you define and are accessible through the [block gallery dialog](https://n1ed.com/how-to/bootstrap/editor/how-to-insert-bootstrap-blocks). Open the dialog by pressing the "+" button near the place where you want to insert your Bootstrap block and choose the block. It will be immediately inserted into CKEditor/TinyMCE. ![Insert Bootstrap custom template block from custom library](https://n1ed.com/img/how-to/bootstrap/templates/insert-custom-bootstrap-template.png) *Insert custom Bootstrap block template from your own library* [Creating custom block template](https://n1ed.com/how-to/bootstrap/templates/how-to-create-bootstrap-block-template) collections may save a lot of time for you and your colleagues by automating monotonous actions and guaranteeing that correctly styled (possibly brand-styled) block templates will be inserted into your website content. Every control of the block library, and what is part of the Premium plan, on one page: [Managing Bootstrap custom blocks](https://n1ed.com/docs/configuration/bootstrap-blocks). --- # How to organize Bootstrap block templates into collections in TinyMCE and CKEditor > Group saved block templates into collections from the block gallery dialog, and drag them between categories or delete them. Source: https://n1ed.com/how-to/bootstrap/templates/how-to-manage-bootstrap-block-templates Section: Bootstrap blocks > Block templates > Organize custom blocks templates Updated: 2026-09-27 When you save your first block templates, it's probably fine to stay with one default collection you have at the start. Later, as your custom Bootstrap block template gallery grows, you may want to categorize them into groups to make it easier to insert them into TinyMCE and CKEditor. There are different ways to manage your collections. The most advanced tools are located in the [block template gallery dialog](https://n1ed.com/how-to/bootstrap/editor/how-to-insert-bootstrap-blocks). All the collections at the top (up to the standard grid block templates) are your custom Bootstrap block templates, so you can modify them. ![Manage Bootstrap block template item in TinyMCE/CKEditor](https://n1ed.com/img/how-to/bootstrap/templates/manage-bootstrap-block-template-item.png) *Changing Bootstrap block template collection* While editing blocks themselves is done using the [Save](https://n1ed.com/how-to/bootstrap/templates/how-to-create-bootstrap-block-template) or [Update](https://n1ed.com/how-to/bootstrap/templates/how-to-update-bootstrap-block-template) block dialog, you can organize blocks into categories or delete them directly from here. Use the corresponding buttons and the drag-and-drop feature to rearrange them within a collection or move them to another collection. ![Organize Bootstrap block template collections in TinyMCE/CKEditor](https://n1ed.com/img/how-to/bootstrap/templates/organize-bootstrap-block-template-collections.png) *Organize Bootstrap block template collections* After creating a number of collections of block templates you might think about [sharing blocks across websites](https://n1ed.com/how-to/bootstrap/templates/how-to-share-bootstrap-block-templates). Every control of the block library, and what is part of the Premium plan, on one page: [Managing Bootstrap custom blocks](https://n1ed.com/docs/configuration/bootstrap-blocks). --- # How to share custom Bootstrap blocks templates across websites > Share whole block categories from one API key to others in the Dashboard, where other sites can insert but not change them. Source: https://n1ed.com/how-to/bootstrap/templates/how-to-share-bootstrap-block-templates Section: Bootstrap blocks > Block templates > Share across websites Updated: 2026-09-27 When managing multiple websites (or tens or hundreds, as a SaaS), you might want to reuse blocks created for one website on another. Block templates displayed in the [insert block](https://n1ed.com/how-to/bootstrap/editor/how-to-insert-bootstrap-blocks) dialog can be shared from one website (API key) to another. This requires access to the [Dashboard](https://n1ed.com/dashboard), so usually only the manager of your project can share blocks, and access to this feature is restricted for end users who compose content directly in the editor. However, they can use shared blocks as their own. Please consider organizing your block templates into convenient collections, as sharing individual blocks is not supported. Assign block templates to categories when defining new custom block templates or regrouping existing ones. ![Blocks dialog with imported blocks in TinyMCE/CKEditor](https://n1ed.com/img/how-to/bootstrap/templates/bootstrap-imported-block-templates.png) *How imported blocks look like* Block template sharing works in a very simple way: using the Dashboard, you select a source website (API key) and specify which block categories to share. They immediately appear on other websites (API keys) in the Bootstrap Blocks dialog with permissions to view and insert them, but not to modify, update, or delete them from the library. ![Create a sharing rule](https://n1ed.com/img/how-to/bootstrap/templates/bootstrap-blocks-control-panel.png) *Create a block template collection sharing rule* There are two ways to export block categories: you can either share them with every other website you have or specify individual websites (API keys). Exporting to all websites is useful when you want these blocks to be visible on any newly created websites (API keys) in the future. ![Dialog of Bootstrap block sharing rule](https://n1ed.com/img/how-to/bootstrap/templates/share-bootstrap-block-templates.png) *Sharing rule dialog* Every control of the block library, and what is part of the Premium plan, on one page: [Managing Bootstrap custom blocks](https://n1ed.com/docs/configuration/bootstrap-blocks). --- # How to edit Bootstrap block content and styles in TinyMCE and CKEditor > Start here to fill a Bootstrap block: editable areas inside columns, structure changes, styling, and saving the result as a template. Source: https://n1ed.com/how-to/bootstrap/content/edit-bootstrap-blocks-content Section: Bootstrap blocks > Editing content Updated: 2026-09-20 Once you have defined a [column structure](https://n1ed.com/how-to/bootstrap/content/bootstrap-12-column-structure-basics) for a block, you can continue editing its content - [setting a background](https://n1ed.com/how-to/bootstrap/content/how-to-set-bootstrap-block-background), [editing the structure](https://n1ed.com/how-to/bootstrap/content/how-to-edit-bootstrap-column-structure), and more. N1ED relies on CKEditor or TinyMCE’s composition tools, preserving the familiar editor controls while smoothly introducing Bootstrap-related features. While in CKEditor/TinyMCE, you typically start by editing plain text content, N1ED provides multiple editable areas inside columns, which are contained within blocks. You can edit these areas individually, modifying their inner content and adjusting [styles](https://n1ed.com/how-to/bootstrap/content/how-to-change-bootstrap-block-styles), [alignment](https://n1ed.com/how-to/bootstrap/content/how-to-change-alignment-in-bootstrap-blocks), and more. Directly within the editor, when you realize that a block is useful and can be reused, you can [create a custom template](https://n1ed.com/how-to/bootstrap/templates/how-to-create-bootstrap-block-template) and [reuse it](https://n1ed.com/how-to/bootstrap/templates/how-to-use-bootstrap-block-templates) later. Additionally, you can modify its content and properties at any time and [update the template](https://n1ed.com/how-to/bootstrap/templates/how-to-update-bootstrap-block-template) in your gallery. This creates an ongoing process of refining your personalized editor alongside the content of your website pages. ![How to set background of Bootstrap container in CKEditor or TinyMCE](https://n1ed.com/img/how-to/bootstrap/content/how-to-set-background-for-bootstrap-block.png) ![Setting repeating image background for Bootstrap container](https://n1ed.com/img/how-to/bootstrap/content/bootstrap-container-background.png) ![Bootstrap container and row with backgrounds set using CKEditor or TinyMCE](https://n1ed.com/img/how-to/bootstrap/content/bootstrap-block-template-with-set-background.png) ![Editing Bootstrap classes, styles and attributes from TinyMCE or CKEditor](https://n1ed.com/img/how-to/bootstrap/content/editing-bootstrap-container-styles-and-classes.png) ![Bootstrap row alignment in TinyMCE or CKEditor](https://n1ed.com/img/how-to/bootstrap/content/bootstrap-row-alignment.png) ![Bootstrap column alignment in TinyMCE or CKEditor](https://n1ed.com/img/how-to/bootstrap/content/bootstrap-column-alignment.png) ![Text alingment feature of TinyMCE used inside Bootstrap column](https://n1ed.com/img/how-to/bootstrap/content/text-alignment-inside-bootstrap-col.png) ![Bootstrap responsive design on mobile phones and tablets](https://n1ed.com/img/how-to/bootstrap/content/responsive-bootstrap-design-on-mobile-devices.png) ![Bootstrap responsive design on desktops and large screen devices](https://n1ed.com/img/how-to/bootstrap/content/responsive-bootstrap-design-on-large-displays.png) ![Edit HTML source code of bootstrap block](https://n1ed.com/img/how-to/bootstrap/content/editing-bootstrap-source-html-code.png) --- # Basics of Bootstrap 12-column system used in TinyMCE and CKEditor > How containers, rows and columns nest inside a block, and how the 12-slot grid splits each row in TinyMCE and CKEditor. Source: https://n1ed.com/how-to/bootstrap/content/bootstrap-12-column-structure-basics Section: Bootstrap blocks > Editing content > Column system basics Updated: 2026-09-20 Bootstrap, the framework used for content organization, offers a way to keep content in columns, columns in rows, and rows in containers. Here is an illustration of a typical block that you can create in TinyMCE or CKEditor: ![Bootstrap container structure](https://n1ed.com/img/how-to/bootstrap/content/bootstrap-container-structure.png) *Typical structure of Bootstrap block consisting of 2 containers, a row and columns* As you can see, N1ED uses two containers - one for handling the fields of the page in the area of the current block, and the second for storing a row or rows, with each row encapsulating a 12-column system. The 12-column system of Bootstrap means that you can divide each row into 12 vertical slots, and each column can span between 1 and 12 of these slots. Gaps can also exist between columns. Also, there are more complex configurations that can be achieved by setting [alignment inside rows](https://n1ed.com/how-to/bootstrap/content/how-to-change-alignment-in-bootstrap-blocks). 12/12 6/12 6/12 4/12 8/12 4/12 4/12 4/12 3/12 3/12 3/12 3/12 Example of rows with Bootstrap columns of various width The best illustration of the variations above is the [empty grid block templates](https://n1ed.com/how-to/bootstrap/editor/how-to-create-bootstrap-grid-blocks) available for insertion from the block gallery dialog: ![Insert new empty Bootstrap grid structure from templates](https://n1ed.com/img/how-to/bootstrap/editor/bootstrap-grid-templates-collection.png) *Grid block templates gallery* --- # How to edit Bootstrap column structure in TinyMCE and CKEditor > Click the layout mockup of an inserted block to open the grid dialog, then resize, move or shuffle its columns with the mouse. Source: https://n1ed.com/how-to/bootstrap/content/how-to-edit-bootstrap-column-structure Section: Bootstrap blocks > Editing content > Edit block structure Updated: 2026-09-20 After you insert any Bootstrap block, starting with an [empty Bootstrap grid](https://n1ed.com/how-to/bootstrap/editor/how-to-create-bootstrap-grid-blocks), [built-in gallery template](https://n1ed.com/how-to/bootstrap/editor/how-to-insert-bootstrap-blocks), or your [custom Bootstrap block template](https://n1ed.com/how-to/bootstrap/templates/how-to-use-bootstrap-block-templates), the feature to modify the structure is always available. Please select the block whose column structure you want to modify by clicking on it or placing the caret inside. Then click on the structure layout mockup: ![Bootstrap grid schema](https://n1ed.com/img/how-to/bootstrap/content/bootstrap-block-schema.png) *Clicking on block schema opens Bootstrap grid editor* The dialog with the Bootstrap grid editor will appear. You can change the sizes of columns, move them along the row, or shuffle them as you wish with simple mouse actions. ![Bootstrap grid columns resizing example](https://n1ed.com/img/grid-edit/resize-6.png) ![Bootstrap grid columns moving example](https://n1ed.com/img/grid-edit/move-4.png) Note that each column displays a number representing its initial order in the content to make it easier to understand which column you are moving or resizing. After clicking the "Save" button, all the columns in TinyMCE and CKEditor will immediately change their sizes/locations. --- # How to set background of blocks: Bootstrap containers, rows and columns in TinyMCE and CKEditor > Give a container, row or column its own color, gradient or image with the Set Background button, layered one over another. Source: https://n1ed.com/how-to/bootstrap/content/how-to-set-bootstrap-block-background Section: Bootstrap blocks > Editing content > Set block background Updated: 2026-09-20 When you select a Bootstrap container, row, or column, which are [elements of blocks](https://n1ed.com/how-to/bootstrap/content/bootstrap-12-column-structure-basics), their style settings are displayed in the sidebar. The background is a part of [styles](https://n1ed.com/how-to/bootstrap/content/how-to-change-bootstrap-block-styles), and it can be edited using the "Set Background" button. The editor will indicate the set background styles near this button and, of course, immediately apply them to the content. ![How to set background of Bootstrap container in CKEditor or TinyMCE](https://n1ed.com/img/how-to/bootstrap/content/how-to-set-background-for-bootstrap-block.png) *Click the button to open the background editing dialog* Backgrounds of all block elements can be set independently. You can think about their priority as layers on a canvas. The container's background goes at the bottom of the stack, then the background of the row, and finally the background of the columns overlaps the previous ones, but only inside the area managed by the current element. By default, any element has no background (which means a transparent background) unless you start from a [built-in template](https://n1ed.com/how-to/bootstrap/editor/how-to-insert-bootstrap-blocks) or [custom template](https://n1ed.com/how-to/bootstrap/templates/how-to-use-bootstrap-block-templates) with a pre-set background. ![Setting repeating image background for Bootstrap container](https://n1ed.com/img/how-to/bootstrap/content/bootstrap-container-background.png) *Setting a pattern for Bootstrap block background* The background consists of three parts: color, gradient, and image. You can set all three of them or omit some. Usually, you only need to set one of them, but when setting an image, it can be helpful to also set a plain color or gradient to optimize your website's loading time. This is because the browser will fill the area with the specified color/gradient immediately while loading the image. ![Bootstrap container and row with backgrounds set using CKEditor or TinyMCE](https://n1ed.com/img/how-to/bootstrap/content/bootstrap-block-template-with-set-background.png) *Result of setting a background to Bootstrap block* In the sample screenshots, we've illustrated setting a pattern image background for the outer container and a solid white background for the inner row. --- # How to edit Bootstrap block styles in TinyMCE and CKEditor > Select a container, row or column in the breadcrumbs and edit its classes, styles and attributes in the sidebar with autocomplete. Source: https://n1ed.com/how-to/bootstrap/content/how-to-change-bootstrap-block-styles Section: Bootstrap blocks > Editing content > Change block styles Updated: 2026-09-20 Bootstrap blocks consist of several elements folded into each other: two containers (the outer one represents the fields around the block, and the inner one contains the structure), a row, and a set of columns. When you place your caret somewhere in the content or directly select an element, breadcrumbs will show you the structure of the Bootstrap block elements linked to the selected element. ![Breadcrumbs with Bootstrap container selected](https://n1ed.com/img/how-to/bootstrap/content/breadcrumbs-with-bootstrap-block-structure.png) *Click on an element to select it* You can then select the needed element directly in the breadcrumbs to see and edit its properties in the sidebar editor. ![Editing Bootstrap classes, styles and attributes from TinyMCE or CKEditor](https://n1ed.com/img/how-to/bootstrap/content/editing-bootstrap-container-styles-and-classes.png) *You are free to assign any Bootstrap or own classes to the element or set styles* This editor displays all classes, styles, and attributes of the selected element and also provides element-specific options. ![List of Bootstrap autocomplete classes](https://n1ed.com/img/how-to/bootstrap/content/bootstrap-classes-autocomplete.png) *Bootstrap class autocomplete is available while you type* At the top of the sidebar, the layout mockup of the block is shown. You can [edit its column structure](https://n1ed.com/how-to/bootstrap/content/how-to-edit-bootstrap-column-structure), [insert new blocks](https://n1ed.com/how-to/bootstrap/editor/how-to-insert-bootstrap-blocks) from there, or even [create a custom Bootstrap block template](https://n1ed.com/how-to/bootstrap/templates/how-to-create-bootstrap-block-template). N1ED does not encourage using [HTML source editing](https://n1ed.com/how-to/bootstrap/content/how-to-edit-bootstrap-source-html-code), but it is available for deep tuning as well. --- # How to change alignment in Bootstrap blocks in TinyMCE and CKEditor > Align columns within a row, contents within a column, and text, after selecting the element in the content area or the breadcrumbs. Source: https://n1ed.com/how-to/bootstrap/content/how-to-change-alignment-in-bootstrap-blocks Section: Bootstrap blocks > Editing content > Content alignment inside blocks Updated: 2026-09-20 There are different ways to change content alignment inside Bootstrap blocks. To do this, you need to select the desired element in the editor or breadcrumbs, as you do when [styling Bootstrap elements](https://n1ed.com/how-to/bootstrap/content/how-to-change-bootstrap-block-styles). Then, the alignment options will be shown: #### Bootstrap Row The sidebar shows vertical and horizontal alignment options for the inner Bootstrap columns. These options will not change the alignment within the columns. ![Bootstrap row alignment in TinyMCE or CKEditor](https://n1ed.com/img/how-to/bootstrap/content/bootstrap-row-alignment.png) *Sample of bottom alignment of Bootstrap columns inside a row* #### Bootstrap Column The sidebar shows an option to align all content items vertically. This option will keep text alignment (see below). ![Bootstrap column alignment in TinyMCE or CKEditor](https://n1ed.com/img/how-to/bootstrap/content/bootstrap-column-alignment.png) *Sample of bottom alignment of contents inside a Bootstrap column* #### Text Place the caret inside some text (paragraph or header) element, then use standard TinyMCE and CKEditor text alignment options for that. ![Text alingment feature of TinyMCE used inside Bootstrap column](https://n1ed.com/img/how-to/bootstrap/content/text-alignment-inside-bootstrap-col.png) *Standard TinyMCE or CKEditor feature to set text or image alignment* If you regularly change alignments inside your blocks, it could improve the experience of using the editor if you [create Bootstrap custom block templates](https://n1ed.com/how-to/bootstrap/templates/how-to-create-bootstrap-block-template) and [reuse them](https://n1ed.com/how-to) afterward. --- # Basics of creating responsive mobile-ready content with Bootstrap in TinyMCE and CKEditor > What the XS to XXL Bootstrap breakpoints mean and how a device picks one, before you adapt block content to phones and tablets. Source: https://n1ed.com/how-to/bootstrap/content/bootstrap-responsive-tools-basics Section: Bootstrap blocks > Editing content > Mobile-ready content basics Updated: 2026-09-20 Most users nowadays visit websites from mobile devices, so your website should be adapted to their screen size. Different screen widths are grouped into a set of breakpoints (in terms of Bootstrap). On each of these breakpoints, your content should be displayed correctly. In Bootstrap 5, the breakpoints are: XS, SM, MD, LG, XL, XXL – very similar to clothing sizes. When your website page is accessed by a user device, the content will be rendered according to its screen size by using the nearest breakpoint, which is equal to or larger than the device display width. For example, the XXL breakpoint defines column arranging behavior for extra-large displays, XL for standard-size displays, LG for small but still desktop displays, and then go tablet and mobile displays. The screen size may change (e.g., if the user rotates the device), and another breakpoint will be immediately applied. This ensures that your content is rendered correctly on any device. ![Bootstrap responsive design on mobile phones and tablets](https://n1ed.com/img/how-to/bootstrap/content/responsive-bootstrap-design-on-mobile-devices.png) *Bootstrap responsive design on mobile devices* ![Bootstrap responsive design on desktops and large screen devices](https://n1ed.com/img/how-to/bootstrap/content/responsive-bootstrap-design-on-large-displays.png) *Bootstrap responsive design on desktops and large screens* The breakpoints inherit each other from mobile breakpoints to wider ones. Usually, you don't need to worry about this if you're not [using HTML editing](https://n1ed.com/how-to/bootstrap/content/how-to-edit-bootstrap-source-html-code) for exceptional cases, because when you [edit structure](https://n1ed.com/how-to/bootstrap/content/how-to-edit-bootstrap-column-structure) with N1ED tools inside TinyMCE/CKEditor, it is done transparently without special actions on your part. The most useful tool here is the feature to [preview responsive content](https://n1ed.com/how-to/bootstrap/content/how-to-build-and-preview-bootstrap-responsive-content) to ensure that it is mobile-ready. --- # How to build and preview Bootstrap responsive content in TinyMCE and CKEditor > Use the breadcrumbs ruler in Advanced Bootstrap Editor mode to force a breakpoint and preview a block at each screen width. Source: https://n1ed.com/how-to/bootstrap/content/how-to-build-and-preview-bootstrap-responsive-content Section: Bootstrap blocks > Editing content > Build responsive content Updated: 2026-09-20 Previous chapter - [Understanding the basics of Bootstrap's mobile-ready design](https://n1ed.com/how-to/bootstrap/content/bootstrap-responsive-tools-basics). N1ED already handles most of the responsive features transparently. For example, when you [insert an empty Bootstrap grid](https://n1ed.com/how-to/bootstrap/editor/how-to-create-bootstrap-grid-blocks), it adds different classes for mobile and wide-screen breakpoints. You can then control all your breakpoints in [Advanced Bootstrap Editor mode](https://n1ed.com/how-to/bootstrap/editor/how-to-use-advanced-bootstrap-editor). Switch to this mode by pressing the "Grid" icon and see the breadcrumbs ruler at the top of the content. ![Edit and preview Bootstrap responsible content in TinyMCE/CKEditor](https://n1ed.com/img/how-to/bootstrap/bootstrap-responsible-content-editing.gif) Switching between them will change content display in TinyMCE and CKEditor, forcing the selected Bootstrap breakpoint. This will have no effect on the real content display on the side of website visitors, as Bootstrap automatically chooses the appropriate breakpoint using its CSS rules. --- # How to edit source HTML of Bootstrap blocks in TinyMCE and CKEditor > Open the Source code dialog for syntax-highlighted HTML, and see which tags are kept untouched and which ones get filtered. Source: https://n1ed.com/how-to/bootstrap/content/how-to-edit-bootstrap-source-html-code Section: Bootstrap blocks > Editing content > Editing HTML source code Updated: 2026-09-20 While N1ED provides all the tools for deeply [styling Bootstrap elements](https://n1ed.com/how-to/bootstrap/content/how-to-change-bootstrap-block-styles) and [Bootstrap widgets](https://n1ed.com/how-to/bootstrap-widgets), sometimes there are tricky cases when N1ED's mappings are not enough. The HTML editor, called by pressing the standard "Source code" button or menu item in TinyMCE or CKEditor, is upgraded with a powerful HTML editor that supports syntax highlighting. ![Edit HTML source code of bootstrap block](https://n1ed.com/img/how-to/bootstrap/content/editing-bootstrap-source-html-code.png) *Edit HTML source code* You can insert or modify any content there, and it will be shown in the editor after you close the dialog. N1ED does not take part in rendering such content and will not break it, even if it does not support managing some specific thing you inserted. It relies on the underlying code of TinyMCE/CKEditor (and more generally, the code of the browser that renders everything). Any unknown or unsupported class, style, attribute, or tag will be kept without change, but there are obvious exceptions to this rule: - If you insert a special tag like `