How to configure ckeditor not to wrap content in the <p> block?

Question

I use ckeditor on my website to make it easier for users to enter HTML.

However, the data returned from ckeditor is wrapped in <p></p> blocks. (Which I do not want.)

Is there any configuration parameter that causes the editor to not wrap the text with anything?

Answer 1

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

 config.enterMode = CKEDITOR.ENTER_BR; 

Example:

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

the details

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

Just in case, if someone who is new to working with HTML reads this, I will include some basic explanations of the concepts involved and why the tag will need to be inserted when you press Enter .

We know that if we enter some text into an HTML document and then add additional text to a new line, the browser will not display the text as two lines, it will ignore any carriage returns and reduce several spaces between characters into one space.

The following HTML:

 qwer tyui 

Will display as:

qwer tyui

Therefore, the editor needs to insert an HTML tag to tell the browser that it should display the second line of text in a new line.

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

1 - insert a paragraph

The default setting creates a paragraph element each time you press Enter :

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

2 - insert "div"

You can create a div element instead of a paragraph:

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

3 - Insert a gap (the setting you are looking for)

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

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

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

Note. It is recommended to use the CKEDITOR.ENTER_P parameter CKEDITOR.ENTER_P of its semantic meaning and correctness. The editor is optimized for this parameter.

Another related parameter is "AutoParagraph"

There is a second setting that manages a similar situation - config.autoParagraph . How this works depends on the config.enterMode setting described above.

autoParagraph determines whether inline elements, such as span , will be transferred to the block element ( p or div ) specified by the enterMode parameter. The default is to wrap around inline elements, so if you enter a range like this (like HTML):

 <span>asdfg</span> 

It will be enclosed in an ap or div element as follows:

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

or that:

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

The inline element will not be migrated if this parameter is set to false or enterMode set to enterMode CKEDITOR.ENTER_BR .

The CKEditor documentation includes this note about config.autoParagraph :

Note. Changing the default value can lead to unpredictable usability issues.

More settings

There are three more parameters that are somewhat related to this topic:

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

Link

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

• CKEDITOR.config - CKEditor 3 JavaScript API documentation
• CKEDITOR.config - CKEditor 4 Documentation

Answer 2

I know I was a bit late to the game, but I think the option OP is looking for:

     config.autoParagraph = false;

Answer 3

The answer to this question is pretty good, but as already mentioned, you should not change this in the main configuration.

The right way to do this is really on .replace.

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> 

Answer 4

A very simple solution without any configuration change is to use

• shift + enter to break the line <br> and
• just enter will result in a new paragraph.

The advantage is that you do not need to make any configuration changes. In addition, you have both.

Answer 5

If you want to exclude the <p> and want Ckeditor to have only a basic editing tool, such as Bold Italic superscript, etc., follow these steps:

I am 100% sure of this, since I researched 36 hours continuously :)

Step 1: add this script to your PHP web page

 <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='';" into your text space like this

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

Step 3: Remove Class="ckeditor" from Textarea.

Step 4: reload your web page if this does not happen. Delete cache / history and restart your computer / laptop.

Step 5: Done :)

Answer 6

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

 ENTER_P = 1 # default ENTER_BR = 2 ENTER_DIV = 3 CKEDITOR_CONFIGS = { 'default': { 'enterMode': ENTER_BR, }, }