CODEWITHSUNDEEP
ckeditor
Christos Hayward
Christos Hayward

Reputation: 5993

How can I opt out of blank paragraph insertion in CKEDITOR?

I posted a related note at How can I clean up Django bleach + CKeditor debris? about how to remove encroaching blank paragraphs from Python / Django.

However, I'd like to more directly ask if CKeditor affords the functionality to opt-out of blank paragraphs being added, or to remove all blank paragraphs before submit.

An example of the HTML source with one programmatically added blank paragraph (the indented lines are indented by one tab, not by spaces):

<p>
    This little bunny is <em>shy</em>, but also very affectionate.</p>
<p>
    &nbsp;</p>
<p>
    Would you like to meet her?</p>

I get one added paragraph per save.

How can I prevent, rule out, etc. addition of blank paragraphs other than at the user's initiative?

Thanks,

Upvotes: 4

Views: 1803

Answers (1)

K Scandrett
K Scandrett

Reputation: 16540

The problem is that you are removing the opening and final closing tags before storing in your DB, which leaves mismatched html tags and therefore invalid html (...whenever you have more than one p block). So,

<p>Something</p>
<p>Something else</p>

becomes:

Something</p>  // invalid html - closing tag with no corresponding opening tag
<p>Something else  // invalid html - opening tag with no corresponding closing tag

CKEditor is actually trying to fix the invalid html for you when loaded back into the editor.

If you don't want paragraph tags I'd suggest using the config option config.autoParagraph = false; and/or config.enterMode = CKEDITOR.ENTER_BR; (CKEditor will use a <br /> instead when the user types a new line) just depending on your requirements.

Another possible solution would be to change your function before the save to do a find and replace of all occurrences of '<p>' with '' and '</p>' with '<br />', before a final remove of any trailing '<br />'.

Steps to duplicate the problem:

A. You can go to http://sdk.ckeditor.com/samples/accessibilitychecker.html and click on Source button, and paste the following:

<p>Something</p>
<p>Something else</p>

B. Click Source and it will display this html correctly.

C. Click Source again to go back to source mode and only the 2 p elements will show

D. Remove the opening paragraphs and the closing paragraph tags:

Something</p>  // invalid html - closing tag with no corresponding opening tag
<p>Something else  // invalid html - opening tag with no corresponding closing tag

E Click on Source twice to render the output and then to see the adjusted source:

<p>Something</p>
<p>&nbsp;</p>
<p>Something else</p>

Upvotes: 2

Related Questions