内容丰富的文档 HtmlToString 格式链接

Question

我正在使用 contentful 来满足我们的 CMS 需求，并使用 contentful SDK 来满足 JavaScript。我正在尝试使用他们的 documentToHtmlString 方法将一些属性添加到我的锚点 links。我试过这样做：

return documentToHtmlString(text, {
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, next) => {
      let content: any[] = [];

      node.content.forEach((item) => {
        if (item.nodeType === 'hyperlink') {
          let itemContent = item.content[0];
          let value = itemContent['value'];

          let uri = item.data.uri;
          console.log(value, uri);

          content.push(
            `<p><a href="${uri}" data-category="contact" data-action="email">${value}</a></p>`
          );
        } else {
          content.push(`<p>${next([item])}</p>`);
        }
      });

      console.log(content.join(''));

      return content.join('');
    },
  },
});

但是当我检查结果时，它没有我的 data-category 或 data-action。有没有更好的方法将属性添加到 link?

他们的文档显示： https://www.contentful.com/developers/docs/javascript/tutorials/rendering-contentful-rich-text-with-javascript/

但是没有提到锚:(

剧情变厚了…… 我想也许它不喜欢数据属性，所以我又添加了一些：

content.push(
  `<p><a class="test" href="${uri}" category="contact" data-category="contact" data-action="email" target="_blank">${value}</a></p>`
);

实际渲染的是这样的：

<a class="test" href="mailto:bob@example.com" target="_blank">bob@example.com</a>

注意它是如何添加 class 和 target，但省略了 category ，数据类别和数据操作.....

感谢@stefan-judis 告诉我内联。我现在已经将我的代码更新为：

[INLINES.HYPERLINK]: (node, next) => {
  console.log(node);

  let value = node.content[0]['value'];
  let uri = node.data.uri;

  return `<a class="test" href="${uri}" data="test" category="contact" data-category="contact" data-action="email" target="_blank">${value}</a>`;
},

并且我删除了 BLOCKS 代码，但不幸的是，我仍然遇到同样的问题。它不渲染所有属性（仅 class 和 target）。事实上，它呈现的效果与上面完全相同。好像有一些内部格式删除了属性...

Answer 1

我创建了 a quick example achieving your desired outcome。

client.getEntry("...").then(({ fields }) => {
  const richText = fields.richText;

  const renderOptions = {
    renderNode: {
      // this is the important part 
      [INLINES.HYPERLINK]: (node, next) => {
        console.log(node);
        return `<a href="${
          node.data.uri
        }" style="background: red; color: white;" data-foo>${next(
          node.content
        )}</a>`;
      },
      [BLOCKS.EMBEDDED_ASSET]: (node, next) => {
        // ...
      }
    }
  };
  document.getElementById("app").innerHTML = documentToHtmlString(
    richText,
    renderOptions
  );
});

我不确定您的环境中发生了什么，但正如您在 CodeSandbox 上看到的那样，代码呈现数据属性和所有内容。 :)

Answer 2

@Stefan 的回答是正确的； Angular 弄乱了我的内容。我不得不使用 angulars DomSanitizer 来解决这样的问题：

public htmlToString(text: any): SafeHtml {
  const renderOptions = {
    renderNode: {
      [INLINES.HYPERLINK]: (node, next) => {
        return `<a href="${node.data.uri}" style="background: red; color: white;" data-foo>${next(node.content)}</a>`;
      },
    },
  };

  const content = documentToHtmlString(text, renderOptions);

  return this.sanitizer.bypassSecurityTrustHtml(content);
}

这让我可以像这样将它添加到我的 html 中：

<div class="content" [innerHtml]="section.content"></div>

一切都按预期进行

内容丰富的文档 HtmlToString 格式链接

contentful documentHtmlToString format links

javascript

contentful