Using CKEditor in Drupal 7, I could configure CKEditor to format the code adding line breaks and indenting the HTML code automatically.

For example, pasting this in the source code:

<div class="row"><div class="col-md-12">Test</div></div>

CKEditor could be configured to turn it into:

<div class="row">
    <div class="col-md-12">

To achieve that, I just had to select the right configuration for CKEditor (Indent the element contents, Break line before the opening tag, Break line after the closing tag), and include the Javascript configuration:

config.allowedContent = true;

But in Drupal 8, I can't see those options and CKEditor removes all the whitespace from the source code.

How can I make CKEditor work like with that configuration in Drupal 8?


Finally I found a solution, thanks to the post CKEditor with well-formatted html source code.

I just added to a custom module the following code:

function mymodule_editor_js_settings_alter(array &$settings) {
  foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
    if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {          
      $settings['editor']['formats'][$text_format_id]['editorSettings']['customConfig'] = base_path() . drupal_get_path('module', 'mymodule') . '/ckeditor_config.js';           

to include a configuration a file called ckeditor_config.js that contains the code:

CKEDITOR.on('instanceReady', function(ev) {
    // Sets indentation of source code
    ev.editor.dataProcessor.writer.setRules( 'div', {
                indent: true,
                breakBeforeOpen: true,
                breakAfterOpen: true,
                breakBeforeClose: true,
                breakAfterClose: true

Doing this, CKEditor will keep the indentations in the source code, and a well formatted code easy to read.


Let's assume you're using CKeditor in your body field.

Ideally, you shouldn't be adding classes/wrappers in CKeditor. You should use the node template file of your content type and add them there.

Go to your theme's template folder and create a copy of node.html.twig and rename the copy to node--[content-type-name].html.twig. Ex: node--article.html.twig, if it's the article content type.

Inside this twig file, find where it says {{ content }} and delete that. Instead, you put <div class="row"><div class="col-md-12">{{ content.body }}</div></div>

and print other fields {{ content.field_name }} that you need.

Clear/Flush the cache to see changes.

  • It doesn't really make sense, but some people are going to want to do this. I would advise the CKEditor plugin for Bootstrap and just integrate them - but most of them are not free. That way it isn't just hidden markup, it is a bit more defined. But generally, you don't want a WYSIWYG to determine layout and markup.
    – Kevin
    Sep 4 '16 at 19:31
  • @kevin no you don't. What if the article/content writer does not know html and removes the markup?
    – No Sssweat
    Sep 4 '16 at 19:41
  • You wouldn't believe how many people have the requirement for this. It's ridiculous but sometimes unavoidable. Example: ckeditor.com/addon/widgetbootstrap
    – Kevin
    Sep 4 '16 at 20:41
  • 1
    @Kevin interesting, I've been using the paragraphs module instead of that and then adding the boostrap markup to the paragraphs template file.
    – No Sssweat
    Sep 4 '16 at 21:05
  • @NoSssweat maybe it's not very common but I think it makes sense, that's why the Drupal 7 module has those options. It's not only about bootstrap, that was just an example, what I want is to have a clean code with its proper indentations, but right now when I paste the code and save the node all the indentations are removed. Is there a way to get this in the Drupal 8 version? BTW I didn't know the paragraphs module, I'll have a look at it too.
    – jmzea
    Sep 5 '16 at 8:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.