RTF-tekst met AEM Headless

Het tekstveld met meerdere regels is een gegevenstype van inhoudsfragmenten waarmee auteurs RTF-inhoud kunnen maken. Verwijzingen naar andere inhoud, zoals afbeeldingen of andere Content Fragments, kunnen dynamisch in regel worden ingevoegd in de tekstflow. Het tekstveld Eén regel is een ander gegevenstype van inhoudsfragmenten dat moet worden gebruikt voor eenvoudige tekstelementen.

AEM GraphQL API biedt een robuuste mogelijkheid om RTF-tekst te retourneren als HTML, normale tekst of pure JSON. De vertegenwoordiging JSON is krachtig aangezien het de cliënttoepassing volledige controle over geeft hoe te om de inhoud terug te geven.

Meerdere regels bewerken

In de Redacteur van het Fragment van de Inhoud, verstrekt de het menubar van het multi-line tekstgebied auteurs van standaard rijke tekst het formatteren mogelijkheden, zoals gewaagd, cursief, en onderstreept. Het openen van het multi-lijngebied op het volledige schermwijze laat ​ extra het formatteren hulpmiddelen zoals het type van Paragraaf toe, vinden en vervangen, spellingcontrole, en meer ​.

Tekstgegevenstype van meerdere regels multi-line-data-type

Gebruik het multi-line tekst gegevenstype wanneer het bepalen van uw Model van het Fragment van de Inhoud om rijke tekst toe te laten creeert.

Verschillende eigenschappen van het veld met meerdere regels kunnen worden geconfigureerd.

teruggeeft als bezit kan aan worden geplaatst:

Het StandaardType kan aan worden geplaatst:

De optie StandaardType beïnvloedt direct de het uitgeven ervaring en bepaalt als de rijke teksthulpmiddelen aanwezig zijn.

U kunt ​ ook toelaten in-line verwijzingen ​ aan andere Fragmenten van de Inhoud door te controleren toestaan Verwijzing van het Fragment en het vormen van Toegestane Modellen van het Fragment van de Inhoud.

Controleer het Vertaalbare vakje, als de inhoud moet worden gelokaliseerd. Alleen RTF en normale tekst kunnen worden gelokaliseerd. Zie ​ werkend met gelokaliseerde inhoud voor meer details ​.

Rijke tekstreactie met GraphQL API

Wanneer ontwikkelaars een GraphQL-query maken, kunnen ze verschillende antwoordtypen kiezen in html , plaintext , markdown en json in een veld met meerdere regels.

De ontwikkelaars kunnen de ​ Voorproef JSON ​ in de redacteur van het Fragment van de Inhoud gebruiken om alle waarden van het huidige Fragment van de Inhoud te tonen dat kan worden teruggekeerd gebruikend GraphQL API.

GraphQL-query voortgezet

Als u de responsindeling json voor het veld met meerdere regels selecteert, hebt u de meeste flexibiliteit bij het werken met RTF-inhoud. De rijke tekstinhoud wordt geleverd als een serie van JSON knooptypes die uniek op het cliëntplatform kunnen worden verwerkt.

Hieronder is een JSON reactietype van een multi-line genoemd gebied main dat een paragraaf bevat: "Dit is een paragraaf die belangrijke ​inhoud omvat."waar "belangrijk"als gewaagd duidelijk is.

query ($path: String!) {
  articleByPath(_path: $path)
  {
    item {
      _path
      main {
        json
      }
    }
  }
}

Voor de variabele $path die in het filter _path wordt gebruikt, is het volledige pad naar het inhoudsfragment vereist (bijvoorbeeld /content/dam/wknd/en/magazine/sample-article ).

reactie van GraphQL:

{
  "data": {
    "articleByPath": {
      "item": {
        "_path": "/content/dam/wknd/en/magazine/sample-article",
        "main": {
          "json": [
            {
              "nodeType": "paragraph",
              "content": [
                {
                  "nodeType": "text",
                  "value": "This is a paragraph that includes "
                },
                {
                  "nodeType": "text",
                  "value": "important",
                  "format": {
                    "variants": [
                      "bold"
                    ]
                  }
                },
                {
                  "nodeType": "text",
                  "value": " content. "
                }
              ]
            }
          ]
        }
      }
    }
  }
}

