【问题标题】:Sightly replace tag with different value - AEM用不同的值替换标签 - AEM
【发布时间】:2016-09-16 14:15:33
【问题描述】:

我正在尝试操纵从 RTE 读取的内容。 RTE 为 Shift+Enter 放置一个<br> 标签。对于WAI 合规性,需要将<br> 替换为<br aria-hidden='true'>

在 JavaScript Use API 中尝试过跟随,但跟随不起作用,它保持标签原样

text.replaceAll("<br>","<br aria-hidden='true'>");

如果我用一些不同的标签替换它会正确替换值

text.replaceAll("<br>","<div>Something</div>");

在 Java Use API 中也尝试过同样的事情,但不起作用。任何指针都会有所帮助。

【问题讨论】:

  • 检查是否替换为
    但包含已知的正确数据属性 - 因为这对我来说似乎是标签参数验证。例如尝试
    顺便说一句
    应该是
    (封闭标签)你最终如何输出你的html?因为也许它只是清除了你的属性..
  • @ub1k 这适用于已知属性,例如class。 WAI 是 W3C 标准,期待它能够发挥作用。

标签: aem sightly


【解决方案1】:

您需要覆盖的 rte 插件是位于 /etc/clientlibs/granite/coralui2/optional/rte/js/core/plugins/KeyPlugin.js 的 KeyPlugin。

在创建 <br> 元素时的第 254 行附近,使用
newBr.setAttribute('aria-hidden', true);

添加您的属性

调试提示:您可以在 Chrome 中为此文件设置一个调试点,并在运行时更改代码(搜索 KeyPlugin)/etc/clientlibs/granite/coralui2/optional/rte.js

完成此操作后,单击对话框确定,您可以在网络控制台中看到<br aria-hidden="true"> 被发布到服务器。

在此之后,您可能会遇到 Sling 的 XSS 保护,它会从生成的 HTML 中删除此属性。查找此日志

org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The br tag contained an attribute that we could not process. The aria-hidden attribute has been filtered out, but the tag is still in place. The value of the attribute was "true".

我知道有两种方法可以解决这个问题。

  1. 谨慎使用“不安全”上下文。
  2. 覆盖/libs/sling/xss/config.xml并修改<br>标签的验证。

【讨论】:

  • 谢谢阿布舍克。这适用于 AEM 方面。对于 libs/cq/ui/rte/core/plugins/KeyPlugin.js 中存在的经典 UI 类似文件。无法使用 OOTB 覆盖节点选项进行覆盖。得到org.apache.sling.commons.json.JSONException: Misplaced object. 需要检查一下。
  • 这应该可以通过在您的项目中使用rte.coralui2 类别创建一个clientlib 文件夹然后覆盖JS 来实现。为它创建了一个示例gist
【解决方案2】:

如果您查看 CRXDE 中的 /libs/cq/ui/rte/core/DomProcessor.js/libs/cq/ui/rte/core/HtmlProcessor.js,您会发现这里发生了很多特定于标签的处理。

现在有多种方法可以继续 -

  1. 通过覆盖两个 JS 之一找出添加自定义处理的正确位置(我不确定 JS 覆盖是否有效,因为这些是静态资源)。
  2. 在使用 Java 使用 API 的渲染逻辑中,添加基于字符串标记化的自定义处理步骤来处理 <br> 节点并向它们添加属性。
  3. 编写自定义重写器来处理<br> 标签并为其添加所需的属性。 Make 是由配置驱动的,以允许将来进行更改。
  4. 使用 JQUERY 处理 <br> 元素并向其添加您的自定义属性。

我没有探索的是可以为 RTE 定义或自定义的 HTML 规则,如果您有时间,您可以弄清楚是否可以定义规则来实现您想要的,这在我看来是最好的解决方案.

【讨论】:

  • 感谢 Ameesh 的回复。 Jquery 选项有效,但我们仅从 AEM 发出标记。如果我们无法在 AEM 端处理,需要询问 UI 层。需要尝试其他选项。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-03-10
  • 2016-01-11
  • 2018-01-29
  • 1970-01-01
  • 2014-02-02
  • 2012-03-13
  • 2020-11-09
相关资源
最近更新 更多