CKEditor Div Manager

Introduction

This module integrates the Div Container Manager CKEditor plugin for Drupal 8/9.

The plugin adds the ability to group content blocks under a div element as a container, with styles and attributes optionally specified in a dialog.

Requirements

• The 2.1.x branch uses ckeditor (core - deprecated)
• The 3.0.x branch uses ckeditor5 (core)

Installation

Install via Composer (recommended)

If you use Composer to manage dependencies, edit composer.json as follows.

• Run composer require --prefer-dist composer/installers to ensure you have the composer/installers package. This facilitates installation into directories other than vendor using Composer.
• In composer.json, make sure the "installer-paths" section in "extras" has an entry for "type:drupal-library". For example:
  

  {
    "libraries/{$name}": ["type:drupal-library"]
  }
  

• Run composer require 'ckeditor/div:4.10.1' to download the plugin.
• Run composer require 'drupal/ckeditor_div_manager:^2.0' to download the CKEditor Div Manager module, and enable it as per usual.

Install Manually

• Download the Div Container Manager CKEditor plugin.
• Extract and place the plugin contents in the following directory:
  /libraries/ckeditor/plugins/div/.
• Install the CKEditor Div Manager module as per usual.

Configuration

• Go to 'Text formats and editors' (admin/config/content/formats).
• Click 'Configure' for any text format using CKEditor as the text editor.
• Configure your CKEditor toolbar to include the Div Container Manager button.
• If 'Limit allowed HTML tags and correct faulty HTML' is enabled, the Allowed HTML tags need to be configured. At a minimum, the <div> tag needs to be allowed. Some fields in the plugin dialog require additional attributes to be allowed or they will be hidden. The full set is <div class id title>. Inline styles will not be allowed with this filter enabled.
• Any classes or sets of classes defined in the editor's Styles dropdown for the div element will carry over to the Style dropdown in the plugin dialog.

Troubleshooting

• This project only handles the bridge between Div Container Manager and Drupal. For support of the plugin itself, please use their project page.