Turn off enclosing <p> tags in CKEditor 3.0

HtmlTagsCkeditorParagraph

Html Problem Overview


Is there a possibility to turn off the automatic enclosing of all written content within <p></p> in CKEditor 3.x?

I tried

  CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;

but this just changes the inline linebreaks to <br /> while leaving the enclosing paragraph.

Currently writing "Test" produces this output

<p>
	Test</p>

but I want it to be simply

Test

Is there a configuration property for this or would another inline editor to be better suited for this?

Html Solutions


Solution 1 - Html

CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR; - this works perfectly for me. Have you tried clearing your browser cache - this is an issue sometimes.
You can also check it out with the jQuery adapter:

<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('#your_textarea').ckeditor({
        toolbar: 'Full',
        enterMode : CKEDITOR.ENTER_BR,
        shiftEnterMode: CKEDITOR.ENTER_P
    });
});
</script>


UPDATE according to @Tomkay's comment:

Since version 3.6 of CKEditor you can configure if you want inline content to be automatically wrapped with tags like <p></p>. This is the correct setting:

CKEDITOR.config.autoParagraph = false;

Source: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoParagraph

Solution 2 - Html

Across the internet, people have noticed that setting config.enterMode to CKEDITOR.ENTER_BR removes the wrapping paragraph tags from CKEditor. It's worth noting that the setting changes the behavior of the enter key to insert line breaks rather than paragraphs, which is not desirable.

See: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode "It is recommended to use the CKEDITOR.ENTER_P setting because of its semantic value and correctness."

However, the setting that is designed to remove that initial paragraph, config.autoParagraph, isn't advisable either, as it introduces "unpredictable usability issues" because the editor really wants a top-level block element.

See: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoParagraph

The magic happens on wysiwygarea/plugin.js, line 410, where the editor selects the default block element based on config.enterMode. A config option to change the default block element would allow us to start with a div, but we'd continue getting more divs with every enter press, unless we changed the paragraph format via the menu.

See: http://docs.cksource.com/ckeditor_api/symbols/src/plugins_wysiwygarea_plugin.js.html

It would be possible to remove the wrapping paragraph tag with post-processing (either on the server or in CKEditor's getData event), but that leads us into the same problem as disabling autoParagraph: there's no top-level block.

I would rather say that there's not a good solution, but rather a handful of half-solutions, than to accept changing config.enterMode as the canonical solution.

Solution 3 - Html

Try this in config.js

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

Solution 4 - Html

Found it!

ckeditor.js line #91 ... search for

B.config.enterMode==3?'div':'p'

change to

B.config.enterMode==3?'div':'' (NO P!)

Dump your cache and BAM!

Solution 5 - Html

MAKE THIS YOUR config.js file code

CKEDITOR.editorConfig = function( config ) {

   //   config.enterMode = 2; //disabled <p> completely
        config.enterMode = CKEDITOR.ENTER_BR; // pressing the ENTER KEY input <br/>
        config.shiftEnterMode = CKEDITOR.ENTER_P; //pressing the SHIFT + ENTER KEYS input <p>
        config.autoParagraph = false; // stops automatic insertion of <p> on focus
    };

Solution 6 - Html

I'm doing something I'm not proud of as workaround. In my Python servlet that actually saves to the database, I do:

if description.startswith('<p>') and description.endswith('</p>'):
	description = description[3:-4]

Solution 7 - Html

if (substr_count($this->content,'<p>') == 1)
{
  $this->content = preg_replace('/<\/?p>/i', '', $this->content);
}

Solution 8 - Html

Edit the source (or turn off rich text) and replace the p tag with a div. Then style the div any which way you want.

ckEditor won't add any wrapper element on the next submit as you've got the div in there.

(This solved my issue, I'm using Drupal and need small snippets of html which the editor always added the extra, but the rest of the time I want the wrapping p tag).

Solution 9 - Html

MAKE THIS YOUR config.js file code

CKEDITOR.editorConfig = function( config ) {
    
   // 	config.enterMode = 2; //disabled <p> completely
    	config.enterMode = CKEDITOR.ENTER_BR // pressing the ENTER KEY input <br/>
    	config.shiftEnterMode = CKEDITOR.ENTER_P; //pressing the SHIFT + ENTER KEYS input <p>
    	config.autoParagraph = false; // stops automatic insertion of <p> on focus
    };

Solution 10 - Html

Well, with me in laravel, with using ckeditor, it work using simple strip_tags($var) function for output like below:

Sending value to like this to the other page: {!! strip_tags($six_answer) !!}

And/Or when outputting use the same code: {!! strip_tags($six_answer) !!}.

the result is below without any <p> tags. enter image description here

Solution 11 - Html

Set such config:

    CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR
    CKEDITOR.config.forcePasteAsPlainText = true

Solution 12 - Html

In VS2015, this worked to turn the Enter key into <br>

myCKEControl.EnterMode = CKEditor.NET.EnterMode.BR

Personally, I don't care if my resulting text only has <br> and not <p>. It renders perfectly fine and it looks the way I want it to. In the end, it works.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKosi2801View Question on Stackoverflow
Solution 1 - HtmlMaksymilian MajerView Answer on Stackoverflow
Solution 2 - HtmlMichael HelleinView Answer on Stackoverflow
Solution 3 - HtmlJohn WView Answer on Stackoverflow
Solution 4 - HtmlPHPGuyView Answer on Stackoverflow
Solution 5 - HtmlTimothy NwanweneView Answer on Stackoverflow
Solution 6 - HtmlderwikiView Answer on Stackoverflow
Solution 7 - HtmlLarsView Answer on Stackoverflow
Solution 8 - HtmlchimView Answer on Stackoverflow
Solution 9 - HtmlTimothy NwanweneView Answer on Stackoverflow
Solution 10 - HtmlMohsin KhanView Answer on Stackoverflow
Solution 11 - HtmlVlad HilkoView Answer on Stackoverflow
Solution 12 - HtmlJoe SchmuckerView Answer on Stackoverflow