TinyMCE 删除 Bootstrap 字形图标等。如何保持它们完好无损？答案

【问题标题】：TinyMCE removes Bootstrap glyphicons etc. How to keep them intact?TinyMCE 删除 Bootstrap 字形图标等。如何保持它们完好无损？
【发布时间】：2014-11-01 17:22:17
【问题描述】：

我在我的 CMS 中使用 TinyMCE (v4)，并且我可以轻松地将预制的 HTML 添加到编辑器中。这很好用。

但 TinyMCE 会删除空 div、span 等，除非在 TinyMCE 配置中指定保留它们。

这很好用，除非另一个空元素中有一个“空”元素。像这样：（典型的 Bootstrap 图标使用）

<div class="icon"><span class="glyphicon glyphicon-map-marker"></span></div>

在我尝试过的 TinyMCE 配置中：

extended_valid_elements : "div[class|id|style|span],span[class|id|style]",

和

extended_valid_elements : "div[* ],span[* ]",

但他们总是删除 inner 跨度，所以它看起来像这样：

<div class="icon"></div>

但是，如果我这样写：

<div class="icon"></div> <span class="glyphicon
glyphicon-map-marker"></span>

两者都保留。

所以情况是这样的：如果我在一个空 div 内有一个空跨度（或任何其他带有 css 类的空元素在另一个带有 css 的空元素内class)，它会删除另一个内部的元素。

如何在 TinyMCE 中设置允许我编写（并保留）以下内容的配置：

<div class="icon"><span class="glyphicon glyphicon-map-marker"></span></div>

【问题讨论】：

为什么不使用<i class="glyphicon glyphicon-map-marker"></i>？
@Aibrean 这是因为我使用了一些现成的引导设计，他们使用了 '

标签： twitter-bootstrap twitter-bootstrap-3 tinymce tinymce-4

【解决方案1】：

解决方案由 Tiny MCE 的原始所有者 Spocke 提出。他在 4.1.1（昨天发布）中添加了一个允许上述功能的功能。

谢谢你:)

【讨论】：

【解决方案2】：

作为一种解决方法，如果您在 WP 编辑器中的字形图标后添加一个空格，它会起作用。

【讨论】：