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.

1 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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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