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?

Answer 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.

Answer 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.

Answer 3

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

Answer 4

<script>
$(document).ready(function () {
    $("#comment").ready(function () {
        $("#comment").val("")
    })

})
</script>

I add this jquery script in html to solve this bug.