Jump to content
CodeCoffeeCode

ckeditor - Remove wrapping <p> from <img> in source code

Recommended Posts

Hi guys,

I've been looking for a solution to prevent ckeditor from wrapping images in a paragraph within the html output.

At the moment, if I insert an image, with or without an alignment class, it outputs the image wrapped in a paragraph:

<p>Line of text one</p>
<p><img src="myimage.jpg" alt="My Image" /></p>
<p>Line of text two</p>

What I need (and what i think should happen) is this:

<p>Line of text one</p>
<img src="myimage.jpg" alt="My Image" />
<p>Line of text two</p>

I'm sure there must be a solution without having to mess with the core module config, anybody have any solutions?

Share this post


Link to post
Share on other sites

you could do a string replace on <p><img to <img and /></p> to />

when outputting.

or turn off auto paragraph but that probably would be bad

config.autoParagraph = false;

Share this post


Link to post
Share on other sites

Go to site\modules\InputfieldCKEditor\config.js and open config.js in your editor.
This will stop CKeditor from putting the <p> tag including the start and stop (global) <p> tag :

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

And this will give you both the <p> and <br> tag when needed but does not prevent
the start and stop <p> tag

CKEDITOR.editorConfig = function( config ) {
config.enterMode = CKEDITOR.ENTER_BR // pressing the ENTER Key puts the <br/> tag
config.shiftEnterMode = CKEDITOR.ENTER_P; //pressing the SHIFT + ENTER Keys puts the <p> tag
};

========================

Tested with processwire 2.6.1

  • Like 1

Share this post


Link to post
Share on other sites

I know this is an old post, but I just came across it while having the same problem.

In the end, I have gone for a quick jquery solution. My field is within two divs, articlecontent and box, so I have made it very specific.

$('.articlecontent .box p > img').unwrap();

This also takes into account images with captions - it doesn't effect those since they are not in a p tag in the first place.

And that is that.

 

  • Like 1

Share this post


Link to post
Share on other sites

Who would have thought... a pirate to the rescue!

A quick, configurable and functional solution to my problem. HARRRH to you!

Share this post


Link to post
Share on other sites

I found this tip originally for WordPress.
 

function filter_ptags_on_images($content){
    return preg_replace('/<p>\\s*?(<a .*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', '\1', $content);
}
$text = filter_ptags_on_images($page->text);
echo $text;

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...