View Source replacing <br> with &nbsp;

[Chris Wells]

I am running in to an issue with both Chrome and Firefox where under certain circumstances when I hit the View Source button <br> elements are being replaced with an encoded space (&nbsp;).

The consistently reproducible example I have found is to have a <table> with a block element (<div>, for example) after it. If I click after the table in ckeditor, do SHIFT+ENTER for a line break, the cursor moves down and viewing source on the editor does indeed show a <br>. However, when I click "View Source", the <br> is changed to &nbsp;. Going back to editor view, it once again becomes <br>.

I have setup a demo of this issue with the steps to reproduce here:

​http://www.usasean.org/ckeditor4/

[Jakub Ś]

Could you provide more detailed information?

1. Code that needs to be inserted into editor
2. Plain steps explaining how to reproduce.

Your problem sounds like duplicate of #10146. In that topic however br are simply lost. Spaces aren't changed back into brs.

[Chris Wells]

Replying to j.swiderski:

Could you provide more detailed information?

1. Code that needs to be inserted into editor
2. Plain steps explaining how to reproduce.

Your problem sounds like duplicate of #10146. In that topic however br are simply lost. Spaces aren't changed back into brs.

Apologies, I recently updated our website and did not move the page with the steps to reproduce. I have reestablished that page at the same URL (​http://www.usasean.org/ckeditor4/) and the steps to reproduce are included there inside the editor.

At a quick glance it does look like it may be a duplicate of #10146, or at least very similar to it. I will take a closer look at that one later today.

[Chris Wells]

Here is an updated explanation following a form similar to #10146. Having gone through these steps and reviewed #10146, I'm still not sure whether or not this is the same issue, but they do definitely seem to be very closely related.

To reproduce:

1. Open the ​CKEditor ENTER key configuration demo
2. Using the Produce <br> on ENTER demo, toggle source on and enter the following code:

   <table>
   	<tbody>
   		<tr>
   			<td>Table cell contents</td>
   		</tr>
   	</tbody>
   </table>
   <p>P contents</p>
   

3. Toggle source off, click after the words Table cell contents and hit the enter key once.

Result (using Chrome's developer tools to view the page source):

<table><tbody><tr><td>Table cell contents</td></tr></tbody></table>
<br>
"&#8203;"
""
<p>P contents</p>

4. Toggle source on.

Result (as it appears in ckeditor):

<table>
	<tbody>
		<tr>
			<td>Table cell contents</td>
		</tr>
	</tbody>
</table>
&nbsp;

<p>P contents</p>

5. Toggle source off.

Result (using Chrome's developer tools to view the page source):

<table><tbody><tr><td>Table cell contents</td></tr></tbody></table>
<br>
<p>P contents</p>

I actually had not previously noticed what Chrome's developer tools show for the source after step 3, but I felt compelled to note it because of the "&#8203;" bit, which google tells me is a ​Unicode Character 'ZERO WIDTH SPACE'. Maybe this informs the issue, or maybe its unrelated and just complicates it. Either way, the problem is there.

[Jakub Ś]

1. &#8203; character was described in #10031 and IMO is not releated to this problem.
2. Checking code with devtools and source mode is not the way to go. When in WYSIWYG mode, CKEditor inserts many helper attributes. They get filtered when switching to Source mode. In short code in WYSIWYG is different to output html in source mode.
3. Clicking behind table is only possible in Webkit. Inserting new lines behind it looks however the same as in #10146.

I'm closing this issue as duplicate.

Unfortunately workaround provided in #10146 doesn't quite work in this case.