investigating TinyMCE inserting line breaks into some list items

SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
TinyMCE is inserting a line break into a UL list item if it begins with a strong tag or similar.

The br is not inserted if the list item starts with ordinary text.

Thanks

Steve


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

updated by @ultrajam: 11/19/16 08:17:45AM
brian
@brian
8 years ago
10,148 posts
OK - will check this out. Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Hi Brian, I think some of the inserted line breaks were improved in the last core update (tables?), but this still remains a problem with lists.

http://academicskills.uwe.ac.uk/steve/workbooks/workbook-features/12034/test

Thanks


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

updated by @ultrajam: 04/12/16 03:24:11AM
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Also, this produces extra line break (note the final full stop outside the span):
<li><span style="line-height: 115%;">Know how to find guidance for referencing your work correctly in UWE Harvard</span>.</li>
Whist this does not (note the final full stop within the span):
<li><span style="line-height: 115%;">Know how to find guidance for referencing your work correctly in UWE Harvard.</span></li>

Here, a br is inserted after the ul and before the first li (doesnt validate), the first two list items have a br inserted before the closing li tag, and the third has one br inserted at the beginning of the li and again at the end.
<ul class="emphasis-list check">
 <li>Pass rate: <strong><span class="text-success">99%</span></strong></li>
 <li>Average mark: <span class="text-success"><strong>83%</strong></span></li>
 <li><strong><span class="text-success">85%</span></strong> of the students' marks were above <strong><span class="text-success">70%+</span></strong></li>
</ul>
You can also see br added after the h3
http://academicskills.uwe.ac.uk/fet/workbooks/fet-low/4397/about-us


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

updated by @ultrajam: 04/22/16 08:01:47AM
brian
@brian
8 years ago
10,148 posts
Sorry about this. Dealing with the messed up output of tinymce is a bit of a pain. I will check this out and see what is up.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Thanks Brian :)


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
brian
@brian
8 years ago
10,148 posts
I have this fixed up in the next core release.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Great! Thank you Brian.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Hi Brian,

Thanks for fixing the line breaks in lists :)

But on display, we still have line breaks inserted after any heading, after any div, inside blockquotes, after blockquotes, etc


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Seems that line breaks are being inserted into lists again. Our layouts are messed up and validation fails on every page (due to the br before the first list item).


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
paul
@paul
8 years ago
4,326 posts
Is this since the latest Core release? I know Brian changed something wrt 'nl2br' because of a SiteBuilder issue.


--
Paul Asher - JR Developer and System Import Specialist
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Hi Paul, it probably is the last release. We had a new workbook ready this morning and I noticed while running our validation checks on it. I hadn't noticed earlier in the week, although I wasn't looking in detail.

Thanks


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
No, not the latest core update this morning - the librarians doing the authoring said that they noticed gaps appearing in the lists and were going to mention it next meeting.

I've been working on something else, and was on holiday for a couple of weeks before that so I can't be sure when the line breaks reappeared.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
brian
@brian
8 years ago
10,148 posts
I think right now we're approaching this from the wrong angle, and trying to apply a "bandaid" approach to removing newlines entered by the browser/editor. Instead I think a better solution would be to strip all newlines and carriage returns from the editor content when it is entered.

Test this for me if you can - modify modules/jrCore/lib/form.php and change line 1637 from this:
$_post[$name] = $_post["{$name}_editor_contents"];
to this:
$_post[$name] = str_replace(array("\r", "\n"), '', $_post["{$name}_editor_contents"])
Let me know if that works better. The problem right now is that newline and carriage returns can appear pretty much ANYWHERE in the submitted HTML from the editor, and our "check" right now does it's best to remove what it can find, but I think a blanket approach of just removing all of them is going to be the only way to be sure.

Let me know how that works.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Thanks Brian.

I've given that a try, but it doesn't seem to make any difference. Might just be my haste though - I'm just about to leave my desk for the weekend - I'll have to pick this up again next week as I only have ftp access to the server from here.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
brian
@brian
8 years ago
10,148 posts
I forgot to add that this should fix NEW entries - it's not going to "fix" existing entries.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Hi Brian,

It doesn't fix new entries either, a br tag is still inserted between the ul and the first list item.

It isn't there in the database, no \n or \r either, but there is an actual line break in the field.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Would it be possible to have a trigger in jrCore_remove_unwanted_breaks?

I'd be able to control that for our validation and get rid of a lot of css that I've written to hide all the line breaks after heading elements, inside divs etc.

Thanks


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
I'm adding this in which gets rid of the br between ul and li
function jrCore_remove_unwanted_breaks($string)
{ // fix ul if (strpos(' ' . $string, '')) { if (strpos(' ' . $string, ' $line) { if (strpos(' ' . $line, '>')) { $_tmp[$k] = str_replace('>', '>', $line); } } $string = implode("\n", $_tmp); } }

NOTE: that doesn't look right - the forum is removing my br tags from the code! What is it with these pesky br tags!!!


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

updated by @ultrajam: 06/16/16 05:03:45AM
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Quote: function jrCore_remove_unwanted_breaks($string)
{
// fix ul
if (strpos(' ' . $string, '')) {
if (strpos(' ' . $string, ' $line) {
if (strpos(' ' . $line, '>')) {
$_tmp[$k] = str_replace('>', '>', $line);
}
}
$string = implode("\n", $_tmp);
}
}

NOTE: not right either


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

updated by @ultrajam: 06/16/16 05:06:59AM
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
function jrCore_remove_unwanted_breaks($string)
{ if (strpos(' ' . $string, "<br>")) { // fix ul if (strpos(' ' . $string, "<ul")) { $_tmp = explode( "\n", $string); if ($_tmp && is_array($_tmp)) { foreach ($_tmp as $k => $line) { if (strpos(' ' . $line, "><br>")) { $_tmp[$k] = str_replace("><br>", '>', $line); } } $string = implode("\n", $_tmp); } }



--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

updated by @ultrajam: 06/16/16 05:11:53AM
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Ok, that looks right - to get that to display right here I needed to replace the single quotes with double quotes around the br tags and added a space after $_tmp = explode(


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
brian
@brian
8 years ago
10,148 posts
Was just checking this out and am not seeing a way to get break tags into the tinymce output. Do you have any custom listeners running that could be adding them in?


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
I don't think so, but I'll double check that next week.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Nothing that I can see which would have any bearing on that.

I've noticed this though: When \n and \r are stripped on validation, the html is saved to the database in separate lines. There are no \n or \r but the new lines still exist. This is where the br is inserted after the ul.
If I edit that in the database and remove that new line, the br is not inserted.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
michael
@michael
8 years ago
7,715 posts
Hows it looking now? Is this still an issue? I checked it with the editor enabled on comments and the extra BR's didn't seam to be being inserted.

--edit--
Yes, its still an issue:
<h1>some big text</h1>
<p>then some small text</p>

The output will be:
<h1>some big text</h1><br>
<p>then some small text</p>

updated by @michael: 08/19/16 01:41:39AM
Strumelia
Strumelia
@strumelia
8 years ago
3,603 posts
Not sure if this is releated, but I've always gotten a couple of extra line breaks inserted in my forum posts, between the typed post itself and any Signature. The extra lines have not been typed in, the space/breaks do not appear in the post code, but it always comes out like this:
forum_site.jpg
forum_site.jpg  •  162KB




--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
michael
@michael
8 years ago
7,715 posts
Could be the same thing @strumelia, What is happening is the HTML code when looked at in the < > button will read like this:
<h1>some big text</h1><p>then some small text</p>
TinyMCE will kindly reformat that so that its more readable
<h1>some big text</h1>
<p>then some small text</p>
and jamroom will go "Oh, you want an extra line in there and add a BR".

What we need as a solution is a way to tell tinymce to format the HTML code without those new lines when it save it. Its fine to have those new lines there when your reading it, but if it would kindly remove then when it saves them, that would be great.

The way to request that used to be by adding:
remove_linebreaks : true
according to: http://archive.tinymce.com/wiki.php/Configuration3x:remove_linebreaks

But that is for version 3 of TinyMCE and no longer appears to work for version 4. :(

We're not the only ones asking this question though:
http://community.tinymce.com/forum/viewtopic.php?id=35596
Quote: I have looked for the answer and I have tried various suggestions. Nothing is working.

I need to store the source HTML without CRLF before and after the paragraph tags. The config parameter 'remove_linebreaks' did not help me.

I need to store the source HTML like this:

some text



not like this:


some text




I have tried various suggestions and I have looked through the TinyMCE source js. I can't find the js code that forces the CRLF around paragraph tags, and none of the config suggestions have worked. Can anyone help? Thank you.

But nobody seams to have the answer :(
Strumelia
Strumelia
@strumelia
8 years ago
3,603 posts
Micheal, thank you so much for looking into this in depth as you are doing. It's much appreciated!


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

Tags