如何为AEM中的Row-Dual Column等组件添加行内样式支持

操作步骤 #

• 第一步：新增组件样式配置字段
  在组件对应的cq:dialog（单页面自定义样式场景）或者cq:design_dialog（全局模板通用样式场景）中添加字符串类型的配置字段，可根据需要配置全局样式、左列样式、右列样式三个字段，字段名分别设为inlineStyle、leftColumnStyle、rightColumnStyle。
• 第二步：修改HTL模板注入动态样式
  调整你现有组件的HTL代码，将动态样式变量注入到对应元素的style属性中，必须添加@ context='styleString'做XSS安全校验，修改后的参考代码如下：

<table class="ac_dualColumn" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100% !important; ${properties.inlineStyle @ context='styleString'}">
    <tr>
        <td valign="top" id="ac-column-left-cell" class="ac-content-cell ac-column-cell" width="50%" style="width: 50%; padding-right: 10px; ${properties.leftColumnStyle @ context='styleString'}">
            <div style="margin-bottom: 20px;"> 
                <div data-sly-resource="${'parLeft' @ resourceType='mcm/campaign/components/parsys'}" data-sly-unwrap></div>
            </div>
        </td>
        <td valign="top" id="ac-column-right-cell" class="ac-content-cell ac-column-cell" width="50%" style="width: 50%; padding-left: 10px; ${properties.rightColumnStyle @ context='styleString'}">
            <div style="margin-bottom: 20px;">
                <div data-sly-resource="${'parRight' @ resourceType='mcm/campaign/components/parsys'}" data-sly-unwrap></div>
            </div>
        </td>
    </tr>
</table>

注意：你原代码中有多余的空<td>标签，已经在上述参考代码中删除，避免出现渲染异常。

• 第三步：（可选）配置预设样式选项
  若不需要内容作者手动编写CSS代码，可在对话框中添加下拉选择组件，预设常用的行内样式组合（如背景色、边距、对齐方式等），选中后自动生成对应的CSS字符串赋值给样式变量即可。

内容的提问来源于stack exchange，提问作者Justin Bridges