处理不能在 <head>

编程问答 2022-05-28

问题描述

在我们的网络应用中，我们的用户可以使用富文本编辑器来起草他们的个人页面。我们实现了一个自定义插件，以便他们可以添加他们选择的封面图片。他们实际上可以选择其中两个：台式机和移动设备。

编辑器在 iframe 中，当用户点击按钮添加封面时，这会添加到内容中：

<div id="cover" style="display: block; height: 682px;">
  <style>
      #cover {
        background-image: linear-gradient(rgba(0,0.45),rgba(0,0.45)),url('cover.jpg') !important;
      }

      @media (max-width: 767px) {
        #cover {
          background-image: linear-gradient(rgba(0,url('cover-mobile.jpg') !important;
        }
      }
  </style>
</div>

#cover 标记非常重要，因为这是编辑器解析内容并将整个块标识为覆盖块的方式，自定义编辑器插件逻辑围绕其构建（单击它时可以编辑它，更改封面、设置其大小和其他一些选项）。这就是 <style> 标签需要在 #cover 内的原因，否则如果它只是附加到 <head> 它将不再被识别为封面内容的一部分，我们不会能够使用它。重点是，如果内容与封面块有关，则不能在其自然位置#cover div 之外：<head>。

当用户保存他们的草稿时，它会保存在我们的数据库中，页面的发布版本将显示该内容。这就是问题所在：似乎某些浏览器（即 Firefox）在不是 <style> 的 HTML 块中删除了 <head> 标签。它呈现如下：

<div id="cover" style="display: block; height: 682px;"></div>

并且整个 <style> 部分都丢失了，因此根本没有显示用户设置的封面。

理想情况下，我根本不会使用 <style>，而只是将内容保存为内联 CSS，但事实证明媒体查询不能内联，我们有我们需要的封面图片规则。

我该如何解决这个问题？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

browserbrowserhtmlwysiwyg