AEM 在编辑器模式下为元素添加无限高度

Question

我们在 AEM 中创建网页时使用 HTML Banner 组件。 Banner 组件具有 height: 100vh CSS 属性，可覆盖视口的整个高度。 但是，在 AEM 中以编辑模式进行创作时，页面高度会无限增加。因此，编写页面成为一项乏味的任务。 AEM 正在编辑模式下为多个元素添加高度。

Answer 1

您可以通过添加仅存在于您的作者实例上并在编辑器页面上运行的额外 JavaScript 来解决您的问题。您必须在项目中的某个位置创建一个客户端库，并将“[cq.authoring.editor]”添加到其类别属性中。这将确保您的代码在编辑器页面上运行。

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[cq.authoring.editor]"/>

对于 JavaScript，你可以添加这样的内容，

//bannerHeightAuthor.js

$(() => {
    // get the content frame iframe's document object 
    let contentFrame = $('#ContentFrame').get(0).contentWindow.document
    // get the screen height
    let height = window.outerHeight

    $(contentFrame).find('.<banner_class>').each((_, banner) => {
        $(banner).css('height', height)
    })
})

在你的客户端库中添加js.txt文件，并添加以下代码

bannerHeightAuthor.js

Answer 2

在我的一个组件中，我通过阅读 wcmmode 解决了这个问题，它让我知道我是否处于创作模式或发布模式。一旦我知道它是发布模式，我就添加了一个类并设置了高度。如果是作者，则该类不存在，不会设置高度。

Answer 3

原因是“Parsys”

当您添加高度为 vh 的组件时，它会尝试占据全屏，并且 AEM 会尝试在底部添加“Parsys”。现在，vh 将尝试占据 Parsys 所占用的空间。因此，parsys 将再次下降，vh 将再次占据该空间。这是一个无限的过程。

我们需要限制JS