Andere voorbeelden

Hieronder zijn verscheidene voorbeelden van reactietypen van een multi-line genoemd gebied main dat een paragraaf bevat: "Dit is een paragraaf die belangrijke inhoud omvat." waar "belangrijk"als gewaagd duidelijk is.

query ($path: String!) {
  articleByPath(_path: $path)
  {
    item {
      _path
      main {
        html
      }
    }
  }
}

{
  "data": {
    "articleByPath": {
      "item": {
        "_path": "/content/dam/wknd/en/magazine/sample-article",
        "main": {
            "html": "<p>This is a paragraph that includes <b>important</b> content.&nbsp;</p>\n"
        }
      }
    }
  }
}

query ($path: String!) {
  articleByPath(_path: $path)
  {
    item {
      _path
      main {
        markdown
      }
    }
  }
}

{
  "data": {
    "articleByPath": {
      "item": {
        "_path": "/content/dam/wknd/en/magazine/sample-article",
        "main": {
            "markdown": "This is a paragraph that includes **important** content. \n\n ",
        }
      }
    }
  }
}

query ($path: String!) {
  articleByPath(_path: $path)
  {
    item {
      _path
      main {
        plaintext
      }
    }
  }
}

{
  "data": {
    "articleByPath": {
      "item": {
        "_path": "/content/dam/wknd/en/magazine/sample-article",
        "main": {
            "plaintext": "This is a paragraph that includes important content. ",
        }
      }
    }
  }
}

Een JSON-reactie met RTF-opmaak renderen render-multiline-json-richtext

De JSON-reactie van het veld met meerdere regels is gestructureerd als een hiërarchische structuur. Elk object of knooppunt vertegenwoordigt een ander HTML-blok met opgemaakte tekst.

Hieronder ziet u een voorbeeld van een JSON-reactie van een tekstveld met meerdere regels. Elk object, of knooppunt, bevat een nodeType die het HTML-blok van de opgemaakte tekst zoals paragraph , link en text vertegenwoordigt. Elk knooppunt bevat optioneel content dat een subarray is met onderliggende knooppunten van het huidige knooppunt.

"json": [// root "content" or child nodes
            {
                "nodeType": "paragraph", // node for a paragraph
                "content": [ // children of current node
                {
                    "nodeType": "text", // node for a text
                    "value": "This is the first paragraph. "
                },
                {
                    "nodeType": "link",
                    "data": {
                        "href": "http://www.adobe.com"
                    },
                    "value": "An external link"
                }
                ],
            },
            {
                "nodeType": "paragraph",
                "content": [
                {
                    "nodeType": "text",
                    "value": "This is the second paragraph."
                },
                ],
            },
]

De eenvoudigste manier om de multiline json reactie te renderen is om elk object, of knooppunt, in de reactie te verwerken en vervolgens onderliggende knooppunten van het huidige knooppunt te verwerken. Een recursieve functie kan worden gebruikt om de JSON-boom te doorlopen.

Hieronder ziet u voorbeeldcode die een recursieve traversale aanpak illustreert. De steekproeven zijn JavaScript gebaseerd en gebruiken React ​ JSX ​, nochtans kunnen de programmeringsconcepten op om het even welke taal worden toegepast.

// renderNodeList - renders a list of nodes
function renderNodeList(childNodes) {

    if(!childNodes) {
        // null check
        return null;
    }

    return childNodes.map(node, index) => {
        return renderNode(node);
    }
}

renderNodeList is een recursieve functie die een array van childNodes neemt. Elk knooppunt in de array wordt vervolgens doorgegeven aan een functie renderNode , die op zijn beurt renderNodeList aanroept wanneer het knooppunt onderliggende knooppunten heeft.

// renderNode - renders an individual node
function renderNode(node) {

    // if the current node has children, recursively process them
    const children = node.content ? renderNodeList(node.content) : null;

    // use a map to render the current node based on its nodeType
    return nodeMap[node.nodeType]?.(node, children);
}

