TinyMCE：如何在编辑器中防止`<br data-mce-bogus="1">`文本出现？

Question

我有一个页面上有几个TinyMCE（v4）编辑器，所有编辑器都很好用......直到我尝试添加以下内容：

inline: true

对它们的配置进行修改。当我这样做时，内联部分表现得非常好（工具栏消失，然后在我聚焦编辑器时出现），但由于某些奇怪的原因，编辑器在那一点上停止工作。在编辑器内部，我看到：

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

但我无法编辑那段文本，或添加新文本，或者在编辑器中执行任何操作。

如果我删除 inline: true，我可以使编辑器再次工作，但我真的想要内联效果。 有人有任何想法如何在不破坏我的编辑器的情况下获得inline吗？

- machineghost

Answer 1

实际上，“虚假”的br标签也会出现在内联div中。只要输入字段为空，它们就会被添加。似乎没有简单的方法可以摆脱它们。我在预览阶段使用CSS规则：

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

如果用户尝试保存时，HTML标签到达服务器，那么就应该将它们删除。

- joshstrike

Answer 2

我最近遇到了这个问题，inline: true 无法与文本域一起使用。我把它改成了一个

标签，现在它的工作方式符合预期。

- codecrunch

---

我好久没遇到这个问题了，但我认为那可能是问题所在。 - machineghost

Answer 3

您是否正在使用tinymce jQuery包？直到我尝试使用普通的tinymce包，才解决了同样的问题。

- Scott

---

谢谢您的建议，但我已经在使用非jQuery版本的TinyMCE（切换到jQuery版本也没有帮助）。 - machineghost

我可以确认，使用jQuery版本的TinyMCE可以观察到这种行为，但是在“经典”版本中则不会出现。 例如，尝试使用Firefox插入多个项目符号。首先使用http://archive.tinymce.com/tryit/3_x/full.php，然后使用http://archive.tinymce.com/tryit/3_x/jquery_version.php。 使用开发者控制台，您将看到在使用jQuery版本时每个li项中添加了<br data-mce-bogus="1">。 - Olivier

我的先前评论是错误的。我发现了两种配置之间的区别：在 jQuery 页面中缺少“lists”插件。如果没有配置“lists”插件，但使用了项目符号，则会导致插入<br data-mce-bogus="1">。 - Olivier

Answer 4

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

})
</script>

我在HTML中添加了这个jQuery脚本来解决这个bug。

- ltdong7788

Answer 5

将此片段添加到您的CSS文件中。这将防止视频虚假。

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

- Artem Dumanov