![\"Boostrap](\"https://n1ed.com/img/screenshots/blog/dialog-block2.png\")
![\"Bootstrap](\"https://n1ed.com/img/logo/64px/bootstrap5.png\"){kind=logo}
\nBootstrap 5, the latest version of the Bootstrap framework, is the default framework of N1ED. We maintain it, adding new features, and improving existing ones.
\nAvailable in Free and Premium plans
\n![\"Bootstrap](\"https://n1ed.com/img/logo/64px/tailwind4.png\"){kind=logo}
\nWe are proud to present support for the Tailwind 4 CSS framework in the N1ED editor. Hoping this will help cover Tailwind 4-based websites, we have implemented in N1ED 100% of the features previously available in the Bootstrap version.
\nAvailable in Premium plan
\nThis great framework was useful for years and is still used on many websites, but its official end-of-life date passed a long time ago - January 1, 2023.
\nProbably now is the right time to ask the community to share our costs and subscribe on the Premium version of N1ED to continue using it.
\nWe continue maintaining Bootstrap 4, and all Premium plan users will see no impact on their websites. However, Bootstrap 4 will be available on the Free plan only until July 14, 2025.
\nAvailable in Premium plan
\nThis good old framework is now fully considered legacy, as its developers stopped maintaining it in 2019.
\nWe hold this pioneer of responsive CSS frameworks in our hearts, but we have to ask you to subscribe on a Premium plan to continue using it in N1ED.
\nWe continue maintaining Bootstrap 3, and all Premium plan users will see no impact on their websites. Free plan users will no longer be able to use it after July 14, 2025.
\nAvailable in Premium plan
", "url": "https://n1ed.com/blog/framework-support", "title": "CSS Frameworks Supported in N1ED", "summary": "N1ED now supports Tailwind 4 in addition to the Bootstrap 3, 4, and 5 frameworks it continues to support as well.", "date_modified": "2025-07-28T00:00:00.000Z", "tags": [] }, { "id": "https://n1ed.com/blog/new-block-dialog", "content_html": "\nIn version 2024.09 N1ED introduces a new Bootstrap Blocks dialog that makes it easy to insert blocks from the block gallery.
\n\nAs you may remember (and probably still use), the previous version of the block picker was a sidebar, which made it difficult to manage the large number of blocks you might have had. That's why we've redesigned this dialog, placing all blocks on one page with a single scrollbar, as we believe scrolling is much easier than selecting a block in a two-level structure.
\nEven though all your blocks are now on a single page, they will load faster because we've implemented the best CDN practices for caching all the screenshots (the heaviest part of the data).
\nWorking with custom blocks has also become more convenient. They are all displayed at the top of the same dialog, ready to be inserted with a single click.
\n![\"Custom](\"https://n1ed.com/img/screenshots/blog/bootstrap-custom-blocks.png\")
The process of creating and updating your own blocks hasn't changed: you do this right from the content by pressing the ![\"Save](\"https://n1ed.com/img/ui/toolbar/n1ed/SaveWidget.png\")
icon above the block or on the toolbar. So you don't need any special administrative tools for that. Defining custom blocks and updating them is an essential feature for a block-by-block editor, and the screenshot will be taken automatically as before.
![\"Create](\"https://n1ed.com/img/screenshots/blog/create-custom-block.png\")
The amazing feature of the new block dialog is that you can organize your blocks without needing to switch to any special modes. Just drag some block within its category or even drop it into another one across all the block categories of your custom block library - the change is saved immediately after you drop it in the desired place.
\nA similar feature is implemented for categories as well. Easily group your categories not only when creating a new block but from the Bootstrap Blocks dialog: create new categories, rearrange them, and remove empty categories if you wish.
\n![\"Replace](\"https://n1ed.com/img/screenshots/blog/replace-block.png\")
You can access the Dashboard directly or by pressing ![\"Configure](\"https://n1ed.com/img/ui/toolbar/n1ed/Configure.png\")
icon on the N1ED toolbar. Then select a website (if you own more than one website with N1ED connected) and find the corresponding toggle button.
The legacy dialog (the sidebar with blocks) will remain supported for a while. In just a couple of weeks we will migrate all users to the new dialog by enabling this option for them, and a few weeks after that, if there is no negative feedback, we will fully remove the old way of selecting blocks using the sidebar. Take advantage of this time to test the new dialog and be fully prepared for the upcoming changes.
\n![\"Enable](\"https://n1ed.com/img/screenshots/blog/enable-bootstrap-blocks-dialog.png\")
In the latest N1ED update (September 2024) we've made improvements designed to enhance the user experience during the implementation and use of N1ED on websites or in applications.
\n\nPreviously, 8-character API keys were used, but now we offer a new method with 24-character API keys. Why and how? Let's take a look.
\n![\"New](\"https://n1ed.com/img/screenshots/blog/dashboard-n1d-status.png\")
The previous approach of using API keys like xxxx1234 had a few issues:
There was a requirement to retrieve an access token to make custom Bootstrap blocks editable. Although this was a straightforward action of specifying a password on the page (do you remember the \"Link N1ED with the cloud\" password dialog?), it had some drawbacks:
\nBeing non-secret and publicly exposed, the 8-character API key didn't restrict read-only access to the configuration (including blocks). This wasn't a major issue, but it could confuse users who believed their preferences could only be accessed through their editor.
\nWith the above in mind, we've redesigned our configuration access scheme.
\nNew API keys are 24 characters long: the first 8 characters remain the same as before, serving as the public ID of your configuration. These will be used on your websites' front pages (the `widgets.js` script attaches using them), but eventually, you won't be able to load editor using these keys alone.
\nThe final 16 characters act as the password for accessing all online services provided by N1ED. Currently, the primary service is managing your library of custom blocks.
\nMigration is simple: just specify the new 24-character API key in your new or existing N1ED installation. Drupal, Joomla, and other CMS users can enter the new, longer API key in their CMS control panel, while custom installation users should redefine their apiKey parameter passed to CKEditor, TinyMCE, or the direct N1ED loader script.
You can find the corresponding 24-character API key in your Dashboard, this key always starts with the same first 8 characters as before.
\nIf everything is done correctly, N1ED will continue loading as before on your site, and you will see a green highlight over the label \"New 24-character API key is used\".
\nFrom now on, never expose your account password to any colleagues except those directly involved in managing N1ED installations on your websites, as the password no longer plays any role in linking N1ED installations to configurations - the longer API keys do.
\nFor now, all your previously set 8-character API keys will continue working, and any tokens already retrieved will remain active, so you won't notice any difference. However, you will no longer be able to retrieve a new token, as the \"Link N1ED with the cloud\" dialog will no longer appear, and N1ED will prompt you to specify a longer API key. Follow the simple migration steps described above - there are no expected pitfalls or side effects.
\nIf you're using a CMS implementation (Drupal, Joomla, etc.) with shorter keys, you won't see any changes at all, as the secret access token was initially received and is website-wide. However, we advise you to manually switch to longer API keys for higher security, as we plan to allow 24-character API keys act as a key to various online services we intend to implement in future updates.
\nEventually, everyone who migrates to longer API keys will be disconnected from the shorter keys compatibility (and will notice no change).
\nWhen you add N1ED to a new website and create a new corresponding API key in the Dashboard, it will support 24-character API keys only.
", "url": "https://n1ed.com/blog/new-24-character-api-keys", "title": "New 24-character API keys", "summary": "Why N1ED moved off 8-character API keys: no password dialog, no token in cookies, and configuration no longer readable by anyone.", "date_modified": "2024-09-01T00:00:00.000Z", "tags": [] }, { "id": "https://n1ed.com/blog/link-options", "content_html": "\nIn N1ED, link creation is facilitated by a special widget called Link. Like the built-in Link plugins in CKEditor and TinyMCE, the Link widget lets you insert hyperlinks into your content and provides a UI to create and edit them.
\n\nIn the widget settings on the sidebar, you can see the standard options for adding a link:
\ntarget=\"_blank\", or current frame target=\"_self\".The widget gives you extra options such as adding CSS classes, styles and attributes.
\n![\"Link](\"https://n1ed.com/img/screenshots/blog/link-default-settings.png\")
If you are using Bootstrap in your website theme, you can style your links with Bootstrap by using the \"Style with Bootstrap\" option. When you select this option, the link remains a link but gains an additional attribute role=\"button\".
![\"Link](\"https://n1ed.com/img/screenshots/blog/link-widget.png\")
The HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address.
\nThe URL that the hyperlink points to.
\n![\"Link](\"https://n1ed.com/img/screenshots/blog/link-url.png\")
To insert a link to a file, use the Browse/Upload buttons. In the first case, the Flmngr will open to select a file already uploaded to the file manager. In the second case, a system dialog window will open to choose a file from your computer.
\nIn the URL field, a URL to the file will be automatically generated, such as:
\n<a href=\"https://mydomain.com/files/file.pdf\">File</a>
![\"Link](\"https://n1ed.com/img/screenshots/blog/link-to-file.png\")
When selecting email, the Set e-mail link dialog will open. In the E-mail field, specify the email address. After inserting the link, the href attribute will appear as:
\n<a href=\"mailto:name@email.com\">Email</a>
Optionally, you can also set the Subject and Body of the email and pass them inside the href attribute, for example:
<a href=\"mailto:name@email.com?subject=Title%20of%20email&body=Some%20text\">Email</a>
This is especially useful when you need to create a link to an email address with a pre-filled inquiry on the page.
\n![\"Link](\"https://n1ed.com/img/screenshots/blog/email-link.png\")
In the Set phone dialog that opens, specify the phone number, and you will receive a link in the following format:
\n<a href=\"tel:123-456-7890\">Phone</a>
![\"Link](\"https://n1ed.com/img/screenshots/blog/tel-link.png\")
If you have anchors created on the current page, such as within headers like <h2 id=\"anchorname\">Header</h2> or other parts of the page, you can link to the desired section. To do this, select the Anchor button and choose the corresponding ID in the dialog that opens.
![\"Anchor](\"https://n1ed.com/img/screenshots/blog/anchor-dialog.png\")
Anchors are particularly useful in longreads and landing pages for better navigation through the document. If there are no anchors on the page, this button will be disabled.
\nTo make a picture a link in HTML, you can wrap the <img> element inside an <a> element. When users click on the image, they will be taken to the URL specified in the <a> element's href attribute. Here's an html example:
<a href=\"https://example.com\">
<img src=\"https://example.com/image.jpg\" alt=\"Description of the image\">
</a>
This functionality is already provided and fully automated in N1ED, so you don't have to write your own code. To create a linking image, use the Wrap with link action for the selected picture.
\n![\"Linking](\"https://n1ed.com/img/screenshots/blog/linking-image.png\")
You can wrap not only images with a link. The same can be done with other widgets, such as icons (Font Awesome, Bootstrap Icons).
\n![\"Icon](\"https://n1ed.com/img/screenshots/blog/icon-wraped-with-link.png\"){kind=icon}
To remove a link, switch back to the Link widget and use the Unlink action, or x button on the sidebar.
\n![\"Remove](\"https://n1ed.com/img/screenshots/blog/remove-link.png\")
Introducing the new tool for adding icons to your page - Bootstrap Icons. It's a free, high-quality, open-source icon library with over 2,000 icons and is now available in N1ED.
\n\nLike Font Awesome Icons, the widget features a dialog for selecting icons. You can find the desired icon through visual search or by keyword.
\n![\"Bootstrap](\"https://n1ed.com/img/screenshots/docs/widgets/bootstrap-icons/bootstrap-icons-dialog.png\"){kind=icon}
![\"Bootstrap](\"https://n1ed.com/img/screenshots/docs/widgets/bootstrap-icons/search-icon.png\"){kind=icon}
You can also edit the inserted icon, setting its color, size, as well as rotate and flip it.
\n![\"Edit](\"https://n1ed.com/img/screenshots/docs/widgets/bootstrap-icons/edit-bootstrap-icon.png\"){kind=icon}
Breadcrumbs serve as a navigation aid for swiftly accessing and editing specific elements within the content structure. Positioned beneath the editor, they indicate the active element by highlighting it in blue.
\n\nThis navigation tool accurately presents the complete hierarchy of nested tags of the editable widget. Simply click on the relevant tab of a tag, and the sidebar will reveal element editing options.
\nYou can get acquainted with the breadcrumbs algorithm in our manual.
\nIn the new release of N1ED, we have added intellectual breadcrumbs to the top section of the sidebar. Essentially, they replicate the hierarchy of elements of the selected component, which is presented in the lower part of the editor. Now it's much faster to switch between elements, for example, jumping directly from Paragraph to structural elements using the Block switch.
\n![\"Intellectual](\"https://n1ed.com/img/screenshots/blog/breadcrumbs-on-sidebar.png\")
Also, in the new breadcrumbs, for certain widgets, a Link button has been added as a potential element for insertion and wrapping into the link of the current element.
\n![\"Breadcrumbs\"](\"https://n1ed.com/img/screenshots/blog/breadcrumbs-add-link.png\")
In the screenshot above, you can observe the Image widget highlighted on the sidebar. Additionally, within the intellectual breadcrumbs, an inactive element is represented by the Link button. You have the option to enable this button, allowing you to wrap the current image in a link.
", "url": "https://n1ed.com/blog/intellectual-breadcrumbs-in-editor", "title": "Intellectual breadcrumbs on the sidebar: How it works", "summary": "Breadcrumbs - navigation tool for editing content.", "date_modified": "2023-05-10T00:00:00.000Z", "tags": [] }, { "id": "https://n1ed.com/blog/diagnostic-messages-from-info-dialog", "content_html": "Did you know that the Info button ![\"\"](\"https://n1ed.com/img/ui/toolbar/n1ed/Info.png\")
in N1ED can provide valuable information not only about the version of your CKEditor or TinyMCE, license you use and your personal API key, but also potential issues related to the compatibility of certain editor plugins with N1ED? The Info dialog furnishes recommendations for enhancing the editor's configuration.
![\"Info](\"https://n1ed.com/img/screenshots/blog/info-dialog-with-errors.png\")
Thanks to error messages, you can debug potential issues in the editor's operation and address problems that you have already encountered.
\nTo ensure effective error monitoring, verify the presence of the button on the toolbar. By default, it is included in the toolbar. If the button is not visible, access the editor's configuration ( button or Dashboard) and locate the Info button in the editor emulator. Click on it, and in the dialog that appears, activate the \"Show on the toolbar\" option. It is also useful to enable the option \"Highlight the button in case of problems\", which will signal any encountered issues.
![\"Configure](\"https://n1ed.com/img/screenshots/blog/configure-info-widget.png\")
Embedding YouTube videos can significantly enhance your website's content, offering visitors valuable information, entertainment, or tutorials to enrich their experience.
\n\nHowever, you may have encountered an issue where, after a video ends, a section of related videos appears at the bottom of the player, featuring content from other creators.
\nThis can potentially divert viewers away from your channel. To address this, you can disable related video recommendations by following these steps:
\n![\"Show](\"https://n1ed.com/img/screenshots/docs/widgets/youtube/youtube-related-videos.png\")
By disabling related video recommendations, you can maintain your viewers' focus on your content and reduce the promotion of your competitors' videos.
\nIf you haven't had the chance to use YouTube yet, check out our guide on how to get free access to the YouTube service.
In the latest release of N1ED, the Bootstrap carousel widget has undergone significant enhancements, introducing a plethora of exciting new features that further elevate the user experience.
\n\nOne of the notable improvements lies within the Carousel Captions. Now, users have the ability to include captivating titles (headers) that add context and elegance to each slide. Additionally, alternative text can be effortlessly integrated for every slide, enhancing accessibility and search engine optimization. But that's not all – the inclusion of Custom HTML within captions allows users to improvise with text decoration, add links, buttons, etc.
\n![\"Add](\"https://n1ed.com/img/screenshots/docs/widgets/carousel/carousel-captions.png\")
\nYou have the flexibility to add and modify carousel captions while creating a carousel or when editing an existing one. By selecting the \"Set Slides\" button, you can easily access the file manager window, where you can effortlessly incorporate text by clicking the designated button.
\n![\"Buttons](\"https://n1ed.com/img/screenshots/docs/widgets/carousel/add-metadata-for-carousel-slide.png\")
\nN1ED introduces yet another exciting feature to the enhanced Bootstrap carousel: the ability to embed videos within your carousel slides.
\nThis new addition opens up a world of possibilities for creators, allowing them to effortlessly integrate dynamic multimedia content into their carousels. Whether it's showcasing product demos, sharing video testimonials, or simply adding a touch of interactivity, the option to include videos on carousel slides brings a new layer of engagement and storytelling.
\nYou can easily insert videos from your files in the Flmngr file manager. Just select the file, and the slide will contain it. You can mix slides with images and slides with videos.
\n![\"video](\"https://n1ed.com/img/screenshots/docs/widgets/carousel/video-slide.png\")
\nThe update also introduces a range of options that empower users to tailor the carousel behavior to their specific needs. \"Autoplay\" (On load/On click/No) and \"Interval\" options offer greater control over the slideshow's pace.
\nThe \"Pause on mouse over\" option enabling users to pause and resume at their leisure on mouse hover, while Autoplay brings a dynamic dimension by automatically progressing through the slides. Furthermore, the \"Loopback switching\" option ensures a seamless transition from the last slide back to the first, creating a continuous, uninterrupted viewing experience.
\n![\"Bootstrap](\"https://n1ed.com/img/screenshots/docs/widgets/carousel/carousel-settings.png\")
\nAnimation enhancements are another highlight of this update. Users can now choose between two mesmerizing animation options: sliding and crossfading. The sliding animation brings a classic feel with smooth riding between slides, while the crossfading animates slides with a fade transition.
\nFor a more information about all functionalities and capabilities of the Bootstrap carousel within N1ED, visit our documentation.
", "url": "https://n1ed.com/blog/enhanced-bootstrap-carousel", "title": "Enhanced Bootstrap carousel", "summary": "The Bootstrap carousel widget gains slide captions with custom HTML, alt text and embedded video, edited from the Set Slides dialog.", "date_modified": "2023-03-03T00:00:00.000Z", "tags": [] }, { "id": "https://n1ed.com/blog/new-toolbar-for-ckeditor-and-tinymce", "content_html": "N1ED now comes with a fully new, modern toolbar for CKEditor and TinyMCE, along with many other UI updates.
\n\n![\"The](\"https://n1ed.com/img/index/n1ed-wysiwyg-editor-bw.png\")
The toolbar has three rows:
\nCreate content block by block: pick a block from the gallery, or create and save your own custom blocks.
\n![\"The](\"https://n1ed.com/img/index/tour/sidebar-combo.png\")
Highlight the existing block structure and edit it: manage Bootstrap containers, rows and columns.
\n![\"Editing](\"https://n1ed.com/img/index/tour/bootstrap-grid.png\")
Add one of the N1ED widgets or reuse your own custom HTML template.
\n![\"The](\"https://n1ed.com/img/index/tour/widgets.png\")
Browse and select an image from a gallery on your server with the full-featured Flmngr file manager.
\n![\"Flmngr](\"https://n1ed.com/img/index/tour/browse.png\")
The main concept is editing your articles block by block. Please see a violet panel in the bottom left corner. It will let you quickly add new blocks: from the gallery or your custom set of blocks you will create while working with your website.
\n\n![\"Bootstrap](\"https://n1ed.com/img/screenshots/docs/addons/bootstrap-editor/bootstrap-quick-panel.png\")
![\"Add](\"https://n1ed.com/img/screenshots/docs/addons/bootstrap-editor/bootstrap-quick-panell-add-block.png\")
Press the button . It will open the sidebar with these options:
![\"Bootstrap](\"https://n1ed.com/img/screenshots/docs/addons/bootstrap-editor/bootstrap-custom-blocks.png\")
![\"Predefined](\"https://n1ed.com/img/screenshots/docs/addons/bootstrap-editor/bootstrap-block-gallery.png\")
![\"Grid](\"https://n1ed.com/img/screenshots/docs/addons/bootstrap-editor/row-template-choose.png\")
Some time after you start filling your websites, you notice some fragements of the pages are very similar by structure and by content. Why not to simplify life to you and your collegues who work with content on the website?
\nReusing blocks is a big feature N1ED gives to you. You can press button on the bottom panel or on the top right corner of the block you edit if you are in Bootstrap Editor mode.
After you press it, N1ED will automatically create a screenshot of it (with all styles you have!) and save it to configuration addressed by API key. So current instances of CKEditor and N1ED will get the ability to use this block at the same moment you saved it to your custom blocks gallery. You will also see the block there on next loads of N1ED.
\n![\"Save](\"https://n1ed.com/img/index/save-template.png\")
![\"All](\"https://n1ed.com/img/index/create-block.png\")
Technically Bootstrap offers two ways on blocks notation inside a content:
\nThe second way is the default. It lets you have more benefits like setting a background of the outer part outside the block. Especially (but not the only) this is useful when you do not have any side columns outside of main article contents on the final pages your visitors see (landing pages, longreads, etc.).
\nOf course you can switch to rows mode if you need. This option is inside Configuration -> Bootstrap Editor -> Advanced -> Elements in root.
Please be aware when changing this value, you should check does your template theme support other values. Changing this option will affect new content only and will not break the existing one.
\nSee full manual on how to build content block by block.
", "url": "https://n1ed.com/blog/work-with-bootstrap-blocks", "title": "Work with Bootstrap Blocks", "summary": "About two main approaches to editing the document layout", "date_modified": "2022-02-16T00:00:00.000Z", "tags": [] }, { "id": "https://n1ed.com/blog/changelog-2020.7", "content_html": "![\"Flmngr](\"https://n1ed.com/images/logo/120px/Flmngr.png\"){kind=logo}
Flmngr file manager with the most of basic features is now free for all N1ED plans.
We know this is the must when you create content, so we decided to give all Free plan users ability to get the most important things from WYSIWYG editor. ImgPen image editor is still available on the Premium plan, but most of all other features are yours now.
![\"Edit](\"https://n1ed.com/img/screenshots/docs/widgets/image-gallery/edit-gallery.jpg\")
Upload, select, reorder images in your gallery with the new Image Gallery widget.
Fully redesigned widget with more interactivity in the final content. Edit image galleries with a charm and walk through of images in galleries by clicking left/right on the final page.
![\"Image](\"https://n1ed.com/img/screenshots/docs/widgets/image-preview/edit-preview.png\")
Get automatically resized cover image when you insert Image Preview widget.
The same for Galleries.
Update your PHP backend to use this feature. The not updated backend will work as before but without resizing images. If you use Drupal, just update the module.
![\"Responsive](\"https://n1ed.com/img/screenshots/blog/responsive-image.png\")
One click - and additional sized are generated for you Image widget for displaying on mobile devices.
Optimize loading images on the site visitors' devices with support of srcset attribute of image. Now your website is ready to be 100% mobile ready.
![\"Drupal](\"https://n1ed.com/img/screenshots/blog/drupal-shield.png\")
In collaboration with Drupal Security Team we've passed the review of N1ED.
The green shield our add-on got on the official Drupal website tells you about N1ED code fits all high standards of Drupal.
Use independent editor configurations on different websites or share configuration between websites. Now you can do it using multiple API keys available to create in your Dashboard.
Each configuration has its own unique API key and stores its own set of custom templates you define and preferences you set. One API key can be used on one or more websites.
![\"Creating](\"https://n1ed.com/img/screenshots/blog/multiple-configuration.png\" "\\"Creating")
![\"Create](\"https://n1ed.com/img/screenshots/docs/addons/bootstrap-editor/custom-template.png\" "\\"Create")
All Bootstrap Editor users now can visually create and save some block as their template. Bootstrap Editor will automatically generate a screenshot for them!
Just create some Bootstrap container and press Create template button with a star icon. Bootstrap Editor will create a preview for this block and send it to CDN to store it in the configuration. Since this moment you can insert this block into your page. You can update this block template using the same way: notice filled star icon indicating this block was created from a custom template.
Install N1ED EcoSystem into Joomla 3 and use it to edit articles. N1ED will be integrated with standard Joomla tools like file storage or feature to insert a link to an article. Learn more »
![\"Edit](\"https://n1ed.com/img/screenshots/blog/joomla-edit-article.jpg\" "\\"Edit")
![\"Edit](\"https://n1ed.com/img/screenshots/blog/drupal8-edit-article.jpg\" "\\"Edit")
All the configurations are stored on the CDN and you can share them between websites. Also now you can enable or disable N1ED for different Text Formats (i. e. turn it off for CKEditor used in comments).
And we simplified the installation process for those who use many different plugins. Now only one module (N1ED) is required for installation in your Drupal: it will load all dependencies like File Manager or Bootstrap Editor automatically as it set in your control panel. Learn more »
Now we support v4 of TinyMCE like TinyMCE 5 and CKEditor 4. We still advise to update to v5, but if your CMS (like Magento) does not support this, you can stay with TinyMCE 4 and use N1ED & co.
![\"TinyMCE](\"https://n1ed.com/img/screenshots/blog/tinymce4.png\")
This video demonstrates creating a content of responsive Bootstrap 4 based page with a grid consisting of containers, rows and columns, widgets like buttons and using file manager integrated with Drupal 8 file storage. Also you can see how you can customize all widgets and elements using essential HTML tools.
\nThe easiest way to install N1ED is to use Installation Wizard. It will lead you through all these steps to the perfect editor on your website. Your first installation should be done using Wizard due to it will register a free API key for you.
Install nowOn September 9, a new versions of all plugins of the N1ED ecosystem were released. The changes were so substantial, that we decided to release the major version 2.0 instead.
\n\nThe Drupal 8 module was totally reworked and now allows seamless integration of all add-ons to your Drupal without hassle. Then, you can effortlessly configure them using the visual control panel on the corresponding text format page. N1ED, Bootstrap Editor, Flmngr and other add-ons now work as plugins to your already installed CKEditor, which means you don't have to replace your editor or make any global changes to its configuration. Everything is now more intuitive and straightforward, both from the point of a user and technically, in terms of the CKEditor API for Drupal.
\n![\"Using](\"https://n1ed.com/img/screenshots/docs/integrations/drupal8/drupal8-edit-article.jpg\")
\n![\"Configure](\"https://n1ed.com/img/screenshots/docs/integrations/drupal8/drupal8-configure-n1ed.png\")
\nIn addition to Bootstrap 4, Bootstrap Editor now supports Bootstrap 3 too. All Bootstrap features are available and ready to use in the third version, specifically: inserting Bootstrap widgets, the layout builder, mobile content preview, etc.
\n![\"Edit](\"https://n1ed.com/img/screenshots/docs/addons/bootstrap-editor/column-edit.png\")
\n![\"Container](\"https://n1ed.com/img/screenshots/docs/addons/bootstrap-editor/container-edit-background.png\")
\nWe implemented a more simple and convenient way to switch to the full screen mode. You can configure this yourself: either maximize your CKEditor or TinyMCE by clicking the corresponding button, or by giving focus to the editor area.
\n\nTinyMCE and CKEditor do not offer a fullscreen editing in the inline mode, but with N1ED 2.0 you still can use all available tools in the inline mode.
\nMaking your own widgets and inserting HTML snippets are a natural part of any editor. N1ED offers quick template insertion (without saving), local saving of templates, or sharing between members of your team via server-side configuration. N1ED generates a config automatically to transfer the just inserted HTML template to the server. Even before you switch to the full screen mode, you still can use the sidebar and all widgets features.
\nA number of improvements and enhancements were made. Read more in the Changelog.
\nAlso, we have greatly improved and supplemented our documentation and started a blog.
", "url": "https://n1ed.com/blog/changelog-2.0", "title": "What's new in N1ED 2.0", "summary": "Drupal 8, Bootstrap 3, full screen mode, custom templates, inline mode, etc.", "date_modified": "2019-09-26T00:00:00.000Z", "tags": [] }, { "id": "https://n1ed.com/blog/case-drupal-8-shop", "content_html": "\nOur customer sells tea in Great Britain. His internet store offers hundreds of tea items from all over the world. As a platform for his internet store he uses Drupal 8 with installed Commerce module and all appropriate modules to manage goods, basket, and control orders.
\n\nIn the previous version of the same store, its owner was using Drupal 7 and CKEditor as an editor enhanced with a number of add-ons to embed YouTube video and Font Awesome icons. CKEditor was used to edit internal pages, of pretty simple structure we should say.
\nLast years, the audience of the web store shifted towards mobile device users (they started dominating over all others), and the existing content wasn't always displayed correctly. Besides, Drupal 8 seemed like a better option for programmers who planned to implement a few modules specially for this website.
\nThat is why in 2019 the team of the web site decided to develop a new version of the website. The new website was built on Drupal 8, featured responsive layout based on Bootstrap 4, and all existing goods were imported to the database of the new site.
\nThe new site required to select an editor to edit:
\nAmong requirements to the editor were:
\nAfter conducting some research, the contractor decided that the best option would be to install N1ED ecosystem add-ons for CKEditor that is already included to Drupal 8.
\nThe website team highlighted the following features as crucial for the project:
\nN1ED offered not only preview of mobile version of content, but also allows editing it directly in the smartphone or tablet mode;
\n![\"Editing](\"https://n1ed.com/img/screenshots/blog/tea-shop-n1ed-mobile-preview.jpg\" "\\"Editing")
\nN1ED allowed uploading and embedding images and image galleries;
\n![\"Admin](\"https://n1ed.com/img/screenshots/blog/tea-shop-drupal-admin-page.jpg\" "\\"Admin")
\n![\"Insert](\"https://n1ed.com/img/screenshots/blog/tea-shop-insert-gallery.jpg\" "\\"Image")
\nFlmngr helped managing images on the website, and ImgPen offered easy modification of images;
\nNo other editors were required, and CKEditor already integrates well with Drupal 8. N1ED, Flmngr, ImgPen and Bootstrap Editor came as CKEditor plugins and do not interfere with Drupal;
\nN1ED has a comfortable visual editor of its own settings. This editor integrates to the CKEditor configuration page in the Text formats section. Templates for embedded galleries can also be adjusted there;
Arranging of content across columns could be made with Bootstrap Editor. This seemed logical, because Bootstrap 4 was already used to apply themes to the website. Bootstrap Editor has a fullscreen mode. In this mode CKEditor works as a layout manager;
\nBootstrap Editor also offered a way to embed button links styled similar to the rest of the website.
\n![\"Editing](\"https://n1ed.com/img/screenshots/blog/tea-shop-bootstrap-mode.jpg\" "\\"Custom")
\n![\"Insert](\"https://n1ed.com/img/screenshots/blog/tea-shop-insert-bootstrap-button.jpg\" "\\"Insert")
\nAs a result, the client settled on purchasing the 5-in-1 Bundle (N1ED, Flmngr, ImgPen, Bootstrap Editor, Translator). The client didn't need Translator, but taking into account overall discount for the bundle, it decided to purchase the full set of add-ons.
\nWhile the designer pored over the new design, the developers configured Drupal. Following N1ED installation manual in Drupal 8 they installed modules and unpacked CKEditor add-ons to the libraries directory.
For content editing they used the only text format — Full HTML, where CKEditor is set as an editor. N1ED and all accompanying plugins connect to this CKEditor automatically regardless of where it is loaded.
![\"Edit](\"https://n1ed.com/img/screenshots/docs/integrations/drupal8/drupal8-text-formats.png\" "\\"Edit")
\n\nIn the settings of the Full HTML text format developers had styled widgets of images and galleries, applied the YouTube API key for YouTube, configured the toolbar, and specified the URL of the custom Bootstrap 4 build. After saving, settings were automatically applied on all pages where CKEditor is used.
Then developers refilled product cards, wrote articles for new landing pages optimized for popular user queries. Articles were devoted to various tea growth areas, collection and processing methods, and other fine nuances of the product.
\nDevelopment and starting the new website took overall less than a month.
\nAfter a few months, the team of the internet store has accumulated enough statistics and provided us with the results of deploying the solution. Also, they permitted us to publish the results of the case here.
\nThe website became responsible, and in webmaster tools Google warned that it uses mobile first indexing for this category of websites. Since many pages of the previous version of website didn't display correctly on smartphones, search engines reacted positively on increased quality of the website. As a result, the website rose up in Google search for many keywords. Some of new articles also started attracting traffic.
\nQuality written and structured content enveloped into a great design has reduced the bounce rate by roughly 20%. But more importantly, the website's team managed to significantly increase the conversion rate of visitors to customers by providing more obvious navigation from informational articles to products, then to payment and delivery methods. An average basket increased by 15% — 100% depending on the product category thanks to better basket functionality and clear presentation of information.
\nThe easiest way to install N1ED is to use Installation Wizard. It will lead you through all these steps to the perfect editor on your website. Your first installation should be done using Wizard due to it will register a free API key for you.
Install nowToday, when Google adheres to the \"mobile first\" principle, and the majority of the web audience uses mobile devices to surf (like smartphones or tablets), а site developers need a way to control how the website's content displays on various mobile devices.
\n\nN1ED offers the way to do this, among everything else. You can simulate devices with different screen resolution to preview content. Moreover: you can continue editing content in any mobile device mode. Effectively, this is not a preview, but full-functional editing of responsive content on your website.
\n\nAs you see from pictures, the ruler above offers various widths corresponding to different devices. These are called breakpoints. When you activate a breakpoint, your editor continues working in the selected device mode.
\nBy default, N1ED developers pre-configured the most popular resolutions, but if you need your own display size, you can configure this using the preview parameter.
Bootstrap CSS framework offers additional tools to edit responsive content. For complete support for Bootstrap 4 and Bootstrap 3 you can use the Bootstrap Editor add-on in CKEditor/TinyMCE and get Bootstrap breakpoints support (not to mention the Bootstrap layout editor as well as support for new Bootstrap widgets). This plugin works with the aid of N1ED and always installs in parallel with it.
\nIn the Bootstrap structure editing mode you can edit all containers, rows and columns and specify size of each breakpoint individually: exactly as Bootstrap supposes you to do. Also, you can hide or show any Bootstrap block depending on the given breakpoint.
", "url": "https://n1ed.com/blog/responsive-content-editing", "title": "Editing responsive content", "summary": "How to realize \"mobile first\" principle on your website. Bootstrap CSS framework", "date_modified": "2019-09-20T00:00:00.000Z", "tags": [] }, { "id": "https://n1ed.com/blog/build-content-layout", "content_html": "\nWhen you create content for page of your website, you may often face the following task: you may need to arrange the content to rows and columns, that is build a layout.
\n\nThere are several technical ways to do this using pure HTML code, but most of them are too cumbersome and not very straightforward. Classic WYSIWYG editors like TinyMCE or CKEditor 4 are focused on editing more simplistic content focusing on typography, images, video and other embedded content elements. However, they can be taught to use the required features by means of a third-party plugin or an external layout editor that works in cooperation with them.
\nSo, there are two main approaches to editing the document layout:
\nThis approach is widely used in some popular CMS, for instance, Drupal uses the Layout module to build structure, and then it used CKEditor to edit content on the page. CKEditor know nothing about the structure of the page and merely connects to the field with the text format that CKEditor supports.
\n![\"Some](\"https://n1ed.com/img/screenshots/blog/n1ed.svg\" "\\"Some")
If you already have a structure editor and it well matches your needs, you only need to make the internal editor (CKEditor or TinyMCE) better. You can install the following plugins:
\nAll these add-ons can work independently (integrated to clean CKEditor or TinyMCE), but can also closely integrate to each other. For instance, you can bring up the ImgPen image editor from the editor itself, from the widget editing panel in N1ED, and from the Flmngr file manager.
\nIf you use these plugins within popular CMS (Drupal 8, Drupal 7, WordPress, Joomla), you also get the control panel to visually configure them (no even need to learn the format of the config file).
\nThe task renders very simple if you use Bootstrap 4 or Bootstrap 3 as a CSS framework for the layout of your website. Both these instruments implement grid functionality, so you can easily arrange your content. You only need to tell the editor (CKEditor 4, TinyMCE 5, TinyMCE 4) to work with this grid too.
\nBootstrap Editor offers this capability. It allows CKEditor or TinyMCE to switch to the layout editing mode. In this mode you can work with all Bootstrap entities: containers, rows, columns, with the exception for widgets, which is explained below.
\nYou can configure such a layout builder in many different ways depending on the content you would like to present. For instance, you can turn on or off the support for containers, or edit a grid inside a certain area of your template.
\nBootstrap's advantage is that it has responsive content rules already defined, which means the editor can use this information to emulate how content looks on mobile devices: from a smartphone to tablet, laptop or desktop PC. Not only can you preview content on the selected type of the device, but also edit it directly in this mode! You can specify column sizes for each of these devices, visibility, and edit any properties of columns and other Bootstrap blocks.
\nAs a bonus, users of Bootstrap who decided to use Bootstrap Editor will also receive a number of widgets peculiar to their framework. Indeed, making links inside your content look like Bootstrap buttons, or easily creating a striped table for straightforward presentation of data is a matter of seconds now.
\n![\"Edit](\"https://n1ed.com/img/screenshots/docs/widgets/button/edit-button.png\" "\\"Bootstrap")
\n![\"Add](\"https://n1ed.com/img/screenshots/docs/widgets/badge/add-badge.png\" "\\"Bootstrap"){kind=icon}
\nEven if your website does not use Bootstrap, you still can use Bootstrap for content. Even though all non-content blocks are using CSS and manual media queries, the content itself will utilize Bootstrap grid to position blocks.
\nAll of the above can be done without any conflicts with external layout. Usually, if you simply include Bootstrap 4 to the page, this will not affect the theme of your website. But even if Bootstrap somehow redefined some style it should not, you may always build Bootstrap so it would have only the grid and nothing above that. Or add to each Bootstrap selector an id or a class of the content element to apply it only inside that element (there is an automatic tool to do this).
\nEven when you use Bootstrap Editor, you can power up your editor with other add-ons and get the editor that perfectly can edit the overall layout, texts and widgets.
", "url": "https://n1ed.com/blog/build-content-layout", "title": "Building the layout (structure) in the page builder", "summary": "How to build the layout in classic WYSIWYG editors like TinyMCE and CKEditor 4? Two main approaches to editing the document layout + Bootstrap way", "date_modified": "2019-09-16T00:00:00.000Z", "tags": [] }, { "id": "https://n1ed.com/blog/fullscreen-mode-in-tinymce-and-ckeditor", "content_html": "\nN1ED introduces a number of practical features to your TinyMCE or CKEditor, but do you really feel comfortable when the editor itself is thumbnail-size? Considering hundreds of new features N1ED offers (such as mobile devices simulation), you'll need something more functional than the default fullscreen editing.
\n\n\nTo make your work in the maximized mode much more comfortable, N1ED enhances the full screen display in your WYSIWYG editor. Nothing will distract you anymore! You only see:
\nAlso, in the fullscreen mode you can edit Bootstrap layout if you use the Bootstrap Editor add-on.
\nNo problem. Simply set the special UI parameter to maximize the editor as soon as it receives focus: ui.openFullScreenOnFocus. Non-maximized editor in this case becomes the content preview, and clicking it opens the page builder in the full screen mode.
Lifehack: you can hid the editor toolbar even in the minimized mode, and add a border to underscore that editing is available upon a click. In this case you may want to hide the Maximize button.
Again — no problem. Hide the Maximize button in N1ED using the ui.showFullScreenButton parameter and do not add the default CKEditor or TinyMCE button to the toolbar. There will be no way to open the fullscreen mode, but you still can use the mini-breadcrumbs, and your sidebar will be available as a sticky panel to edit or add widgets.
If the sidebar take too much space in the non-maximized mode (and overlaps with certain elements of your website), you can put it at the right side instead ui.leftSidebar option).
Note. Without the maximized mode you cannot use the mobile devices simulation to preview content in various screen resolutions.
You can hide it using the ui.sidebarInFullScreenOnly parameter. Now, you only have your basic editing means in the minimized mode, and the fullscreen mode will unleash the entire power of N1ED and Bootstrap Editor.
The names of Maximize and Save (Minimize) buttons can be changed in the corresponding options.