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

Question

我在 AEM 6.1的经典用户界面中有一个项目，我可以将默认的拖动组件或资源标签简单地覆盖到自定义的标签那样：

1. 我创建了一个自定义的parsys组件。我们将其命名为 custom / parsys 我使用了sling：resourceSuperType指向基础/组件/ parsys 。
2. 我已经分别创建了 custom / parsys / new 。

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

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

现在我能够轻松自定义每个解析器＆＃39;通过 / etc / designs / custom 结构设置放置区域标签。所以每个parsys基本上都明确地告诉作者它接受了什么样的组件。除了传统的组件＆＃39; parsys中的可用性为编辑者提供了很大的价值，可以处理具有许多不同段落的页面的复杂结构，通常彼此嵌套。

现在我正在使用Touch UI在AEM 6.3中工作，而且很多方式都改变了，我不能简单地移植上述解决方案。谷歌搜索这个问题不幸没有帮助，6.3很新鲜，有旧版本的 wcm / foundation / components / parsys 和/或 foundation / components / parsys 的解决方案，但不是最新的。有没人有人这样做过吗？




<小时/> 更新：我已经使用Classic UI解决方案创建了一个示例项目。所以我们在new.jsp下面有designs和相应的配置。在构建并部署到AEM 6.3时，可以在/content/enigmatic下检查并生成所需的行为：

Answer 1

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

替代解决方案： -

• 找到叠加parsys的方法。
• 使用选择器方法，修改其与Inspectable.js的交互，您可以在包含解析的同时提供新的组件特定消息，可以使用选择器。

<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

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

以下是默认的占位符样式（我们将使用其他/自定义CSS替换par content属性作为我们的parsys组件）：

这是组件上的自定义/附加编辑器CSS：

这是结果：

P.S。 ：最好使用data-path属性进行样式设置，而不要使用data-text属性进行设置：

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

祝你好运...

Answer 3

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

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

有关详细信息，只需检查functioning code，主要提交为this one。

Answer 4

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

1.使用 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.在/ apps下覆盖/libs/cq/gui/components/authoring/editors/clientlibs/core/js/model/Inspectable.js并替换函数的以下行 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.如果您的组件中有多个parsys，并且您希望为每个分析器显示不同的占位符，那么使用选择器来包含@TechNiks答案中描述的那些parsys组件，但继续将占位符提示配置为在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中读取（如果已设置），否则显示默认值。

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