如何防止tinymce从输入中剥离空标签？答案

【问题标题】：how to prevent tinymce from stripping empty tags from input?如何防止tinymce从输入中剥离空标签？
【发布时间】：2012-05-06 01:51:34
【问题描述】：

我已经阅读了各种论坛和 SO 上的大量帖子，但似乎仍然无法阻止 tinymce 从可编辑块的末尾剥离空标签。

例如我输入这个：

<a href="blah">zzz</a>
<div class="floatClearer" style=""></div>

..在往返（进出 HTML 模式）时，tinymce 会剥离整个 <div class="floatClearer" style=""></div>。

根据我找到的各种建议，我尝试了这些方法，以及更多：

删除我的valid_elements中div前面的减号，

...以及这些配置。选项：

verify_html : false,
extended_valid_elements : "div*",
extended_valid_elements : "div[*]",

一切都无济于事。有什么办法可以防止这种剥离动作？还有其他地方我需要空标签（不仅仅是这个例子），所以如果可以的话，请告诉我一个针对我的问题的答案，而不是建议我不使用空标签。

【问题讨论】：

你能用你的配置创建一个 tinymce fiddle 来帮助我们更好地了解你的问题吗？见fiddle.tinymce.com
使用你的 tinymce 小提琴我看不到你的空 div 是如何被剥离的（我使用 codeplugin 的“html”按钮插入到 div 上方）
如果我第二次打开 html-view 我看不到空的 div，但这可能是由于 html-view 没有显示编辑器 iframe 中的所有内容（像 tinymce 书签节点（跨度）），即使它在那里
是的，我可以确认这种行为。实际上，我不确定哪个设置会强制 tinymce 清理过程消除您的空 div
我认为这应该是可能的

标签： tinymce

【解决方案1】：

TinyMCE 中存在一个错误，现在已修复（在 v3.5.2 中）。感谢@Thariama！

对于未来的搜索者：使用verify_html 选项。

此选项启用或禁用元素清理功能。如果将此选项设置为 false，则将跳过所有元素清理，但仍会执行 URL 转换等其他清理功能。

使用示例：
tinyMCE.init({
    ...
    verify_html: false
});

【讨论】：

这不允许标签呢？
@RichC 好问题，但我不知道答案。您可能想ask 一个新问题。或者自己研究这个主题并与 Stack Overflow 社区分享你的发现。我只知道这种“邪恶的东西”被称为XSS漏洞。 XSS 使攻击者能够将客户端脚本注入到其他用户查看的网页中。
我测试了它，它留在了脚本标签中，所以我不会推荐这个页面上的任何答案。
@RichC 你能说出你测试了哪些案例吗？ a) <script> 标签是否被verify_html: true 过滤掉了？ b) <script> 标签是否被verify_html: false 过滤掉了？ c) 如果不指定verify_html，是否会过滤掉<script> 标签？
是的，用 verify_html: true 过滤掉，用 verify_html: false 过滤掉

【解决方案2】：

因为我也有麻烦，所以我正在添加我的砖 - 在 Cliff Ribaudo 答案之上。

所以我建议在空标签内使用&nbsp;，它不会被剥离并且不会被搜索引擎看到。

在我的 tinyMCE 上没有这样做：<div class="someclass">&nbsp;</div>

【讨论】：

【解决方案3】：

我坚持这个是因为我仍然遇到这个问题所有时间WordPress 博客（即使是现在，2016 年），我需要使用空 div 插入 Google Analytics、Google Translate 和 Google Tag Manager。

典型的模式是你在博客页面的某个地方添加一个你需要它的地方，下次你回来用 TinyMCE 编辑器触摸页面时，你的 div 不见了！

ONLY 我发现似乎总是可靠地工作的事情如下：

<div id="google_translate_element" style="text-align:right;"><span style="display:none;">ha_ha_I_beat_u_tinyMCE</span></div>

【讨论】：

【解决方案4】：

对我来说，解决方案是极端的并扩展有效元素以接受所有，可能并不理想但客户很高兴

function override_mce_options($initArray) {
     $opts = '*[*]';
    $initArray['valid_elements'] = $opts;
    $initArray['extended_valid_elements'] = $opts;
    return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');

【讨论】：

【解决方案5】：

如果您想阻止删除特定的空标签，请使用选项extended_valid_elements。

例子：

tinyMCE.init({
    ...
    extended_valid_elements: 'span[*]'
});

【讨论】：

【解决方案6】：

tinyMCE.init({
    ...
    extended_valid_elements: 'span[*]'
});

我使用的是 TinyMCE 5.5，上面的这个例子并没有阻止 TinyMCE 为我剥离 empty 跨度标签。我正在使用一种解决方法，在跨度标签中添加评论以防止 TinyMCE 剥离总比没有好，我已经这样做了，所以我可以包含 fontawesome 图标：

<span class="fas fa-check-circle"><!--icon--></span>

我认为您可以像这样在 TinyMCE 中关闭所有 html 验证/编辑，但我对此并不满意：

    tinyMCE.init({
    ...
    extended_valid_elements: 'span[*]'
});

我使用的是 TinyMCE 5.5，上面的这个例子并没有阻止 TinyMCE 为我剥离空的 span 标签。我正在使用一种解决方法，总比没有在 span 标签中添加评论以防止剥离要好，我已经这样做了，所以我可以包含字体真棒图标：

<span class="fas fa-check-circle"><!--icon--></span>

我认为您可以使用此设置在 TinyMCE 中关闭所有 HTML 验证/编辑，但我对此并不满意：

verify_html: false

【讨论】：