如何在 AEM 6.3 的 Touch UI 中更改 parsys 放置区域文本？

Question

我在 AEM 6.1 的经典 UI 中有一个项目，我可以在其中覆盖默认设置 将组件或资产拖到此处 标签到自定义标签，就像这样：

1. 我创建了一个自定义 parsys 组件。让我们把它命名为 custom/parsys 我用 sling:resourceSuperType 指向 foundation/components/parsys.
2. 我分别创建了custom/parsys/new

3. 我通过添加以下行覆盖了 new.jsp：

   String emptyText = currentStyle.get("cq:emptyText", ""); if (StringUtils.isNotBlank(emptyText)) { editConfig.setEmpty(true); editConfig.setEmptyText(emptyText); }

现在我可以通过 /etc/designs/custom 结构轻松自定义每个 parsys 的放置区域标签。所以每个 parsys 基本上都明确地告诉作者它接受了什么样的组件。除了传统组件在 parsys 中的可用性之外，这为编辑人员处理具有许多不同段落的复杂结构的页面增加了很大的价值，这些段落通常嵌套在另一个段落中。

现在我正在使用 Touch UI 在 AEM 6.3 中工作，并且发生了很多变化，我无法简单地移植上述解决方案。不幸的是，谷歌搜索这个问题没有帮助，6.3 很新鲜，有针对旧版本 wcm/foundation/components/parsys and/or [=57 的解决方案=]，但不是最新的。有人解决过这个问题吗？

---

更新：我使用经典 UI 解决方案创建了一个示例项目。所以这里我们有 new.jsp and corresponding configuration under designs. When built and deployed to AEM 6.3 it can be checked under /content/enigmatic 并产生所需的行为：

Answer 1

上述方法不适用于 Touch UI。 Adobe 在其 "new" 部分的 i18n 文件中将其硬编码为 "Drag Components Here"。

备选方案：-

• 寻找覆盖 parsys 的方法。
• 使用选择器方法，修改其与 Inspectable.js 的交互，您可以在其中提供新的组件特定消息，同时包括 parsys，可能是通过使用选择器

<sly data-sly-resource="${@path='par1',resourceType='mysite/components/parsys',selectors='par-1'}"/>

• 使用
将添加的选择器附加到 parsys.html 内 "new" 部分的 类

${request.requestPathInfo.selectors[0]}

• 现在，在 Inspectable JS 中，您可以围绕行执行类似的操作 102.

if (this.dom.hasClass("par-1")) {
  return "Customized Text for Par 1";
}
if (this.dom.hasClass("par-2")) {
  return "Customized Text for Par 2";
}
// New component placeholder
if (this.dom.hasClass(newComponentClass)) {
  return newComponentPlaceholderText;
}

详情请参考：- Detailed Help text Customization For parsys in Touch UI

Answer 2

通过结合 TechNiks 的建议和我以前的方法，我创建了一个可行的解决方案。它还不完美，因为它必须假设段落资源始终存在。此外，它会创建许多（可能是多余的）请求调用，但从表面上看，它以我希望的方式工作，只需在设计中进行简单配置，并且证明它可以完成。为了优化，需要进行更深入的挖掘（我不会很快做，这就是为什么我已经 post 当前版本）。 所以这些是我采取的主要步骤：

1. 我使用我自己的 parsys 叠加组件，
2. 我为它提供了从其设计中获取 cq:emptyText 的配置选择器，
3. 我覆盖 Inspectable 的函数 hasPlaceholder 以请求配置的值。

有关详细信息，只需查看 functioning code, the main commit being this one。

Answer 3

我今天遇到了相同的功能请求，阅读了您的 post 并提出了更简单的解决方案：

1.Define 在您的组件自定义占位符文本中使用 cq:htmlTag 配置通过自定义 属性 data-placeholder-hint

<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
jcr:primaryType="nt:unstructured"
data-placeholder-hint="Drag and drop your fancy components here."/>

2.Overlay /libs/cq/gui/components/authoring/editors/clientlibs/core/js/model/Inspectable.js under /apps 并替换函数的以下行 hasPlaceholder():

    if (this.dom.hasClass(newComponentClass)) {
        return newComponentPlaceholderText;
    }

与：

    if (this.dom.hasClass(newComponentClass)) {
        // START OVERLAY: custom parsys text hint
        // show custom text hint if set with the component's configuration cq:htmlTag via the property data-placeholder-hint
        var editableEl = this.dom.parents(".cq-Editable-dom[data-placeholder-hint],.cq-Editable-dom [data-placeholder-hint]").first();
        if(editableEl.length > 0) {
            var placeholderHint = editableEl.data('placeholderHint');
            var elClasses = this.dom.attr("class").split(" ");
            for(var i = 0; i < elClasses.length; i++) {
                var placeholderHintSelector = editableEl.data("placeholder-hint-" + elClasses[i]);
                if(placeholderHintSelector) {
                    placeholderHint = placeholderHintSelector;
                    break;
                }
            }
            if(placeholderHint) {
                return Granite.I18n.get(placeholderHint);
            }
        }
        // END OVERLAY: custom parsys text hint
        return newComponentPlaceholderText;
    }

3.If 你的组件中有多个 parsys，你想为每个组件显示不同的占位符，而不是使用选择器来包含那些 parsys 组件，如@TechNiks 的答案中所述，但继续配置1.中描述的占位符提示，只需使用选择器作为后缀

<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
jcr:primaryType="nt:unstructured"
data-placeholder-hint="Drag and drop your fancy components here (default message)."
data-placeholder-hint-mypar1selector="Drag and drop your fancy components here (mypar1selector message)." />

基本上发生的事情是您通过数据属性 data-placeholder-hint 设置占位符消息，如果已设置则稍后从 JS 读取它，否则显示默认消息。

EDIT 我编辑了 post 以便根据要求支持多个 parsys 占位符。它基本上遵循与上述选择器相同的想法，但使用我的简单性和灵活性来配置和显示消息，而无需在覆盖文件中硬编码消息。

Answer 4

AEM Parsys 利用 placeholder element 上的 data-text 属性 使用 CSS 填充 Parsys drop text，如您在 blue 中所见:

这些是默认的占位符样式（我们将用 additional/custom CSS 覆盖 content 属性 我们的 parsys 组件):

这是我们组件上的 custom/additional 编辑器 CSS：

这是结果：

P.S。 ：最好使用 data-path 属性而不是 data-text 属性来设置样式：

div[data-path='/content/aemarch13/home/jcr:content/NavbarNav/*']:before {
   content: 'Drop it here.'
}

祝你好运...