Annoyance: can't stop CKEditor from removing ALL source code line breaks

Have a look at #594548: Viewing source removes new lines with fckeditor and close this issue if it is a duplicate or remarks in that issue solve your problem.

How can I get CKEditor to just leave my bloomin' code alone entirely?!

I'm afraid that's not possible, due to how CKEditor generates the output. It completely rebuilds the source from scratch based on the DOM tree in the editing area each time the content is requested from it. But, it's possible to control how it formats your markup.

CKEditor has a class called the Data Processor, which uses an HTML Writer class to create the actual markup tag by tag. This HTML Writer has a bunch of settings we can change to tell it where to put indents and linebreaks. Formatting can also be turned off completely minify the output. These settings are currently not controllable via Wysiwyg module and its GUI or the settings alter hook (we need at least #313497: Allow configuration of advanced editor settings for that).
What I did when implementing CKEditor was to make the "Apply source formatting" checkbox toggle between no formatting at all and a set of rules I thought reasonable. The consequence is of course, as you mentioned, that the editor won't get it quite right for everyone, but it beats having no formatting at all.

You can see the rules Wysiwyg sets in ckeditor-3.0.js
There's a reference page in the CKEditor wiki on Output Formatting.

If you can give examples of how you'd like your markup to be formatted, I can come up with the appropriate rules to set. Actually changing them can't be done without hacking the ckeditor-3.0.js implementation at this point. I'm hoping to change that as soon as I can test the work I've been doing on the advanced settings issue.

I am changing this to a feature request because I believe the context of "feature request" fits this better than "support request".

I would like to be able to customize the following "formatting" approaches:

  writer.indentationChars = '\t';
  writer.selfClosingEnd = ' />';

The most important case I want to handle is indentationChars.
My accessibility scanner (quail-lib) produces lots of report failures because of the use of tab characters '\t' inside of html markup. I would prefer to use spaces instead. My standard is two spaces, but it would make sense to give users the flexibility to set this directly. (1, 2, 3, or 4 spaces, or 1 or 2 tabs??).

The second case, writer.selfClosingEnd would be useful for sites that want to be HTML 4 strict or want to pave the way for HTML 5.
This only needs to be either '>' or ' \>' (or so I assume).

References:
- http://docs.cksource.com/CKEditor_3.x/Howto/HTML_Output
- http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Output_Formatting

EDIT:
I am using the D7 version. So I am requesting this in D7 as well.

Subscribing. "Apply source formatting" is good enough for me, but a way to not hack the module to change the ckeditor settings would be interesting.

hehe thats what i wanted too. i am working on some small module that uses the "writer" of ckeditor to beatify the code again.

Is there a workaround for this in D7?

There is no true leave-my-indents-alone-workaround for any editor or Wysiwyg version simply because of how the editor(s) are designed.
You can tweak some of the settings affecting what the [re-]generated markup will look like by implementing Wysiwyg's hook_wysiwyg_editor_settings_alter(). Some of the settings have to be applied directly to the active dataProcessor object (as can be seen in wysiwyg/editors/js/ckeditor-3.0.js). To override those, you'd need to set the customConfig setting to (giving it the location of a JavaScript file to be loaded when an editor is initialized), and use the custom config script file to hook into CKEditor's instanceReady event and set the formatting rules on the dataProcessor. Wysiwyg also does that, except for the custom config file part since it can send the settings object directly to the instance, so I'm not sure if Wysiwyg's or your event code will run first, but I'm fairly certain yours will be able to override the rules set by Wysiwyg.

Hi All,

I created a wiki page that shows how to hook into WYSIWYG to change some settings in CKEditor:
https://groups.drupal.org/node/392748

Here's the breakdown:

This was tested on CKEditor 4.3.1 and the WYSIWYG module version 7.x-2.x-dev from 2013-Oct-26.

You'll need to check the "Apply simple source formatting" option in the "Cleanup and output" text format options.

Create module:

 
/**
 * @file
 * example.module
 */
 
/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function example_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor === 'ckeditor') {
    $settings['customConfig'] = base_path() . drupal_get_path('module', 'example') . '/example_config.js';
  }
}
 

Add JS config file:

// http://docs.ckeditor.com/#!/api/CKEDITOR.config

// Uses 2 spaces instead of a tab for indentation.
CKEDITOR.config.dataIndentationChars = '  ';
CKEDITOR.config.tabSpaces = 2;
 
 
// Resizes editor for specific fields when initially loaded.
(function(){
    var instanceNames = {
        'edit-field-my-field-und-0-value' : 200,
        'edit-field-my-other-field-und-0-value': 200,
        'edit-body-und-0-value': 350
    };
 
    CKEDITOR.on('instanceCreated', function(e){
        var instance = e.editor;
 
        if (instanceNames[instance.name] !== "undefined") {
            instance.on('instanceReady', function(e){
                var height  = instanceNames[instance.name];
                e.editor.resize('100%', height);
            });
        }
    });
})();

Cheers,
Jeff

I'm changing this to a support request since there's nothing we can really do to force CKEditor to leave indents alone, it's simply not designed that way. I hope the earlier comments do at the least show a couple of tweaks you could do to make it less annoying.

to look look it at least readable I used code from #8 and this js:

(function(){
    CKEDITOR.on('instanceReady', function(e){
        var instance = e.editor;
        var rules = {
                indent : false,
                breakBeforeOpen : false,
                breakAfterOpen : false,
                breakBeforeClose : false,
                breakAfterClose : true
            }
        instance.dataProcessor.writer.setRules( 'p',rules);
        instance.dataProcessor.writer.setRules( 'div',rules);
    });
})();

I bumped against the same problem and solved it by installing TinyMCE (went for the v3 - v4 is not yet fully compatible at this time of writing) and the Codemagic plugin (see https://www.drupal.org/project/wysiwyg_codemagic).

The codemagic plugin formats the html sourcecode automagically, making it very readable.
if necessary, define another input style and assign TinyMCE to it, and you're ready to go.

hope this helps.