Jump to content

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


CodeCoffeeCode
 Share

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?

Link to comment
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 2
Link to comment
Share on other sites

  • 1 year later...

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
Link to comment
Share on other sites

  • 9 months later...
  • 1 year later...
  • 1 year later...
  • 1 year later...

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; 
}

 

Link to comment
Share on other sites

  • 10 months later...
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...

Link to comment
Share on other sites

  • 1 month later...
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...

  • Like 1
Link to comment
Share on other sites

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.
 

Link to comment
Share on other sites

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. 

  • Thanks 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...