CKEditor with well-formatted html source code

Question

In my 4.7.24 as well as the demo site, CKEditor doesn't attractively format the source code. No indents or spaces. It's very hard to read.

Answer 1

However, I found a solution. Hopefully it's not too far from good practice - I'm not a real coder so I've just done the best I could!

Adding the following code to CKEditor's config file seems to do the trick. So, go to (on Drupal 7.56) sites/default/files/civicrm/persist/crm-ckeditor-default.js.

It's important to know that you probably have to clear your browser's cached files each time you make a change to this file.

This file is created by the CKEditor UI at civicrm/admin/ckeditor?reset=1, and will be overwritten if ever that page is saved. But if you can keep everyone away from it, you're safe to edit the file directly.

Place the following code somewhere well outside all of the CKEDITOR.editorConfig function:

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

This is from: https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_output_format

I'm sure there's a better way, and probably better code than this, and if so I'd be glad to know what would be a 'best practice' solution.

Thanks!