De functie renderNode verwacht één object met de naam node . Een knooppunt kan onderliggende knooppunten hebben die recursief worden verwerkt met de hierboven beschreven functie renderNodeList . Ten slotte wordt een nodeMap gebruikt om de inhoud van het knooppunt te renderen op basis van de nodeType ervan.

// nodeMap - object literal that maps a JSX response based on a given key (nodeType)
const nodeMap = {
    'paragraph': (node, children) => <p>{children}</p>,
    'link': node => <a href={node.data.href} target={node.data.target}>{node.value}</a>,
    'text': node => node.value,
    'unordered-list': (node, children) => <ul>{children}</ul>,
    'ordered-list': (node, children) => <ol>{children}</ol>,
    'list-item': (node, children) => <li>{children}</li>,
    ...
}

nodeMap is een letterlijke JavaScript Object die wordt gebruikt als een kaart. Elk van de "toetsen" vertegenwoordigt een andere nodeType . Parameters van node en children kunnen worden doorgegeven aan de resulterende functies die het knooppunt renderen. Het retourneringstype dat in dit voorbeeld wordt gebruikt, is JSX, maar de benadering kan worden aangepast om een letterlijke tekenreeks samen te stellen die HTML-inhoud vertegenwoordigt.

Voorbeeld van volledige code

Een herbruikbaar rijke tekst-teruggevend nut kan in het ​ WKND GraphQL React voorbeeld ​ worden gevonden.

In-line verwijzingen toevoegen aan RTF-tekst insert-fragment-references

In het veld Mutliline kunnen auteurs afbeeldingen of andere digitale elementen uit AEM Assets invoegen in de tekststroom met tekstopmaak.

op

Het bovenstaande schermschot toont een beeld dat op het multi-lijngebied wordt opgenomen gebruikend de activa van het Tussenvoegsel knoop.

De verwijzingen naar andere Fragmenten van de Inhoud kunnen ook op het multi-line gebied worden verbonden of worden opgenomen gebruikend de knoop van het Fragment van de Inhoud van het Tussenvoegsel.

Bovenstaande schermafbeelding toont een ander Content Fragment, Ultimate Guide to LA Skate Parks, dat wordt ingevoegd in het veld met meerdere regels. De types van de Fragmenten van de Inhoud die in gebied kunnen worden opgenomen worden gecontroleerd door Toegestane Modellen van het Fragment van de Inhoud configuratie in het ​ multi-line gegevenstype ​ in het Model van het Fragment van de Inhoud.

In-line zoekopdrachten uitvoeren met GraphQL

Met de GraphQL API kunnen ontwikkelaars een query maken die aanvullende eigenschappen bevat over verwijzingen die in een veld met meerdere regels zijn ingevoegd. De JSON-reactie bevat een afzonderlijk _references -object waarin deze extra eigenschappen worden vermeld. Het JSON-antwoord geeft ontwikkelaars de volledige controle over hoe ze de referenties of koppelingen moeten weergeven in plaats van dat ze moeten omgaan met gecommuniceerde HTML.

U kunt bijvoorbeeld het volgende doen:

Gebruik het retourneringstype json en neem het object _references op wanneer u een GraphQL-query samenstelt:

GraphQL bleef vraag:

query ($path: String!) {
  articleByPath(_path: $path, _assetTransform: { format: JPG, preferWebp: true })
  {
    item {
      _path
      main {
        json
      }
    }
    _references {
      ...on ImageRef {
        _dynamicUrl
        __typename
      }
      ...on ArticleModel {
        _path
        author
        __typename
      }
    }
  }
}

In de bovenstaande query wordt het veld main geretourneerd als JSON. Het _references -object bevat fragmenten voor de afhandeling van alle verwijzingen van het type ImageRef of ArticleModel .

JSON reactie:

