Prevent or remove p tag placed around images in CKEditor4

A fellow teacher posted request for input over at Stackoverflow and has not gotten an answer. Thought I would try here and see if anyone might have solved this in past:

My issue is <p> tags are being placed around uploaded image in CKEditor4. Not a huge issue normally but starting to throw CSS off in some templates (like bootstrap).

Currently I get this after uploading an image:

<p><img src="images/example.jpg"></p>

Like to have only:

<img src="images/example.jpg">

I have tried adding (no success for images):

config.autoParagraph = false;

I have visited many threads on stackoverflow and most all refer to WordPress which I am not using. The CKEditor is in a simple CMS for school blogs on a local network.

Found many reference to WordPress plugins that some say will work (strip out all WP ref), but that has failed miserably.

Just like to remove the p tags being placed around images and not anywhere else. Is this a losing battle?

Many thanks in advance.

This might help.!/guide/dev_disallowed_content

Thank you @AllanP !

All the searching we have done and you may be on to something:

 config.allowedContent = 'p; img[!src,alt]';
 config.disallowedContent = 'img[src]';
 // Input:       <p><img src="..." alt="..." /></p>
 // Filtered:    <p></p>

Just got to figure it out and do little experimenting as not totally clear, but looks promising :slight_smile:

Thank you again.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.