内容丰富的documentHtmlToString格式链接

问题描述

我正在使用满足我们CMS需求的内容，并使用内容丰富的JavaScript SDK。我正在尝试使用他们的 documentToHtmlString 方法向我的锚链接添加一些属性。我已经尝试过这样做：

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('');
    },},});

但是当我检查结果时，它没有我的数据类别或数据操作。有没有更好的方法可以向链接添加属性？

他们的文档显示了这一点： 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:[email protected]" target="_blank">[email protected]</a>

注意如何添加类别和目标，但省略了类别，数据类别和数据操作 .....

感谢@ 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 ）。实际上，它呈现的效果与上面完全相同。就像有一些内部格式会删除属性...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

contentful javascript