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

yftpprvb  于 2022-12-24  发布在  其他
关注(0)|答案(1)|浏览(119)

我们在AEM中创建网页时使用HTML Banner组件。Banner组件具有高度:100vhCSS属性来覆盖视口的整个高度。但是当在AEM中以编辑模式创作时,页面的高度是无限增加的。因此创作页面成为一项繁琐的任务。AEM在编辑模式中对多个元素添加高度。

h5qlskok

h5qlskok1#

你可以通过添加一个只存在于你的作者示例中并在编辑器页面上运行的JavaScript来解决你的问题。你必须在你的项目中的某个地方创建一个客户端库,并将“[cq.authoring.editor]”添加到它的categories属性中。这将确保你的代码在你的编辑器页面上运行。

<?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,您可以添加类似于以下内容的内容,
第一个月

$(() => {
    // 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

相关问题