{
  "data": {
    "articleByPath": {
      "item": {
        "_path": "/content/dam/wknd/en/magazine/sample-article",
        "main": {
          "json": [
            {
              "nodeType": "paragraph",
              "content": [
                {
                  "nodeType": "text",
                  "value": "This is a paragraph that includes "
                },
                {
                  "nodeType": "text",
                  "value": "important",
                  "format": {
                    "variants": [
                      "bold"
                    ]
                  }
                },
                {
                  "nodeType": "text",
                  "value": " content. "
                }
              ]
            },
            {
              "nodeType": "paragraph",
              "content": [
                {
                  "nodeType": "reference",
                  "data": {
                    "path": "/content/dam/wknd/en/activities/climbing/sport-climbing.jpg",
                    "mimetype": "image/jpeg"
                  }
                }
              ]
            },
            {
              "nodeType": "paragraph",
              "content": [
                {
                  "nodeType": "text",
                  "value": "Reference another Content Fragment: "
                },
                {
                  "nodeType": "reference",
                  "data": {
                    "href": "/content/dam/wknd/en/magazine/la-skateparks/ultimate-guide-to-la-skateparks",
                    "type": "fragment"
                  },
                  "value": "Ultimate Guide to LA Skateparks"
                }
              ]
            }
          ]
        }
      },
      "_references": [
        {
          "_dynamicUrl": "/adobe/dynamicmedia/deliver/dm-aid--dd42d814-88ec-4c4d-b5ef-e3dc4bc0cb42/sport-climbing.jpg?preferwebp=true",
          "__typename": "ImageRef"
        },
        {
          "_path": "/content/dam/wknd/en/magazine/la-skateparks/ultimate-guide-to-la-skateparks",
          "author": "Stacey Roswells",
          "__typename": "ArticleModel"
        }
      ]
    }
  }
}

De JSON-reactie omvat de locatie waar de verwijzing is ingevoegd in de RTF-tekst met de "nodeType": "reference" . Het _references -object bevat vervolgens elke referentie.

Inline-verwijzingen renderen in RTF-tekst

Om in-line verwijzingen terug te geven, kan de recursieve benadering die in ​ wordt verklaard die een multi-lijn reactie JSON ​ teruggeven worden uitgebreid.

Waar nodeMap de kaart is die de JSON-knooppunten rendert.

const nodeMap = {
        'reference': (node, children) => {

            // variable for reference in _references object
            let reference;

            // asset reference
            if (node.data.path) {
                // find reference based on path
                reference = references.find( ref => ref._path === node.data.path);
            }
            // Fragment Reference
            if (node.data.href) {
                // find in-line reference within _references array based on href and _path properties
                reference = references.find( ref => ref._path === node.data.href);
            }

            // if reference found, merge properties of reference and current node, then return render method of it using __typename property
            return reference ? renderReference[reference.__typename]({...reference, ...node}) : null;
        }
    }

De aanpak op hoog niveau is om te inspecteren wanneer een nodeType gelijk is aan reference in de Mutli Line JSON-respons. Vervolgens kan een aangepaste renderfunctie worden aangeroepen die het object _references bevat dat in het GraphQL-antwoord wordt geretourneerd.

Het inline verwijzingspad kan vervolgens worden vergeleken met de corresponderende vermelding in het _references -object en een andere aangepaste kaart renderReference kan worden aangeroepen.

const renderReference = {
    // node contains merged properties of the in-line reference and _references object
    'ImageRef': (node) => {
        // when __typename === ImageRef
        return <img src={node._dynamicUrl} alt={'in-line reference'} />
    },
    'ArticleModel': (node) => {
        // when __typename === ArticleModel
        return <Link to={`/article:${node._path}`}>{`${node.value}`}</Link>;
    }
    ...
}

Met __typename van het _references -object kunt u verschillende referentietypen toewijzen aan verschillende renderfuncties.

Voorbeeld van volledige code

Een volledig voorbeeld van het schrijven van een renderer van douaneverwijzingen kan in ​ AdventureDetail.js ​ als deel van ​ GraphQL React voorbeeld van WKND ​ worden gevonden.

Voorbeeld van begin tot einde

De voorgaande video toont een voorbeeld van begin tot eind: