# N1ED > 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. It is one plugin on one API key, configured in the Dashboard at https://n1ed.com/dashboard. Free to start; the paid plans are on https://n1ed.com/pricing. What every AI assistant 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. How to read this site: - Every page has a Markdown copy at its URL + `.md`, `index.md` after a URL that ends in `/` (the links below point at them). - All of them in one file: https://n1ed.com/llms-full.txt - N1ED with AI (copy a page, the docs in one file, the skill): https://n1ed.com/docs/ai ## Start here - [Home: Big Upgrade for TinyMCE & CKEditor](https://n1ed.com/index.md): Upgrade TinyMCE and CKEditor with structured editing, file management, image editing, and AI-powered writing. One plugin, complete toolkit. - [N1ED Documentation](https://n1ed.com/docs.md): 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. - [Plans & pricing](https://n1ed.com/pricing.md): Compare the free Start plan with Premium, Studio and SaaS: price per website and which blocks, widgets and file tools each unlocks. - [Use N1ED with AI](https://n1ed.com/docs/ai.md): 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. ## Installation - [Installation](https://n1ed.com/docs/install.md): 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. - [Editor42](https://n1ed.com/docs/install/editor42.md): 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. - [TinyMCE](https://n1ed.com/docs/install/tinymce.md): 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. - [CKEditor 5](https://n1ed.com/docs/install/ckeditor-5.md): 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. - [CKEditor 4](https://n1ed.com/docs/install/ckeditor.md): Install the N1ED plugin into your CKEditor 4: Bootstrap blocks, widgets, the file manager and the image editor in the editor you already run. - [Drupal](https://n1ed.com/docs/install/drupal.md): 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. - [Drupal module overview](https://n1ed.com/docs/install/drupal/module-overview.md): What changes on a Drupal site once the module is enabled: a boosted CKEditor, Bootstrap block tools and Flmngr on the image fields. - [Drupal: Working with Paragraphs](https://n1ed.com/docs/install/drupal/paragraphs.md): Build multi-column blocks inside CKEditor instead of adding Paragraphs items, and keep Drupal article editing forms short. - [Drupal 8 (legacy)](https://n1ed.com/docs/install/drupal-8.md): 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. - [Joomla](https://n1ed.com/docs/install/joomla.md): 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. - [Joomla 3 (legacy)](https://n1ed.com/docs/install/joomla-3.md): 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. - [Magento](https://n1ed.com/docs/install/magento.md): Install the N1ED extension for Magento 2 with Composer, choose N1ED as the WYSIWYG editor, switch Page Builder off and set your API key. - [React](https://n1ed.com/docs/install/react.md): Add the @edsdk/n1ed-react package, render the N1ED component with your apiKey and onEditorChange, then connect a file manager backend. - [JS snippet](https://n1ed.com/docs/install/javascript.md): Add the cloud.n1ed.com script tag with your API key to a page, start TinyMCE from onEditorLoaded, then install the file manager backend. ## Examples - [Examples](https://n1ed.com/docs/examples.md): 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. - [JS snippet](https://n1ed.com/docs/examples/tinymce.md): 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. - [TinyMCE plugin](https://n1ed.com/docs/examples/tinymce-plugin.md): 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. - [CKEditor 5 plugin (beta)](https://n1ed.com/docs/examples/ckeditor-5.md): 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. - [CKEditor 4 plugin](https://n1ed.com/docs/examples/ckeditor.md): 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. - [React](https://n1ed.com/docs/examples/react.md): 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. - [Flmngr demos](https://n1ed.com/docs/examples/file-manager.md): 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. ## File manager - [File manager](https://n1ed.com/docs/file-manager.md): Pick a Flmngr backend for your stack: a Composer package, Laravel, Symfony, a no-Composer PHP zip, Node packages or a microservice. - [PHP Composer package](https://n1ed.com/docs/file-manager/php-composer.md): Run composer require edsdk/flmngr-server-php, point a PHP handler at FlmngrServer, and set the two URLs in the Dashboard to link it. - [PHP Laravel package](https://n1ed.com/docs/file-manager/laravel.md): Add edsdk/flmngr-server-php with Composer and declare a POST route in routes/web.php that calls FlmngrServer with your dirFiles path. - [PHP Symfony package](https://n1ed.com/docs/file-manager/symfony.md): Install the Composer package and add a FlmngrController with a /flmngr route that hands requests to FlmngrServer in your Symfony app. - [PHP script (no Composer)](https://n1ed.com/docs/file-manager/php-script.md): Download the no-Composer ZIP, unpack it and set dirFiles in flmngr.php to run the backend on projects that do not use Composer. - [Node package](https://n1ed.com/docs/file-manager/node-custom.md): Use the @edsdk/flmngr-server-node package as a library and wire FlmngrServer.flmngrRequest into the routing of any Node framework. - [Node Express module](https://n1ed.com/docs/file-manager/node-express.md): Install @edsdk/flmngr-server-node-express and call bindFlmngr to map the file manager URL and a files directory in an Express app. - [Node Nest module](https://n1ed.com/docs/file-manager/node-nest.md): Install the Nest Express package and call bindFlmngr inside bootstrap to serve file manager requests from your NestJS application. - [Standalone microservice](https://n1ed.com/docs/file-manager/microservice.md): 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. - [File manager settings](https://n1ed.com/docs/configuration/file-manager.md): 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. - [Unsplash API key](https://n1ed.com/docs/configuration/generate-unsplash-key.md): Register an Unsplash application and paste its access key so editors can search and download free stock photos from inside Flmngr. - [Cloud storage](https://n1ed.com/docs/cloud-storage.md): How a proxy microservice serves your bucket or container to Flmngr, so cloud files work with any editor and no backend of your own. - [Cloud storage: Amazon S3](https://n1ed.com/docs/cloud-storage/amazon-s3.md): Store files in an Amazon S3 bucket with no Flmngr backend on your server: enter the bucket credentials and directory in the Dashboard. - [Cloud storage: S3-compatible (Custom)](https://n1ed.com/docs/cloud-storage/s3-compatible.md): Set the storage type to Custom to use Cloudflare R2, DigitalOcean Spaces, Wasabi, Backblaze B2 or MinIO, with settings per provider. - [Cloud storage: Azure Blob](https://n1ed.com/docs/cloud-storage/azure-blob.md): Point Flmngr at an Azure Blob container using credentials from the Azure portal, with no file manager backend installed on your server. ## Configuration - [Configuration](https://n1ed.com/docs/configuration.md): 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. - [Bootstrap & Tailwind CSS](https://n1ed.com/docs/configuration/bootstrap-editor.md): 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. - [Extra CSS & JS](https://n1ed.com/docs/configuration/css-theming.md): 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. - [UI, toolbar and widgets](https://n1ed.com/docs/configuration/ui-and-widgets.md): 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. - [YouTube API key](https://n1ed.com/docs/configuration/youtube.md): Create a Google Cloud project, enable YouTube Data API v3 and paste the key into N1ED to search and embed videos in the editor. - [Image Editor](https://n1ed.com/docs/configuration/image-editor.md): 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. - [OpenAI API key](https://n1ed.com/docs/configuration/chat-gpt.md): Step-by-step guide to enabling ChatGPT service in N1ED. - [Translator](https://n1ed.com/docs/configuration/translator.md): 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. - [Custom blocks](https://n1ed.com/docs/configuration/bootstrap-blocks.md): 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. ## For developers - [For developers](https://n1ed.com/docs/api.md): Entry point for developers who need N1ED configuration calculated per user, or who call the Flmngr file manager from their own code. - [Dynamic config](https://n1ed.com/docs/configuration/api.md): 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. - [Custom CMS](https://n1ed.com/docs/custom-cms.md): Why a CMS shipped to many customers needs a separate N1ED API key per website, and what deeper integration gives its managers. - [Custom CMS: Storing API key in DB](https://n1ed.com/docs/custom-cms/store-api-key.md): 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. - [Custom CMS: Set and change API key](https://n1ed.com/docs/custom-cms/set-and-change-api-key.md): Add a server script behind urlSetApiKey that receives the n1edApiKey the configuration widget posts and saves it in your database. - [Custom CMS: Embed configuration widget](https://n1ed.com/docs/custom-cms/configuration-widget.md): 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. - [Multisite](https://n1ed.com/docs/multisite.md): Give every site in a SaaS CMS or website builder its own N1ED API key so preferences, file storages and block templates stay isolated. - [Multisite: Multi-user app storages](https://n1ed.com/docs/multisite/separating-file-storages.md): Isolate each user or website in its own folder by setting dirFiles on the server and the matching files URL on the client side. - [Multisite: Parent/child API keys](https://n1ed.com/docs/multisite/parent-and-child-api-keys.md): Make many N1ED API keys inherit framework, file manager and image settings from one parent key, and see what each key still keeps. - [Admin API](https://n1ed.com/docs/admin-api.md): Request format, response structure and error codes of the N1ED Admin API used by SaaS providers to automate API key management. - [Admin API: Create API key](https://n1ed.com/docs/admin-api/create-api-key.md): 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. - [Admin API: List API keys](https://n1ed.com/docs/admin-api/list-api-keys.md): Fetch every API key on your N1ED account with its domain and creation date, or list deleted ones, to sync with your own database. - [Admin API: Delete API key](https://n1ed.com/docs/admin-api/delete-api-key.md): 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. - [Admin API: Undelete API key](https://n1ed.com/docs/admin-api/undelete-api-key.md): Restore a deleted N1ED API key together with its configuration, and resolve the error raised when an active key now holds its domain. - [Admin API: Set parent API key](https://n1ed.com/docs/admin-api/set-parent-api-key.md): Assign, replace or remove the parent of a child N1ED API key from code, so it inherits configuration from another key on the account. - [Admin API: Rotate API key](https://n1ed.com/docs/admin-api/rotate-api-key.md): Change characters 9 to 24 of an exposed N1ED API key through the Admin API while the public first 8 characters stay the same. - [Rotate Admin API token](https://n1ed.com/docs/admin-api/rotate-admin-token.md): Replace an exposed N1ED Admin API token with a new one and store it at once, because the old token stops working immediately. ## Resources - [Licensing](https://n1ed.com/resources/licensing.md): One N1ED license covers one final website or app and five users; subdomains and path-separated sites each count as a website. - [Contacts](https://n1ed.com/resources/contacts.md): Reach N1ED technical support from the Dashboard, and find where to send billing, licensing and legal questions to EdSDK. ## How-to - [How-to overview](https://n1ed.com/how-to.md): Cookbook for content authors: build Bootstrap structure, reuse block templates, style blocks, and insert widgets, images and video. - [AI Text](https://n1ed.com/how-to/create-text-with-gpt-ai.md): 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. ## How-to: Bootstrap blocks - [Bootstrap editor](https://n1ed.com/how-to/bootstrap/editor/bootstrap-block-by-block-builder.md): How N1ED turns a classic WYSIWYG into a builder where each portion of content is a block placed on the Bootstrap column system. - [Bootstrap editor: Insert new blocks from gallery](https://n1ed.com/how-to/bootstrap/editor/how-to-insert-bootstrap-blocks.md): Press the plus button to open the block collection dialog and drop a ready-made Bootstrap block at the caret position in the content. - [Bootstrap editor: Insert blocks custom grid](https://n1ed.com/how-to/bootstrap/editor/how-to-create-bootstrap-grid-blocks.md): Insert an empty Bootstrap grid from the block dialog, tune its columns in the structure editor, and optionally add sample content. - [Bootstrap editor: Rearrange, copy, delete blocks](https://n1ed.com/how-to/bootstrap/editor/how-to-rearrange-copy-delete-boostrap-blocks.md): 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. - [Bootstrap Editor advanced mode](https://n1ed.com/how-to/bootstrap/editor/how-to-use-advanced-bootstrap-editor.md): Press the Grid button for a structure-first mode that exposes controls on containers, rows and columns and pauses content editing. - [Block templates](https://n1ed.com/how-to/bootstrap/templates/bootstrap-custom-block-templates.md): The workflow behind custom block templates: start from a built-in block, save your version, organize collections and reuse them. - [Block templates: Create custom block template](https://n1ed.com/how-to/bootstrap/templates/how-to-create-bootstrap-block-template.md): 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. - [Block templates: Update custom block template](https://n1ed.com/how-to/bootstrap/templates/how-to-update-bootstrap-block-template.md): Press the filled star to overwrite an existing block template, or tick the option to store the edited block as a new one instead. - [Block templates: Insert custom block from templates](https://n1ed.com/how-to/bootstrap/templates/how-to-use-bootstrap-block-templates.md): Open the block gallery with the plus button and insert one of your saved custom blocks at the chosen place in the content. - [Block templates: Organize custom blocks templates](https://n1ed.com/how-to/bootstrap/templates/how-to-manage-bootstrap-block-templates.md): Group saved block templates into collections from the block gallery dialog, and drag them between categories or delete them. - [Block templates: Share across websites](https://n1ed.com/how-to/bootstrap/templates/how-to-share-bootstrap-block-templates.md): Share whole block categories from one API key to others in the Dashboard, where other sites can insert but not change them. - [Editing content](https://n1ed.com/how-to/bootstrap/content/edit-bootstrap-blocks-content.md): Start here to fill a Bootstrap block: editable areas inside columns, structure changes, styling, and saving the result as a template. - [Editing content: Column system basics](https://n1ed.com/how-to/bootstrap/content/bootstrap-12-column-structure-basics.md): How containers, rows and columns nest inside a block, and how the 12-slot grid splits each row in TinyMCE and CKEditor. - [Editing content: Edit block structure](https://n1ed.com/how-to/bootstrap/content/how-to-edit-bootstrap-column-structure.md): Click the layout mockup of an inserted block to open the grid dialog, then resize, move or shuffle its columns with the mouse. - [Editing content: Set block background](https://n1ed.com/how-to/bootstrap/content/how-to-set-bootstrap-block-background.md): Give a container, row or column its own color, gradient or image with the Set Background button, layered one over another. - [Editing content: Change block styles](https://n1ed.com/how-to/bootstrap/content/how-to-change-bootstrap-block-styles.md): Select a container, row or column in the breadcrumbs and edit its classes, styles and attributes in the sidebar with autocomplete. - [Editing content: Content alignment inside blocks](https://n1ed.com/how-to/bootstrap/content/how-to-change-alignment-in-bootstrap-blocks.md): Align columns within a row, contents within a column, and text, after selecting the element in the content area or the breadcrumbs. - [Editing content: Mobile-ready content basics](https://n1ed.com/how-to/bootstrap/content/bootstrap-responsive-tools-basics.md): What the XS to XXL Bootstrap breakpoints mean and how a device picks one, before you adapt block content to phones and tablets. - [Editing content: Build responsive content](https://n1ed.com/how-to/bootstrap/content/how-to-build-and-preview-bootstrap-responsive-content.md): Use the breadcrumbs ruler in Advanced Bootstrap Editor mode to force a breakpoint and preview a block at each screen width. - [Editing content: Editing HTML source code](https://n1ed.com/how-to/bootstrap/content/how-to-edit-bootstrap-source-html-code.md): Open the Source code dialog for syntax-highlighted HTML, and see which tags are kept untouched and which ones get filtered. ## How-to: Widgets and media - [Widgets and media](https://n1ed.com/how-to/widgets-and-media.md): Table of every widget with its toolbar icon, grouped into Bootstrap, image, file and text tools, each linking to its own guide. - [Widgets basics](https://n1ed.com/how-to/widgets-basics.md): How simple and combined widgets differ, and how to reach a subwidget through breadcrumbs to edit its settings in the sidebar. - [Bootstrap widgets](https://n1ed.com/how-to/bootstrap-widgets.md): Insert and configure the Button, Accordion, Tabs, Carousel, Alert and Badge widgets, rendered with your own Bootstrap theme. - [Image widgets](https://n1ed.com/how-to/image-widgets.md): Compare the Image, Image Preview and Image Gallery widgets and the Browse, Upload, Relocate, Embed and Link ways to add a picture. - [Image Editor](https://n1ed.com/how-to/image-editor.md): Crop, rotate, resize and add text to pictures with Image42, then save the result back to your server through the file manager. - [File Manager](https://n1ed.com/how-to/file-manager.md): Browse folders, upload files and pick one or several images in the Flmngr dialog whenever a widget asks for a file or a link. - [Font Awesome](https://n1ed.com/how-to/font-awesome.md): Place one of Font Awesome icons in your content and select style, size color and more - [YouTube](https://n1ed.com/how-to/youtube-widget.md): Search YouTube by keyword or URL without leaving the editor, set the aspect ratio, and place a responsive video inside a column. - [Placeholder](https://n1ed.com/how-to/placeholder.md): Reserve a spot in a reusable custom block with the Placeholder widget, then turn it into an image, video or icon after insertion. - [Page embed](https://n1ed.com/how-to/page-embed.md): Embed another web page, a third-party button or a PDF from your storage into the content as an iframe of the size you set. ## How-to: Typography and basics - [Typography and basics](https://n1ed.com/how-to/typography-and-basics.md): Which CKEditor and TinyMCE text tools N1ED keeps, and the widgets it adds for links, headers, tables, images and icons. - [Text, paragraphs, headers](https://n1ed.com/how-to/text-paragraphs-headers.md): Text, paragraphs, headers, basic styles - [Links and anchors](https://n1ed.com/how-to/links-and-anchors.md): Insert and edit links and anchors with the N1ED widgets, and browse or upload the target file through Flmngr without leaving them. - [Tables](https://n1ed.com/how-to/table.md): Insert a table from the dropdown, then set its background color, gradient or image and adjust the look of its rows and cells. - [Custom widget](https://n1ed.com/how-to/custom-widgets.md): Save a styled table or any other widget with Save as custom widget, then insert it again from your own widget library. - [Source code](https://n1ed.com/how-to/source.md): Edit raw HTML in the CodeMirror source dialog with highlighting and find and replace, or paste code as an HTML snippet widget. - [Classes, styles, attributes](https://n1ed.com/how-to/custom-styling.md): Open Tag options in the sidebar to add classes autocompleted from your theme, inline styles and attributes to any N1ED widget. - [Working with breadcrumbs](https://n1ed.com/how-to/breadcrumbs.md): Use the breadcrumbs bar under the editor to reach a deeply nested tag, such as a card header, and open its options in the sidebar. - [Translating text in the editor](https://n1ed.com/how-to/translator.md): Translate a selection in place with the Yandex or Google engine while HTML layout is preserved, from the toolbar or Ctrl+Enter. ## Optional - [Changelog](https://n1ed.com/docs/changelog.md): Version-by-version history of what changed in N1ED, its Bootstrap blocks, toolbar, Flmngr file manager and CMS integrations. - [Legal information](https://n1ed.com/resources/legal.md): Trademark and license notices for TinyMCE, Editor42 and CKEditor, plus the GDPR privacy practices and the personal data collected when you order. - [All questions](https://n1ed.com/qa.md): Browse the answers to questions readers asked about N1ED, TinyMCE, CKEditor and the Flmngr file manager, or ask one of your own. - [YouTube embeds failing](https://n1ed.com/qa/youtube-api-key.md): Why YouTube search and embedding answer HTTP 403 in N1ED, and how to create your own YouTube Data API key to fix it. - [Broken Font Awesome icons in TinyMCE](https://n1ed.com/qa/broken-icons-in-tinymce.md): Broken Font Awesome icons in my tinymce. Error in the developer console: Error: Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. - [How to fix incorrect preview for WEBP in Flmngr?](https://n1ed.com/qa/incorrect-preview-for-webp-in-flmngr.md): I do not see previews for WEBP files in Flmngr window. Or file manager generates incorrect previews for them. - [How to change toolbar skin in CKEditor?](https://n1ed.com/qa/change-ckeditor-toolbar-skin.md): I wish to switch from default moono-lisa theme to skin you use in your demo. How can I get it? - [What means "Responsive" checkbox on the image?](https://n1ed.com/qa/bootstrap-responsive-images.md): I see the checkbox "Responsive" on the left sidebar when I click on the image. Looks like it changes nothing, could you explain what does it mean? - [How to know N1ED version installed?](https://n1ed.com/qa/get-n1ed-version.md): I want to update my N1ED but not sure which version is installed now. How can I know it? - [Upload from URL or set the URL when inserting the image?](https://n1ed.com/qa/image-upload-by-url.md): I want to insert into my content some image located on another website. I see two options: to set the URL directly and to do the same using Uploader. What's the difference? - [How to set size of Font Awesome icon proportional to font?](https://n1ed.com/qa/set-size-font-awesome-icon.md): I inserted Font Awesome icon into my content. How can I set its height equal to double text height? - [How can I integrate configuration editor into control panel of my CMS?](https://n1ed.com/qa/integrate-config-editor-into-cms-control-panel.md): How to configure N1ED and Bootstrap Editor parameters visually? We have own CMS written on our custom framework. - [Striped table style has gone](https://n1ed.com/qa/where-is-striped-table-style.md): I've checked N1ED demo and seen striped style of the table, but can not find it on my installation. Where to get it? - [Switching to Bootstrap Editor mode when going to full screen](https://n1ed.com/qa/switching-to-bootstrap-editor-mode-on-full-screen.md): I use N1ED together with Bootstrap Editor. I want to go into content editing mode immediately when I switch into full screen mode. But when I press "Edit" button and go into full screen, Bootstrap Editor shows me a structure to build. How to change this behaviour? - [Editor configuration for different roles in Drupal 8](https://n1ed.com/qa/editor-configuration-for-different-roles-in-drupal.md): How to set different configurations for different user roles in Drupal 8? - [How to remove gaps between Bootstrap columns?](https://n1ed.com/qa/how-to-remove-gaps-between-bootstrap-columns.md): I need to have no padding between two 6/12 columns. How to set them to use full width of the row? - [Setting icon for custom template](https://n1ed.com/qa/icon-for-custom-html-template.md): I defined my own template and want to set beautiful icon. What is requirement for my image to look like icons of basic widgets? - [How to set background outside of Bootstrap container?](https://n1ed.com/qa/set-background-outside-bootstrap-container.md): I can set properties of Bootstrap container but wish to set background color outside it (on the left and on the right of it). Is this possible? - [Using N1ED to edit both Bootstrap 3 and Bootstrap 4](https://n1ed.com/qa/bootstrap-3-to-4-migration.md): Our web studio builds websites to our clients. We use Bootstrap 3 on old websites we developed and use Bootstrap 4 for the new websites. Can we use your product in this case on all the clients' websites? - [How many licenses do I need?](https://n1ed.com/qa/how-many-n1ed-licenses-to-get.md): How many licenses do I need if use N1ED and Bootstrap Editor on 3 websites located on one physical server? - [Integrating N1ED to my own PHP CMS with TinyMCE](https://n1ed.com/qa/integrate-n1ed-to-cms.md): We have our own custom CMS based on PHP (Symphony) with TinyMCE editor. Will N1ED work with it and how difficult is it to integrate N1ED there? - [I need columns to have full width on mobiles](https://n1ed.com/qa/responsive-bootstrap-columns-on-mobile.md): I need to have two (or three) columns on my web page, but when user views it from mobile phone it must fill full width. How to do this? - [Image previews with custom script](https://n1ed.com/qa/image-previews-with-custom-script.md): When I upload image and insert it as a preview N1ED adds attribute rel="lightbox" to support beautiful opening of a preview in full screen mode. But I do not use LightBox, I use my own script and I need to set attribute data-img="preview". - [Top blocks of my content are rows, not containers](https://n1ed.com/qa/bootstrap-editor-blocks-type.md): Will Bootstrap Editor correctly work with my content where top wrapping element is container, which means that I need to add rows (not containers) inside it? - [Will Bootstrap Editor support my non-Bootstrap content?](https://n1ed.com/qa/support-of-existing-content-in-bootstrap-editor.md): I have Bootstrap website where contents were built without Bootstrap grid and widgets. - [Can I use file manager when store files on separate server?](https://n1ed.com/qa/file-manager-with-another-server.md): I have two servers: website itself and the storage server where all my images are placed. It has domain prefix like img.mydomain.com. How can I configure Flmngr file manager in this case? - [Can I use N1ED without Bootstrap?](https://n1ed.com/qa/use-without-bootstrap.md): I use a website built with Drupal 8 with not a Bootstrap theme. Can I use N1ED? - [How to configure file manager to use my own storage?](https://n1ed.com/qa/how-to-configure-file-manager-storage.md): I've installed N1ED and want to configure it to use my existing files and images: to let select them and upload new images in the same directory. - [Compatibility with admin theme](https://n1ed.com/qa/admin-theme-compatibility.md): My control panel is built using iframe and elements with custom z-index. How can I configure N1ED in this case? - [Will N1ED installing cause any need to reconfigure my webserver?](https://n1ed.com/qa/simple-install.md): I want to try N1ED but do not have time to reconfigure my server. How much time it will take? I use TinyMCE 5. - [Will N1ED extend my CKEditor in Drupal 8 or replace it?](https://n1ed.com/qa/n1ed-extend-or-replace-ckeditor.md): I want to install N1ED into my D8. Will it extend the current CKEditor or replace it with its own build? I worry because I use 3rd party add-ons. - [Will it work with my own CMS?](https://n1ed.com/qa/work-with-cloud-cms.md): Our web studio makes a website for our clients and we use our own CMS. Can I include it as a default editor in it? We have about 300 websites. - [Use in inline mode](https://n1ed.com/qa/inline-mode.md): How to use N1ED without opening full screen? I want to have an inline editing document in my editor. - [Where is located config file of CKEditor?](https://n1ed.com/qa/ckeditor-config-file.md): Where to find CKEditor config in order to edit it? - [N1ED Joomla extension licensing](https://n1ed.com/joomla/license.md): The N1ED extension for Joomla is distributed under GPL v3, and the full text of that license is reproduced on this page. - [Welcome to N1ED: the JS+ plugins, now in one place](https://n1ed.com/js.plus.md): For JS+ customers: the JS+ plugins for CKEditor and TinyMCE now come together as N1ED, and your N1ED account is ready in the Dashboard. - [CSS Frameworks Supported in N1ED](https://n1ed.com/blog/framework-support.md): N1ED now supports Tailwind 4 in addition to the Bootstrap 3, 4, and 5 frameworks it continues to support as well. - [New Bootstrap Blocks dialog](https://n1ed.com/blog/new-block-dialog.md): New Bootstrap Blocks dialog for easy block insertion and better content management. - [New 24-character API keys](https://n1ed.com/blog/new-24-character-api-keys.md): Why N1ED moved off 8-character API keys: no password dialog, no token in cookies, and configuration no longer readable by anyone. - [Link widget: extra options](https://n1ed.com/blog/link-options.md): The Link widget settings in N1ED: text, URL, where to open it, styling as a Bootstrap button, and linking to a file via Flmngr. - [Meet Chat GPT plugin in N1ED](https://n1ed.com/blog/chat-gpt.md): Write texts 10x faster with GPT cowriter. - [New Bootstrap Icons widget](https://n1ed.com/blog/bootstrap-icons-widget.md): Bootstrap icons: Free, high-quality, open-source icon library boasting over 2,000 icons now available in N1ED. - [Intellectual breadcrumbs on the sidebar: How it works](https://n1ed.com/blog/intellectual-breadcrumbs-in-editor.md): Breadcrumbs - navigation tool for editing content. - [Diagnostic messages in the Info dialog](https://n1ed.com/blog/diagnostic-messages-from-info-dialog.md): Learn how to diagnose and solve common issues in your N1ED integration - [How to disable YouTube related videos](https://n1ed.com/blog/how-to-desable-yotube-related-videos.md): Learn how to embed a YouTube video on your website without displaying related videos that appear after the embedded video. - [Enhanced Bootstrap carousel](https://n1ed.com/blog/enhanced-bootstrap-carousel.md): The Bootstrap carousel widget gains slide captions with custom HTML, alt text and embedded video, edited from the Set Slides dialog. - [New modern toolbar for CKEditor and TinyMCE](https://n1ed.com/blog/new-toolbar-for-ckeditor-and-tinymce.md): N1ED: Fully new modern toolbar for CKEditor and TinyMCE. Many UI updates. - [Work with Bootstrap Blocks](https://n1ed.com/blog/work-with-bootstrap-blocks.md): About two main approaches to editing the document layout - [What's new in N1ED 2020.7](https://n1ed.com/blog/changelog-2020.7.md): Free Flmngr, fully redesigned widget Gallery Manager, generating previews, etc. - [What's new in N1ED 2020.3](https://n1ed.com/blog/changelog-2020.3.md): Multiple configurations, custom Bootstrap block templates, new Joomla extension, Drupal module update - [Edit page content in Drupal 8 like a boss](https://n1ed.com/blog/edit-drupal-content-like-a-boss.md): Build the structure and edit rich content with N1ED page builder in Drupal 8 websites - [What's new in N1ED 2.0](https://n1ed.com/blog/changelog-2.0.md): Drupal 8, Bootstrap 3, full screen mode, custom templates, inline mode, etc. - [Use case: N1ED in Drupal 8 based e-shop.](https://n1ed.com/blog/case-drupal-8-shop.md): How to choose, install and use page builder for the internet shop based on Drupal 8? - [Editing responsive content](https://n1ed.com/blog/responsive-content-editing.md): How to realize "mobile first" principle on your website. Bootstrap CSS framework - [Building the layout (structure) in the page builder](https://n1ed.com/blog/build-content-layout.md): How to build the layout in classic WYSIWYG editors like TinyMCE and CKEditor 4? Two main approaches to editing the document layout + Bootstrap way - [Fullscreen mode in CKEditor/TinyMCE](https://n1ed.com/blog/fullscreen-mode-in-tinymce-and-ckeditor.md): Your rich text editor in fullscreen mode. Maximize and focus on content - [CKEditor modules in Drupal 8](https://n1ed.com/blog/ckeditor-modules-in-drupal-8.md): This article shows how you can extend the functionality of CKEditor in Drupal 8, and also explains peculiarities of Drupal 8 architecture and the official CKEditor module - [CKEditor or TinyMCE?](https://n1ed.com/blog/ckeditor-or-tinymce-what-to-choose.md): Comparison table. What editor better suits a new project, should you update the editor in your existing project, and how compatible is the selected editor with N1ED.