java - Adobe 体验管理器 6.2

Question

有没有人有关于如何创建二维动态组件的最佳实践示例。例如，将 js 数据传输到表中，其中可以有 x 列和 y 行 - 具有动态输入类型，例如文本、数字、下拉菜单。

var comparisonTableCarouselJSON = {
  tableColumns: [
    {
      columnData: [
        {
           cellType: "label", 
           text: "Test 3",
           richText: "",
           tickBox: "",
        },
      ]
    },
    {
      columnData: [
        {
          cellType: "label", 
          text: "Test 3",
          richText: "",
          tickBox: "",
        },
      ]
    },
    {
      columnData: [
        {
          cellType: "label", 
          text: "Test 3",
          richText: "",
          tickBox: "",
        },
      ]
    }
  ]
}

Answer 1

从评论中我了解到您希望使用 AEM 作为 headless CMS 和 React head。

方法 1:将 AEM 打造成 headless CMS 的推荐方法是 use content fragments 。您需要启用 RTE Plugins在片段中。然后创建一个片段并创作表内容。然后使用ComponentExporter model.json 可以导出并由 React head 使用。

方法 2: 创建一个扩展 aem core text component 的表格组件。 aemcore 文本具有所有需要的插件，因此您的自定义组件基本上是空白的。 aemcore 使用Text Model它扩展了 ComponentExporter。因此，您可以通过点击 */_jcr_content/*/table.model.json 来使用表格内容。这又很容易，因为涉及的编码非常少。

开发中的困难部分: 上述两种方法都使用ComponentExporter，在jackson的帮助下盲目导出jcr内容。 RTE 的表格插件将内容保存为 html。这意味着，生成的 *.model.json 将是一个 html 字符串。例如这样:

{"text": "<table><tbody><tr><th>Hello</th><th>World</th></tr></tbody></table>"}

在React端，您需要渲染为innerHtml或在React端使用HTML解析器，以您需要的格式解析内容。 为了避免在 FE 处进行innerHtml/解析，您需要构建一个类似于 core Text 的自定义 Sling 模型。扩展了 ComponentExporter。使用HTMLParser like Jsoup将 HTML 字符串解析为 DOM 对象。根据您所需的 json 格式，拥有一个包含所需字段的 TableDTO。最后将 DOMElement 从 jsoup 解析器映射到 TableDTO。 ComponentExporter 应导出自定义 TableDTO。这样你就会得到一个从 *.model.json 导出的整洁的 json