Um einer Karte Rich Text hinzuzufügen, müssen wir die relevante Karte auf verschiedene Arten aktualisieren. Stellen Sie sicher, dass Sie eine Karte geforkt haben, die Sie auf der obersten Ebene bearbeiten können, und dass Sie keine Karte im Thema selbst bearbeiten.

1. Ordnen Sie die Details-Eigenschaft Rich-Text-HTML zu: Verwenden Sie entweder den Rich-Text-Formatierer oder ein Markdown- oder Rich-Text (v2)-Feld.
2. Rich-Text-Kürzung handhaben: Wenn Sie den Rich-Text-Formatierer verwenden, können Sie je nach verwendetem Thema entweder die Kürzung deaktivieren oder die Karte aktualisieren, um die RTF-Kürzung zu handhaben. Beachten Sie, dass bei der Verwendung eines Markdown- oder Rich-Text-Feldes (v2) die Kürzung nicht in das Theme integriert ist.
3. Aktualisieren Sie die Handlebars-Vorlage, um die Anzeige von HTML auf den Pages zu ermöglichen.
4. Fügen Sie dem Rich-Text optionale Formatierungen hinzu.

Rich Text wird am häufigsten für den Details-Abschnitt von Karten verwendet, aber Sie können ihn mit jedem Feld verwenden, das Sie als Rich-Text-Feld im Knowledge Graph gespeichert haben. Stellen Sie sicher, dass Sie dieses Feld anstelle von Details aktualisieren, auf die im Rest dieses Artikels Bezug genommen wird.

Um Karten zu ändern, damit sie Rich-Text-Support bieten:

1. Ordnen Sie die Setails-Eigenschaft Rich-Text-HTML zu: Legen Sie in der Datei card component.js fest, dass die Details-Eigenschaft das Rich-Text-Feld übernimmt. Wie Sie Rich Text in HTML umwandeln, hängt vom Feldtyp des Rich-Text-Feldes ab, das Sie verwenden:
   • Wenn Sie ein Feld vom Typ Markdown oder Rich Text (v2) verwenden, nutzen Sie das HTML-Unterfeld des Feldes, das Sie anzeigen möchten (ersetzen Sie c_testRTDescription durch den API-Namen Ihres Feldes):

     • details: profile.c_testRTDescription ? profile.c_testRTDescription['html'] : null

   • Wenn Sie ein Feld vom Typ Legacy Rich Text (v1) verwenden, nutzen Sie den Rich Text Formatter (ersetzen Sie answer durch den API-Namen Ihres Feldes). In der Common Formatters Referenzdokumentation erfahren Sie mehr über den Rich Text Formatter.

     • details: profile.answer ? ANSWERS.formatRichText(profile.answer, "answer", linkTarget) : null,

