Search code examples
ckeditorcdn

line spacing with cdn

How do I set ckeditor with single line spacing if I am using the cdn?

I see several plug-ins to address this but I just want to use the cdn and have it single space when I hit the enter key.

Thanks in advance

Solution

  • Ckeditor doesn't add extra line spacing, it just adds a p tag for every paragraph written, and when you press ENTER a new p paragraph tag is created for the next paragraph you write.

    What you're seeing is probably the margin-bottom: 25px; CSS rule that's applied by default to paragraphs. To reduce this margin, just create a CSS file with a rule like this:

    body.article-editor p {
    margin-bottom: 10px;
}

    Even if you're just importing the CDN, I assume you're initializing ckeditor somewhere in your code inside a <script> tag. In this JavaScript code, set the CKEDITOR configuration contentsCss as follows:

    CKEDITOR.config.contentsCss = '/css/mysitestyles.css';

    For more information on how this works, check the documentation on the contentsCss configuration property: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss

    Edit after feedback:

    Thank you for sharing your code. I've corrected your HTML a bit as you had a couple minor HTML mistakes:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CKEditor</title>
    <script src="https://cdn.ckeditor.com/4.12.1/standard/ckeditor.js"></script>
    </head>
<body>
    <textarea name="editor1"></textarea>
    <script>
        CKEDITOR.config.contentsCss = 'mystyles.css';
        CKEDITOR.replace( 'editor1' );
     </script>
    </body>
</html>

    Also, since you're using Ckeditor in text edit mode instead of article edit mode, please use this CSS instead:

    .cke_editable p {
    margin-top: 0px;
    margin-bottom: 0px;
}

    This works in Firefox latest version.