53

I am using ckeditor on my website to make it easier for users to input HTML.

However, the data I get back from ckeditor is wrapped in <p></p> blocks. (Which I don't want.)

Is there some configuration setting that forces the editor to not wrap the text in anything?

7 Answers 7

136

Add the following to your config.js file for CKEditor:

config.enterMode = CKEDITOR.ENTER_BR;

Example:

...

CKEDITOR.editorConfig = function (config)
{
    config.enterMode = CKEDITOR.ENTER_BR;

    ...
};

Details

The configuration setting that controls this behavior is based on what you want to happen when the user presses Enter.

Just in case someone who's new to working with HTML reads this, I'm including some basic explanation of the concepts involved and why a tag will need to be inserted when the Enter key is pressed.

We know that if we enter some text into an HTML document and then put additional text on a new line, the browser won't display the text as two lines, it will ignore any carriage returns and will condense multiple spaces between characters to a single space.

The following HTML:

qwer
tyui

Will be rendered as:

qwer tyui

So the editor needs to insert an HTML tag to tell the browser that it should display the second group of text on a new line.

The configuration setting that controls this is config.enterMode and it offers three options:

1 - Insert paragraph

The default setting creates a paragraph element each time Enter is pressed:

config.enterMode = CKEDITOR.ENTER_P; // inserts `<p>...</p>`

2 - Insert 'div'

You can choose to create a div element instead of a paragraph:

config.enterMode = CKEDITOR.ENTER_DIV; // inserts `<div></div>`

3 - Insert break (the setting you're looking for)

If you prefer to not wrap the text in anything, you can choose to insert a line break tag:

config.enterMode = CKEDITOR.ENTER_BR; // inserts `<br />`

The CKEditor documentation indicates that using the ENTER_BR setting is not recommended:

Note: It is recommended to use the CKEDITOR.ENTER_P setting because of its semantic value and correctness. The editor is optimized for this setting.

Another related setting 'autoParagraph'

There is a second setting that controls a similar situation –config.autoParagraph. How it functions depends on the config.enterMode setting discussed above.

autoParagraph determines whether inline elements such as span are wrapped in the block element (p or div) specified by the enterMode setting. The default is to wrap inline elements, so if you enter a span like this (as HTML):

<span>asdfg</span>

It will be wrapped in a p or div element like this:

<p><span>asdfg</span></p>

or this:

<div><span>asdfg</span></div>

The inline element won't be wrapped if you set this to false or if you set enterMode to CKEDITOR.ENTER_BR.

The CKEditor documentation includes this note about config.autoParagraph:

Note: Changing the default value might introduce unpredictable usability issues.

Even more settings

There are three more settings that are somewhat related to this subject:

  • config.fillEmptyBlocks
  • config.forceEnterMode
  • config.ignoreEmptyParagraph

Reference

A complete list of the available configuration options can be found here:

8
  • 4
    Thank you for such a comprehensive answer. Sep 1, 2011 at 6:32
  • You're welcome, it caused me to think about why a tag was being inserted. Joe
    – codewaggle
    Sep 1, 2011 at 7:22
  • @shybovycha I rolled back your edit. I realize that you didn't know you changed the meaning of the answer with your edits, so here is what was incorrect: I used <br /> tags to format the answer, they weren't part of the answer and didn't appear to someone reading the answer. Look near the top of the question where it says "The following text:" I was demonstrating that without any HTML tags to tell the browser to display a line break, the text would appear on a single line. Your changes caused <br /> tags to be displayed, which changed what I had written and caused it to be incorrect.
    – codewaggle
    Jan 22, 2013 at 19:03
  • 1
    Using the ENTER_BR setting IS recommended in situations like sending HTML emails, where email readers do not consistently render <p> tags, so it is essential to use <br> tags instead. Otherwise, try to always use <p> tags. Feb 18, 2014 at 15:15
  • 1
    Older answer but very informative. Helped me out a bind!
    – Woody
    Sep 8, 2022 at 19:13
17

I know I'm a little late to the game, but I think the option the OP is looking for is:


    config.autoParagraph = false;

3
6

This is answered perfectly well above, however as mentioned you should not really be changing this in the main config.

The correct way to do this is per .replace really.

i.e.

    <form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
    <textarea id="editor2" name="editor2" rows="300"><?php echo $editor2;?></textarea>
    <textarea id="editor1" name="editor1" rows="1" cols="50" onfocus="this.value=''; this.onfocus=null;">Type Tab Title Here:</textarea>
    <input type="submit" value="Submit">
    </form>

<script type="text/javascript">  
    CKEDITOR.replace( 'editor2', { 
    enterMode: CKEDITOR.ENTER_BR, 
    on: {'instanceReady': function (evt) { evt.editor.execCommand('maximize');     }},
    });      
    </script>
5

A very simple solution without any configuration change is to use

  1. shift+enter for a line break <br>, and
  2. just enter would cause a new paragraph.

Advantage is that you don't have to do any configuration changes. Plus, you have both.

1
  • That's the answer I was hoping for.
    – Ripside
    Oct 27, 2015 at 21:26
3

If you want to exclude <p> tag and want only basic editing tool like Bold Italic superscript Subscript etc in Ckeditor then follow these steps:

I am 100% sure about this as I researched 36 Hours continuously :)

Step 1: Add this script in your PHP webpage

<script type="text/javascript">  
    CKEDITOR.replace( 'editor1', { 
    enterMode: CKEDITOR.ENTER_BR, 
    on: {'instanceReady': function (evt) { evt.editor.execCommand('');}},
    }); 
</script>

Step 2: add id="editor2" and onfocus="this.value='';" in your textarea like this

<textarea id="editor2" name="AsYourWish" onfocus="this.value='';">

Step 3: Be sure that remove Class="ckeditor" from Textarea.

Step 4: Reload your webpage if not happened Delete Cache/History and Restart PC/laptop.

Step 5: Its Done :)

0

For Django-ckeditor add this config in your settings.py file:

ENTER_P    = 1 # default
ENTER_BR   = 2
ENTER_DIV  = 3

CKEDITOR_CONFIGS = {
    'default': {
        'enterMode': ENTER_BR,
    },
}
0

If anyone comes here with ckeditor 5, don't look for this option. They have removed it, I've spent days tyring to figure this out.

I'm afraid you're not going to like it, but enter mode BR is the root of all evil. If we were able we'd removed it from CKEditor 4 long time ago and we're definitely not going to implement it in CKEditor 5.

Related GitHub issue

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

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

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