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

machineghost picture machineghost · Nov 15, 2013 · Viewed 16k times · Source

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?

Answer

joshstrike picture joshstrike · Feb 12, 2017

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.