当我将HTML添加到我的Bootstrap v5弹出窗口中时，它没有在弹出窗口中显示HTML。我相信我已经按照docs中的描述传递了所有正确的选项。几乎所有我从搜索中获得的结果都是为了尝试和理解这个问题，这些结果涉及Bootstrap v4和v3，所以它们对我没有用处。
右边的弹出窗口应该在弹出窗口中的“Hello World”下面显示开关启示（“Toggle”）。HTML代码存在。
上述测试的代码围绕着这3个启示：
<!-- Popover Works -->
<span class="fs-3 actions-link-style ai-more-horizontal" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Title" data-bs-sanitize="false" data-bs-html="true" data-bs-content="Hello World"></span>
<!-- HTML Switch Works -->
<div class='form-check form-switch'><input type='checkbox' class='form-check-input' id='customSwitch1'><label class='form-check-label' for='customSwitch1'>Toggle</label></div>
<!-- Popover with HTML Switch Does Not Work -->
<span class="fs-3 actions-link-style ai-more-horizontal" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Title" data-bs-sanitize="false" data-bs-html="true" data-bs-content="Hello World<br><div class='form-check form-switch'><input type='checkbox' class='form-check-input' id='customSwitch2'><label class='form-check-label' for='customSwitch2'>Toggle</label></div>"></span>我错过了什么吗？请让我知道。谢谢！
2条答案
按热度按时间z6psavjg1#
好的，阅读阅读Bootstrap v5文档的精美印刷文字，最终使我找到了解决方案。
尽管
data-bs-sanitize="false"是可以传递的有效选项，但根据documentation ...，文档还在其他地方指出：请注意，出于安全原因，不能使用数据属性提供sanitize、sanitizeFn和allowList选项。
因此......为了执行HTML，因为
data-bs-sanitize="false"被忽略，必须手动添加非默认值到Sanitizer白名单中，这些值与弹出窗口中的HTML代码一起使用。在我的例子中，它们如下：现在......一切正常了。这是一堂消毒课。
sshcrbum2#
我不确定你是否正确地初始化了弹出窗口，因为
data-bs-sanitize="false"应该允许使用任何html。您正在添加
bootstrap.Tooltip.Default.allowList对象中没有的元素。因此，为了允许在代码中使用这些元素和属性，以下配置选项将按预期呈现弹出窗口：第一个
备注：
您需要做更多的工作来保持开关的选中状态。实际上，开关在关闭和重新打开时会恢复到初始状态。修复这个问题将是一个不同的问题。