Clean up your divs in Drupal CKEditor with ease

Since its introduction as the default WYSIWYG editor in Drupal 8, CKEditor has significantly enhanced the content creation process by enabling editors to create rich, versatile content. The CKEditor plugin ecosystem is so wide and it offers endless possibilities to people using it.

Tools like the CKEditor Div Manager have made it easy for editors to add complex layouts, utilizing div elements to organize and structure content. However, managing and removing these div elements can be challenging, particularly for those not skilled in HTML. To simplify this process and improve usability for content editors, you can use the CKEditor Remove Div module.

The challenge

Traditionally, removing divs required switching to "Source" mode and manually editing the HTML - a method that is both time-consuming and prone to errors. 

Most of the time, editors do not even want to be able to have access to the source mode, they just want to be able to do their stuff easily, directly in the text editor.

Introducing the CKEditor Remove Div Drupal Module

Simplest solution for this problem would be just another button in the CKEditor that would remove the div where your cursor is located in the text editor. And that is exactly what our CKEditor Remove Div Drupal module does. Let’s see it in action!

Here is an example of several div elements, some are in the root level, some have nested divs and paragraphs

Just looking in the source mode of the editor will give a headache to a lot of people. This html is very simple, but you can imagine how it can easily become very complex.

Clicking on the Remove Div button will do:

• If element in focus is a div, it will remove the div, and convert the element to paragraph (to keep valid HTML structure)
• If element in focus is not a div, it will look for the first parent element that is a div, and it will remove that one

See Remove Div plugin in action:

Here is another example with a bit more complex html structure.

Configure the Module

1. Navigate to Configuration > Content Authoring > CKEditor.
2. Edit the CKEditor profile where you want to enable the Remove Div button.
3. Add the Remove Div button to the desired toolbar configuration.
4. Save the changes.

Conclusion

The CKEditor Remove Div Drupal module offers a straightforward solution to a common challenge faced by content editors: managing and removing div elements without delving into HTML. By simplifying this process with a single toolbar button, the module not only saves time but also reduces the risk of errors. Whether you're dealing with simple or complex content structures, the CKEditor Remove Div module ensures a smoother, more intuitive editing experience. Enhance your content management workflow - download the CKEditor Remove Div module today.

Got a vision for a custom CKEditor plugin or need expert guidance on optimizing your Drupal site? Let’s bring your ideas to life! Contact us today, and let’s create something amazing together.