5
votes

Contentful: documentToHtmlString n'inclut pas l'image incorporée dans le texte enrichi

J'ai le document texte riche suivant

<p>test</p><p></p>

Lorsque j'utilise documentToHtmlString (à partir d'ici https://www.npmjs.com/package/@contentful/rich-text-html-renderer )

documentToHtmlString(document);

javascript contentful

0 commentaires

3 Réponses :

4
votes

De https://github.com/contentful/rich- text / issues / 58 # issuecomment-452236848

Vous devez spécifier comment rendre cela Vous pouvez en savoir plus ici https : //github.com/contentful/rich-text/tree/master/packages/rich-text-html-renderer#usage

const options = {
    renderNode: {
        [BLOCKS.EMBEDDED_ASSET]: ({ data: { target: { fields }}}) =>
            `<img src="${fields.file.url}" height="${fields.file.details.image.height}" width="${fields.file.details.image.width}" alt="${fields.description}"/>`,
    },
};

Ma résolution spécifique était:

const options = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node) => `<custom-component>${customComponentRenderer(node)}</custom-component>`
  }
}

documentToHtmlString(document, options);

0 commentaires

0
votes

const options = {
    renderNode: {
        [BLOCKS.EMBEDDED_ASSET]: ({ data: { target: { fields }}}) =>
        <div dangerouslySetInnerHTML={{__html: `<img src="${fields.file['en-GB'].url}" alt="${fields.title['en-GB']}"/>`}} />,
    },
};
I found i needed to set dangerouslySetInnerHTML for it to render properly in the browser.

2 commentaires

Je pense que c'est parce que vous enveloppez l'image avec un div, et je ne suis toujours pas nécessairement sûr que vous en ayez besoin.

il rendait le chemin de l'url sous forme de chaîne et non de HTML, pas sûr qu'il existe un autre moyen de rendre sans le div, pour référence - reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

1
votes

Voici la réponse originale et les valeurs dynamiques codées en dur, J'espère que cela pourra aider le lecteur à avoir une réponse immédiate au problème spécifique:

let options = {
  renderNode: {
    'embedded-asset-block': (node) =>
      `<img class="img-fluid" src="${node.data.target.fields.file.url}"/>`
  }
}
let bodyHTML = body ? documentToHtmlString(body, options) : ''

2 commentaires

Pourquoi est-ce «la meilleure façon»? Vous avez pris la réponse originale et les valeurs dynamiques codées en dur.

@SethMcClaine Votre réponse est excellente pour une bonne étude.