My Blog: The Rogue Break Problem
17 January 2017
There's a problem with TinyMCE that presents in some web browsers. It occasionally adds rouge line breaks at the end of block elements. This is how I find and remove them.
This is what I need to find and reveal:
<p>Some paragraph text.<br/></p>
Unfortunately, <br/>
tags aren't selectable / styleable by CSS in the DOM. That means you can't apply formatting rules to them. However, I found that could use a JavaScript JQuery function to insert a block of styleable HTML code before the break:
$(document).ready(function () { // Insert carriage return icon after line breaks using a styled span: $('br').each(function () { $('<span class="break" aria-hidden="true"></span>').insertBefore(this); }); });
That function adds a <span>
tag before the <br/>
tag:
<p>Some paragraph text.<span class="break" aria-hidden="true"></span><br/></p>
I can then use this CSS rule to style it:
span.break { padding-right: 14px; background-image: url('/Frontend/Images/University/break.png'); background-repeat: no-repeat; background-position: right 50%; }
There's just one issue remaining, how to deal with legitimate or necessary line breaks? Easy:
address span.break { background-image: none; padding-right: 0; }
This is how it looks:
comments powered by Disqus