Para añadir texto enriquecido a una tarjeta, será necesario actualizar la tarjeta pertinente de varias formas. Asegúrese de haber bifurcado una tarjeta que pueda editar en el nivel superior y de no estar editando una tarjeta en el tema en sí.

1. Asigne la propiedad details a HTML de texto enriquecido: utilice el formateador de texto enriquecido o un campo Markdown o de texto enriquecido (v2).
2. Gestione del truncamiento de texto enriquecido: si está utilizando el formateador de texto enriquecido, puede desactivar el truncamiento o actualizar la tarjeta para manejar el truncamiento RTF, dependiendo del tema en el que se encuentre. Tenga en cuenta que si utiliza un campo Markdown o Texto enriquecido (v2), el truncamiento no está incorporado en el Tema.
3. Actualice la plantilla de Handlebars para permitir que el HTML se muestre en las páginas.
4. Agregue estilo opcional al texto enriquecido.

El texto enriquecido se utiliza más habitualmente en la sección de details de las tarjetas, pero puede utilizarlo con cualquier campo que haya almacenado como Campo de Texto Enriquecido en el Knowledge Graph. Asegúrese de actualizar ese campo en lugar de details, al que se hace referencia en el resto de este artículo.

Para cambiar las tarjetas para admitir texto enriquecido:

1. Asigne la propiedad details a HTML de texto enriquecido: en el archivo card component.js, defina la propiedad details para que acepte el campo de texto enriquecido. La manera de convertir texto enriquecido a HTML dependerá del tipo de campo del campo de texto enriquecido que usted esté utilizando:
   • Si está utilizando un campo de tipo Markdown o Texto Enriquecido (v2), use el subcampo HTML del campo que desea mostrar (reemplace c_testRTDescription con el nombre de API de su campo):

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

   • Si está utilizando un campo de tipo Legacy Rich Text (v1), use el formateador de texto enriquecido (reemplace answer con el nombre API de su campo). Consulte el documento de referencia de Formateadores Comunes para obtener más información sobre el formateador de texto enriquecido.

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

2. Gestione el truncamiento de texto enriquecido: cómo gestione la función de mostrar más y truncar dependerá del tipo de campo que utilice y de la versión del tema en el que esté trabajando:
   • • Si utiliza un campo de tipo Markdown o Texto enriquecido (v2), el truncamiento de texto enriquecido no está integrado en el Tema. Si su campo de texto enriquecido tiene un contenido más largo del que desearía que cupiera en una tarjeta, le sugerimos que utilice los fragmentos predeterminados integrados en la tarjeta estándar del documento (en lugar de lo que hizo en el paso 1). Se ve así:

       • 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. • Si está utilizando un campo de tipo Texto enriquecido heredado (v1) y está en el Tema 1.28 o inferior, desactive la funcionalidad de mostrar más/mostrar menos. El riesgo es que, con el truncamiento, usted corte una etiqueta de cierre (por ejemplo, </div>, </p>), lo que podría romper la página. Comente o elimine el objeto showMoreDetails en el archivo component.js de su tarjeta.

     • // 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 
       // }, 

   • Si está utilizando un campo de tipo Texto enriquecido heredado (v1) y está en el Tema 1.29 o superior, puede utilizar la truncación RTF. Utilice showMoreDetails con truncatedDetails. Si esto existe en su tarjeta, puede que tenga que comentarlo. De lo contrario, edite el archivo component.js de su tarjeta para que tenga un aspecto parecido (sustituya answer por el nombre API de su campo):

     • return {
         title: profile.name, // The header text of the card
         ...
         details: profile.answer ? ANSWERS.formatRichText(profile.answer, 'answer',
       linkTarget) : null, // The text in the body of the card
         // If the card's details are longer than a certain character count, you can truncate the
         // text. A toggle will be supplied that can show or hide the truncated text.
         // Note: If you are using rich text for the details, you should not enable this feature.
           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
         },
         ...
       }

       • El valor de truncatedDetails es similar al de details, pero pasa un parámetro adicional a ANSWERS.formatRichText: el número de caracteres en el que se truncará el contenido del texto enriquecido, en este caso 38. Este recuento de caracteres ignorará todos los caracteres que no sean de texto, como las tags HTML y el formato. Cualquier valor de cadena se puede pasar a truncatedDetails. Por ejemplo, si tiene los siguientes detalles de la tarjeta, se ignorarán los 3 hashtags del principio y del medio, así como los símbolos de nueva línea:
       • Por defecto, se añade una elipsis al final del texto truncado. Esto se puede personalizar añadiendo un parámetro adicional a ANSWERS.formatRichText para especificar el sufijo. Para eliminar completamente la elipsis, puede especificar una cadena en blanco en su lugar:

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

3. Actualice la plantilla de Handlebars para permitir que el HTML se muestre en las pages. Añada {{{ }}} a la sección details de su plantilla Handlebars. Esto asegura que el HTML se renderice en la página, en lugar de imprimirse tal cual o escaparse del HTML.
   • Esto se realiza por defecto en la tarjeta integrada de preguntas frecuentes (FAQ). Si está bifurcando una tarjeta, asegúrese de que los campos que utilizan texto enriquecido están rodeados por llaves triples en el archivo template.hbs de la tarjeta.

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

4. (Opcional) Añada estilo.
   • Quizás quiera agregar algún estilo adicional. Por ejemplo, el espaciado entre párrafos y el estilo de los enlaces. El estilo recomendado es el siguiente:

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