Topic Closed

Hi

The adding in of p tags, commonly with a non-breaking space seems entirely a CK issue, not gpEasy. Just curious to know how others handle this. Quite a few suggestions on the web, a number in this thread:

stackoverflow

Tend to agree that several solutions aren't great and others a usability downside. Tried a few of them, in the end settled for leaving CK to run as built and pre-inserting the tags where suitable, plus adjusting CSS, or just controlling their height with a class.

Wondered if anyone was using better solutions, the above is no problem for people with basic coding knowledge but not all end users.

11 years ago#4121

jogai
264 Posts

We had a thread about that: Empty elements in editor

I thought it was resolved, gotta check it..

Edit: 3.0 is configured to not include an empty <p>. It will appear when you do a return, but I think that is the responsibility of the content manager.

Edited: 11 years ago#4122

Charles S
448 Posts
13.7K Downloads
2 Themes
8 Plugins

I talk briefly about the issue here (protecting line breaks). However that requires hacking CKEditor and I haven't revisited that issue in a long time.

 

shift+enter gives you a line break and it must be within paragraph marks, otherwise, yes, CKEditor wraps everything with a paragraph mark unless you go into source code and change things and even then it often reverts things back, especially if you cursor through the area changed.

 

Like you, I just returned to leaving CKEditor alone and added a css style for issues I wanted adjusted.

 

<p>&nbsp;</p> are necessary because some people want an empty space/paragraph = double return. stripping those out makes no sense as it ought to be obvious to the creator of the page where the double return is.

 

The link jogai posted is more about gpEasy putting in an empty paragraph when a page is blank — different issue than the above two I mention.

 

However, I'm not totally sure about your comment in general, "commonly with a non-breaking space seems entirely a CK issue"

if it is the fact that CKEditor adds "&nbsp;" between any new paragraph. . . well, I do believe that it is necessary to ensure that there is a blank paragraph = double return. if it is not there then many browsers will collapse that paragraph. however, once you type anything it is removed unless you have more than one consecutive space — this is normal in all HTML editors I've ever worked with.

 

11 years ago#4123

 

Thanks for pointing out the post jogai, did search but missed that. Looks like we have ended up in the same place Strodtbeck, not least as the issue isn't always easy to pin down. Sometimes a different point in the page can be affected, or simply a break entered in a div tag but the example below is typical:
 
.......End of Core Page Section..........
</div>
</div>
<div>
</div>
<p>
&nbsp;</p>
<div class="gpclear"></div></div></div><div id="gpAfterContent"><div class="gpArea_ GPAREA" ></div></div></div>
<div>
div class="gpArea_Extra_Footer GPAREA" >.........................
 
With multiple column layouts near the footer you can get more than one p but the above is fairly normal, although might only occur after the page has been initially saved and then edited. As long as users stick to copying predefined pages, shouldn't be a common issue. Odd cases can be dealt with, or users shown how to avoid.
11 years ago#4124

Eric
193 Posts
1.7K Downloads
1 Themes

You can override many default CK behaviors by modifying /include/js/ckeditor_config.js which is why I suggested having  gpEasy check for a custom config file outside the include folder. For example, this modifies the indents and line breaks:

CKEDITOR.on( 'instanceReady', function( ev )
{
	var writer = ev.editor.dataProcessor.writer; 
	// The character sequence to use for every indentation step.
	writer.indentationChars = '  ';
 
	var dtd = CKEDITOR.dtd;
	// Elements taken as an example are: block-level elements (div or p), list items (li, dd), and table elements (td, tbody).
	for ( var e in CKEDITOR.tools.extend( {}, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
	{
		ev.editor.dataProcessor.writer.setRules( e, {
			// Indicates that an element creates indentation on line breaks that it contains.
			indent : false,
			// Inserts a line break before a tag.
			breakBeforeOpen : true,
			// Inserts a line break after a tag.
			breakAfterOpen : false,
			// Inserts a line break before the closing tag.
			breakBeforeClose : false,
			// Inserts a line break after the closing tag.
			breakAfterClose : true
		});
	}
 
	for ( var e in CKEDITOR.tools.extend( {}, dtd.$list, dtd.$listItem, dtd.$tableContent ) )
	{
		ev.editor.dataProcessor.writer.setRules( e, {
			indent : true,
		});
	}
 
	// You can also apply the rules to a single element.
	ev.editor.dataProcessor.writer.setRules( 'table',
	{ 		
		indent : true
	});	
 
	ev.editor.dataProcessor.writer.setRules( 'form',
	{ 		
		indent : true
	});		
});

You could enter the code you found on stackoverflow there, but I favor Strodtbeck's shift-return method instead. Strodtbeck, CKEditor adds "&nbsp;" only to empty paragraphs (if you press enter twice).

I'm trying to understand the example above, but it may be related to the template you're using.

In some cases, it may be nice to have a plain text section type, which would not add any html formatting.

11 years ago#4143

Charles S
448 Posts
13.7K Downloads
2 Themes
8 Plugins

@Eric. . .  nice example above.

 

"CKEditor adds "&nbsp;" only to empty paragraphs (if you press enter twice)."

 

Correct. One 'enter' and you are on a new paragraph, shift+enter and you have a <br /> within a paragraph — CKEditor will always try to wrap things in a paragraph mark, <p>. As far as I've seen CKEditor only ads '&nbsp' when you have more than one consecutive "space" — this can be two or more blank spaces or paragraphs. As far as I know, and I can be wrong here, this is normal in HTML editors — the multiple blank spaces and/or empty paragraphs would NOT be retained in formatting if the html for a blank space was not used — it would be collapsed by the browser or the editor, and you probably don't want that — a person most likely double returned for a reason.

 

A while back I looked into hacking CKEditor a lot. I don't have the knowledge in JS to do too much thus I followed a lot of the examples and often they didn't work properly and then finally realized, even after getting some of the hacks to work, that it just wasn't worth it — just have to redo them every time you upgrade gpEasy and often CKEditor would still try to "correct" certain things. Therefor, I've found it much easier to understand how CKEditor works and adjust CSS/formatting accordingly — after all it is the web and I'm not going for desktop publishing :)

 

11 years ago#4144

"I don't have the knowledge in JS to do too much"

I'm entirely in agreement.

Just out of interest, the adding of <p>&nbsp</p> can happen without any key being touched. Simply opening and saving a page for the first time after completion (particularly from pasted source) can do this, possibly in more than one place, so you end up with a sizeable extra margin.

Still agree that the best way is to go with the flow and not really a problem for us but a little concerned about the end user. As long as they stick to copying pages (wonderful addition) no problem but more than that, they may need a basic understanding of html, possibly css.

Again you are right on this not being unusual, all editors have their quirks and CK quirks mainly seem to related to trying to create validity, even when that's not needed, or at least not wanted.  Have come across odd CMS/editors with an enclosure  tag you could use to have the content ignored, not a bad idea.

11 years ago#4150

Eric, interesting post. Been playing with the principle and works fine. Also happened to find a way to change the p to div but still ends up with a space (with height therefore) and not ideal for the user overall.

Just came across this as well:

http://stackoverflow.com/questions/3339710/how-to-configure-ckeditor-to-not-wrap-content-in-p-block

Which ties in with the p to div etc. and gives more information, plus links which look helpful. Will take a look but still feel overall, leave alone may be best on balance,

11 years ago#4151

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

Log In

  Register