2. Rich-Text-Trunkierung handhaben: Wie Sie mit der Funktion „Mehr anzeigen“ und der Trunkierung umgehen, hängt von der Art des Feldes ab, das Sie verwenden, und von der Version des Themes, auf dem Sie aufbauen:
   • • Wenn Sie ein Feld vom Typ Markdown oder Rich Text (v2) verwenden, ist die Trunkierung von Rich Text nicht im Theme integriert. Falls Ihr Rich-Text-Feld mehr Inhalt hat, als auf eine Karte passen würde, empfehlen wir Ihnen, die standardmäßigen Snippets zu verwenden, die in die Dokument-Standardkarte integriert sind (anstatt dessen, was Sie in Schritt 1 gemacht haben). So sieht es aus:

       • dataForRender(profile) { 
           let detailsData = ''; 
           if (profile?.d_highlightedFields?.s_snippet) { 
             const { value, matchedSubstrings } = profile.d_highlightedFields.s_snippet; 
             detailsData = Formatter.highlightField(value, matchedSubstrings); 
           } else if (profile.s_snippet) { 
              detailsData = profile.s_snippet; 
           } 
         
           return { 
             ... 
             details: detailsData, // The text in the body of the card

1. • Wenn Sie ein Feld des Typs Legacy Rich Text (v1) verwenden und sich auf Theme 1.28 oder niedriger befinden, deaktivieren Sie die Funktionalität 'Mehr anzeigen/weniger anzeigen'. Das Risiko besteht darin, dass Sie bei der Kürzung ein abschließendes tag abschneiden (z. B. </div>, </p>), was die Pages kaputt machen könnte. Kommentieren Sie das Objekt showMoreDetails in der Datei component.js für Ihre Karte aus oder löschen Sie es.

     • // showMoreDetails: { 
       // showMoreLimit: 750, // Character count limit 
       // showMoreText: 'Show more', // Label when toggle will show truncated text 
       // showLessText: 'Show less' // Label when toggle will hide truncated text 
       // }, 

   • Wenn Sie ein Feld vom Typ Legacy Rich Text (v1) verwenden und sich auf Theme 1.29 oder höher befinden, können Sie die RTF-Kürzung nutzen. Verwenden Sie showMoreDetails mit truncatedDetails. Falls dies auf Ihrer Karte vorhanden ist, müssen Sie es möglicherweise in einen Kommentar einfügen. Andernfalls bearbeiten Sie Ihre Kartendatei component.js so, dass sie etwa so aussieht (ersetzen Sie answer durch den API-Namen Ihres Feldes):

     • return {
         title: profile.name, // The header text of the card
         ...
         details: profile.answer ? 
       ANSWERS.formatRichText(profile.answer, 'answer', 
         linkTarget): null, // Der Text im Hauptteil der Karte
         // Wenn die Kartendetails länger als eine bestimmte Zeichenanzahl sind, können Sie den Text kürzen. Ein Umschalter wird bereitgestellt, mit dem Sie den abgeschnittenen Text ein- oder ausblenden können.
         //Hinweis: Falls Sie Rich-Text für die Details verwenden, sollten Sie diese Funktion nicht aktivieren.
           showMoreDetails: {
             truncatedDetails: profile.answer ? ANSWERS.formatRichText(profile.answer,
       'answer', linkTarget, 38) : null, // Character count limit
             showMoreText: 'Show more', // Label when toggle will show truncated text
             showLessText: 'Show less' // Label when toggle will hide truncated text
         },
         ...
       }

       • Der Wert für truncatedDetails ist ähnlich wie details, übergibt jedoch einen zusätzlichen Parameter an ANSWERS.formatRichText: die Zeichenanzahl, bei der der Rich-Text-Inhalt abgeschnitten wird, in diesem Fall 38. Diese Zeichenanzahl ignoriert alle Nicht-Textzeichen, wie HTML-Tags und Formatierungen. Jeder beliebige Zeichenfolgenwert kann an truncatedDetails übergeben werden. Wenn Sie zum Beispiel die untenstehenden Kartendetails haben, werden die 3 Hashtags am Anfang und in der Mitte ignoriert, ebenso wie die Zeilenumbruchsymbole:
       • Standardmäßig werden am Ende des gekürzten Textes Auslassungspunkte hinzugefügt. Dies kann durch Hinzufügen eines weiteren Parameters zu ANSWERS.formatRichText angepasst werden, um das Suffix festzulegen. Um die Auslassungspunkte vollständig zu entfernen, könnten Sie stattdessen eine leere Zeichenfolge angeben:

         • ANSWERS.formatRichText(profile.answer, 'answer', linkTarget, 38, '')

3. Aktualisieren Sie die Handlebars-Vorlage, um die Anzeige von HTML auf den pages zu ermöglichen. Fügen Sie {{{ }}} zum details -Abschnitt in Ihrer Handlebars-Vorlage hinzu. Dadurch wird sichergestellt, dass der HTML-Code auf der Seite gerendert wird, anstatt unverändert gedruckt zu werden oder den HTML-Code zu entkommen.
   • Dies erfolgt standardmäßig in der integrierten FAQ-Akkordeonkarte. Wenn Sie eine Karte forken, stellen Sie sicher, dass die Felder, die Rich Text verwenden, in der Datei template.hbs der Karte mit dreifachen geschweiften Klammern umgeben sind.

     • • <div class="HitchhikerFaqAccordion-detailsText js-HitchhikerCard-detailsText{{#if showExcessDetailsToggle}} 
         js-hidden{{/if}}"> 
            {{{card.details}}} 
         </div>

4. (Optional) Stil hinzufügen.
   • Möglicherweise möchten Sie zusätzliche Stilelemente hinzufügen. Beispielsweise der Abstand zwischen Absätzen und die verknüpfen-Formatierung. Nachfolgend finden Sie das empfohlene Styling:

     • .HitchhikerFaqAccordion-details
       {
         p, ul, ol
         {
           margin-bottom: .5rem
         }
       
         a
         {
           color: var(--yxt-color-brand-primary);
           text-decoration: underline;
       
           &:hover {
           text-decoration: none;
           }
         }
       }