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

Question

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

Answer 1

您可以通过添加仅存在于作者实例并在编辑器页面上运行的额外JavaScript来添加解决问题的方法。你必须在项目的某个地方创建一个客户端库，并添加"[cq.author .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来解决这个问题，它让我知道我是处于作者模式还是发布模式。一旦我知道它是发布模式，我就添加一个类并设置高度。如果是author，则该类不存在，height也不会被设置。