如何阻止 Wordpress TinyMCE 剥离空 html 标签的内容，例如<div class="任何类"></div>答案

【问题标题】：How to stop Wordpress TinyMCE from stripping content of empty html tags e.g. <div class="any class"></div>如何阻止 Wordpress TinyMCE 剥离空 html 标签的内容，例如<div class="任何类"></div>
【发布时间】：2011-11-17 15:43:22
【问题描述】：

我在 Wordpress 帖子的两列中显示一些内容，所以我有两个 div 各显示一半：

<div class="half">Left column.</div>
<div class="half last">Right column.</div>

当然我也需要清除这个，我通常会在之后这样做：

<div style="clear:both;"></div>

但是每当我保存文章或查看可视化编辑器以及任何其他空的 html 标签时，这都会被删除。图标。有没有更好的方法来做到这一点？

【问题讨论】：

标签： html css wordpress tinymce

【解决方案1】：

是的，我建议使用 Clearfix 技术：

见：

【讨论】：

我不喜欢任何骇人听闻的东西，有没有办法将元素保留在页面中？
它在 CSS 中非常常见，更不用说在 HTML 中添加额外的标记纯粹是为了清晰。恐怕我无法直接回答为什么 wordpress 对你这样做。

【解决方案2】：

最好的方法是添加一个 clearfix 类，但如果你绝对必须有那个额外的空元素，添加到明确的 div。 WordPress 正在剥离空的 div。

【讨论】：

不幸的是，直到我保存帖子才有效。编辑和重新保存将 &npsp 转换为第二次保存的普通空间，然后像以前一样删除 div。不理想，因为我计划在未来对这篇文章进行一些编辑。

【解决方案3】：

有一个插件可以在页面上添加一个打印<br style="clear: both;"> 的按钮。此标记不会被删除（请参阅https://codex.wordpress.org/Wrapping_Text_Around_Images#Clear_The_Display）。

在http://wordpress.stackexchange.com 上查看此答案以获取插件的链接：https://wordpress.stackexchange.com/a/255386/48203

【讨论】：

【解决方案4】：

要阻止 TinyMCE 删除空元素，请考虑添加不间断空格，例如

<div class="clearfix">&nbsp;</div>

Wordpress TinyMCE 删除任何没有内容的 HTML 标签。同样的规则适用于图标或其他任何东西，例如：

<i class="fa fa-icon">&nbsp;</i>

另外，我强烈建议大家使用现代 CSS 技术，例如：

.last:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

【讨论】：

【解决方案5】：

我发现的方法是添加一个隐藏类的元素，其中包含一些文本。然后使用 .hidden 类隐藏该元素。 Tiny MCE 正在从我的内容中剥离不间断的空间。

所以，它看起来像这样：

<div class="clearfix"><span class="hidden">Clearfix</span></div>

【讨论】：