Per aggiungere Rich Text a una scheda, dovrai aggiornare la scheda pertinente in diversi modi. Assicurati di aver creato un fork di una scheda che puoi modificare al livello superiore e di non modificare una scheda nel tema stesso.

1. Mappa la proprietà details all'HTML Rich Text: utilizza l'editor di testo RTF oppure un campo Markdown o Rich Text (v2).
2. Gestisci il troncamento del Rich Text: se utilizzi l'editor di testo RTF, è possibile disabilitare il troncamento o aggiornare la scheda per gestire il troncamento RTF, a seconda del tema in uso. Tieni presente che se utilizzi un campo Markdown o Rich Text (v2), il troncamento non è integrato nel tema.
3. Aggiorna il template Handlebars per consentire la visualizzazione del codice HTML sulle pagine.
4. Aggiungi uno stile opzionale al Rich Text

Il Rich Text è più comunemente utilizzato per la sezione details delle schede, ma può essere utilizzato con qualsiasi campo memorizzato come campo Rich Text nel Knowledge Graph. Assicurati di aggiornare quel campo invece di details, a cui si fa riferimento nel resto di questo articolo.

Per modificare le schede affinché supportino il Rich Text:

1. Mappa la proprietà details all'HTML Rich Text: nel file card component.js, imposta la proprietà details per accettare il campo Rich Text. Il modo in cui converti il Rich Text all'HTML dipenderà dal tipo di campo del campo Rich Text che si sta utilizzando:
   • Se stai utilizzando un campo di tipo Markdown o Rich Text (v2), utilizza il sottocampo HTML del campo che desideri visualizzare (sostituisci c_testRTDescription con il nome API del tuo campo):

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

   • Se stai utilizzando un campo di tipo Legacy Rich Text (v1), utilizza l'editor di testo RTF (sostituisci answer con il nome API del tuo campo). Vedi il documento di riferimento Editor comuni per ulteriori informazioni sull'editor di testo RTF.

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

2. Gestisci il troncamento del Rich Text: il modo in cui gestisci la funzionalità mostra di più e troncamento dipenderà dal tipo di campo che stai utilizzando e dalla versione del Tema su cui si stai creando:
   • • Se utilizzi un campo di tipo Markdown o Rich Text (v2), il troncamento del Rich Text non è integrato nel Tema. Se il campo di Rich Text ha un contenuto più lungo di quanto desideri inserire in una scheda, ti suggeriamo di utilizzare gli snippet predefiniti incorporati nella scheda standard del documento (invece di ripetere il punto 1). Ecco come si presenta:

       • 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, // Il testo nel corpo della scheda

1. • Se stai utilizzando un campo di tipo Legacy Rich Text (v1) e ti trovi sul Tema 1.28 o inferiore, disabilita la funzionalità mostra di più/mostra di meno. Il rischio è che con il troncamento, potresti rimuovere un tag di chiusura (es. </div>, </p>) che potrebbe interrompere la visualizzazione della pagina. Commenta o elimina l'oggetto showMoreDetails nel file component.js per la tua scheda.

     • // showMoreDetails: { 
       // showMoreLimit: 750, // Limite del conteggio dei caratteri 
       // showMoreText: 'Mostra di più', // Etichetta quando il toggle mostrerà il testo troncato 
       // showLessText: 'Mostra meno' // Etichetta quando il toggle nasconderà il testo troncato 
       // }, 

   • Se utilizzi un campo di tipo Legacy Rich Text (v1) e sei sul tema 1.29 o superiore, è possibile utilizzare il troncamento RTF. Utilizza showMoreDetails con truncatedDetails. Se è presente sulla tua scheda, potrebbe essere necessario annotarlo. Altrimenti, modifica il file component.js della tua scheda in modo che assomigli a questo (sostituisci answer con il nome API del tuo campo):

     • return {
         title: profile.name, // L'intestazione della scheda
         ...
         details: profile.answer ? ANSWERS.formatRichText(profile.answer, 'answer',
       linkTarget) : null, // Il testo nel corpo della scheda
         // Se i dettagli della scheda superano un certo limite di caratteri, puoi troncare il
         // testo. Sarà presente un pulsante per mostrare o nascondere il testo troncato.
         // Nota: se utilizzi il RIch Text per i dettagli, non devi attivare questa funzione.
           showMoreDetails: {
             truncatedDetails: profile.answer ? ANSWERS.formatRichText(profile.answer,
       'answer', linkTarget, 38) : null, // Limite del conteggio dei caratteri
             showMoreText: 'Mostra di più', // Etichetta quando il pulsante mostrerà il testo troncato
             showLessText: 'Mostra meno' // Etichetta quando il toggle nasconderà il testo troncato
         },
         ...
       }

       • Il valore per truncatedDetails è simile a details, ma passa un parametro aggiuntivo a ANSWERS.formatRichText: il numero di caratteri a cui il contenuto di Rich Text verrà troncato, in questo caso 38. Questo conteggio dei caratteri ignorerà tutti i caratteri non di testo, come i tag HTML e la formattazione. Qualsiasi valore di stringa può essere passato a truncatedDetails. Ad esempio, se ha i dettagli della carta seguenti, i 3 hashtag all'inizio e al centro verranno ignorati, così come i simboli di ritorno a capo:
       • Per impostazione predefinita, viene aggiunta un'ellissi alla fine del testo troncato che può essere personalizzato aggiungendo un ulteriore parametro a ANSWERS.formatRichText per specificare il suffisso. Per rimuovere completamente i puntini di sospensione, puoi specificare una stringa vuota al loro posto:

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

3. Aggiorna il template Handlebars per consentire la visualizzazione del codice HTML sulle pagine. Aggiungi {{{ }}} alla sezione dettagli del tuo template Handlebars. Ciò garantisce che l'HTML venga visualizzato sulla pagina, anziché essere visualizzato così com'è o eseguire l'escape dell'HTML.
   • Questa operazione viene eseguita per impostazione predefinita nella scheda faq-accordion integrata. Se esegui il fork di una scheda, assicurati che i campi che utilizzano il Rich Text siano racchiusi da triple parentesi graffe nel file template.hbs della scheda.

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

4. Aggiungi uno stile (facoltativo).
   • Potrebbe esserci qualche ulteriore stile che desidera aggiungere. Ad esempio, la spaziatura tra i paragrafi e lo stile dei link. Di seguito è riportato lo stile consigliato:

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