TYPO3 CKEditor：如何减少两行之间的间距

I’ve run into this exact issue before—super frustrating when hitting Enter adds way more space than you want! Here are a few straightforward ways to fix it:

Quick Fix: Use Shift+Enter Instead of Enter #

By default, CKEditor treats a single Enter press as creating a new paragraph (<p> tag), which comes with built-in top/bottom margins. If you just want a line break without the extra spacing, press Shift+Enter instead. This inserts a <br> tag, which gives you a clean single line break.

Change Enter’s Default Behavior (CKEditor 4) #

If you want Enter to always create a line break (instead of a paragraph), adjust the editor’s configuration by adding this code to your CKEditor setup:

CKEDITOR.editorConfig = function( config ) {
    // Make Enter insert a line break (<br>)
    config.enterMode = CKEDITOR.ENTER_BR;
    // Optional: Set Shift+Enter to create a new paragraph
    config.shiftEnterMode = CKEDITOR.ENTER_P;
};

Reduce Paragraph Spacing with Custom CSS #

If you still want to use paragraphs (for proper semantic structure) but need less spacing between them, customize the editor’s content CSS with this style rule:

p {
    margin-top: 0;
    margin-bottom: 0.5em; /* Tweak this value to get your desired spacing */
}

To apply this in CKEditor 4:

• Add the CSS to your site’s existing stylesheet and link it via config.contentsCss in the editor config, or
• Use the editor’s built-in stylesheet editor (if available in your setup).

For CKEditor 5 Users #

In CKEditor 5, adjust paragraph spacing using the editor’s configuration or custom styles. For example, modify default paragraph margins with this code:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        styles: {
            definitions: [
                {
                    name: 'Paragraph',
                    element: 'p',
                    styles: {
                        'margin-bottom': '0.5em',
                        'margin-top': '0'
                    }
                }
            ]
        }
    } )
    .catch( error => {
        console.error( error );
    } );

Alternatively, use the CKEditor 5 Style Guide plugin to visually adjust spacing if you have access to it.

Hope one of these solutions works for you!

内容的提问来源于stack exchange，提问作者moho123