TinyMCE: How do I prevent `<br data-mce-bogus="1">` text in editor?

Question

I have a page with several TinyMCE (v4) editors, which all work great ... until I try and add:

inline: true

to their configuration. When I do that the inline-ing part works great (the toolbar is gone, then appears when I focus the editor), but for some strange reason the editor stops working at that point. Inside the editor I see:

<br data-mce-bogus="1">

but I can't edit that text, or add new text, or do anything at all really with the editor.

I can make the editor work again if I remove inline: true, but I really want the inline effect. Does anyone have any idea how I can get inline without breaking my editors?

Solution 1

I recently had this problem, inline: true would not work with a textarea. I change mine to a div and it now works as expected.

Solution 2

Actually, the "bogus" br tags appear for inline divs, too. They are added whenever the input field is empty. There appears to be no easy way to get rid of them. I use a CSS rule during the preview phase:

br[data-mce-bogus="1"] {
  display:none;
}

And then strip them out if they make it to the server when the user tries to save.

Solution 3

Are you using the tinymce jQuery package? The same thing was happening to me until I tried using the normal tinymce package instead.

Comments

[machineghost]

Thanks for the suggestion, but I'm already using the non-jQuery version of TinyMCE (and switching to the jQuery version doesn't help either).

[machineghost]

It's been awhile since I had this issue, but I think that turned out to be the problem.

[Olivier]

I can confirm that this behavior can be observed using jQuery version of TinyMCE, but not with the "classic" version. For example, try to insert several bullets with Firefox. First with archive.tinymce.com/tryit/3_x/full.php . Then with archive.tinymce.com/tryit/3_x/jquery_version.php . Using the developper console you'll see that <br data-mce-bogus="1"> is added to each li item in the editor when using jQuery version.

[Olivier]

My previous comment is wrong. I found out the difference between the two configurations : "lists" plugin is missing in the jQuery page. If "lists" plugin has not been configured, but bullets are used, it lead to insertion of <br data-mce-bogus="1">.