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

[CodeCoffeeCode]

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?

[Macrura]

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;

[pwired]

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

[CodeCoffeeCode]

Thanks Macrura and Pwired.

I've gone with the second option Pwired suggested as this works great for my needs.

[Joss]

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.

 

[Klenkes]

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

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

[Beluga]

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;

 

[J_Szwarga]

If you want to set this on a per-field basis, you can go to the Input tab for your Textarea field, and under Custom Config options you can put enterMode:2

[strandoo]

My 2cents worth: I frequently add a credit line in the footer of my sites and like to provide a field in my settings to add links. To keep the rich text capabilities but strip out the paragraph tags so the content can be used inline, I use this function on the field:

function stripParas($string) {
	$string = str_replace(array("<p>", "</p>"), "", $string); 
	return $string; 
}

 

[franciccio-ITALIANO]

On 9/28/2015 at 6:45 PM, pwired said:

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

In processwire 3.0 the code you suggested no longer works. I changed the html code from <p></p> to <div></div> but that doesn't work either.
Then I removed CKE and replaced it with simple "textarea", but <p></p> always appears on the sides of the text. It's amazing. I don't know what I'm doing wrong...

[bernhard]

On 9/28/2015 at 6:45 PM, pwired said:

config.enterMode = 2;

thx @pwired that worked for me ? The input for the customOptions inputfield is this:

enterMode: 2

how did you find that setting?

I'm always lost when customizing the ckeditor...

[DaveP]

FWIW there is another option - Find/Replace Textformatter module. I have been using it for just this kind if thing recently and found it really useful.

[bernhard]

Thx @DaveP I'd prefer to get a better understanding of how to customize ckeditor to my needs rather than fixing/rewriting things afterwards ? 

[pwired]

Quote

how did you find that setting?
I'm always lost when customizing the ckeditor...

I found it with old school nightly searching with google .... and lots of coffee
Can't remember the source webpage anymore, can try to look it up again.
 

[bernhard]

thx @pwired yeah that's how I always find my way around when it comes to ckeditor stuff. @Robin S has often helped me out - maybe he can give us a little help on how to better understand ckeditor and it's docs?

[pwired]

Quote

how to better understand ckeditor and it's docs?

Yes I fully agree with that. The CKEditor is used by many in Processwire -
and keeps having returning questions about cumbersome to find configurations -
we should setup a central place to first collect the useful configuration finds
that are now spread over the forum, and then make them for all easy available.
For the love of processwire I will start with this in the coming weekend.