富文本- html- 转发器

内容丰富的文本字段类型的 HTML 渲染器.

安装

使用 无数字 :

npm install @contentful/rich-text-html-renderer

使用 线条数字 :

yarn add @contentful/rich-text-html-renderer

使用量

import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello world!',
          marks: [],
        },
      ],
    },
  ],
};

documentToHtmlString(document); // -> <p>Hello world!</p>

import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
        },
      ],
    },
  ],
};

documentToHtmlString(document); // -> <p><b>Hello</b><u> world!</u></p>

也可以通过标记和节点的自定义渲染器作为这样的可选参数:

import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'paragraph',
      data:{},
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
          data: {}
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }]
          data: {}
        },
      ],
    },
  ]
};

const options = {
  renderMark: {
    [MARKS.BOLD]: text => `<custom-bold>${text}<custom-bold>`
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, next) => `<custom-paragraph>${next(node.content)}</custom-paragraph>`
  }
}

documentToHtmlString(document, options);
// -> <custom-paragraph><custom-bold>Hello</custom-bold><u> world!</u></custom-paragraph>

最后,但并非最不重要的是,您可以通过嵌入式条目的自定义渲染组件:

import { BLOCKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'embedded-entry-block',
      data: {
        target: (...)Link<'Entry'>(...);
      },
    },
  ]
};

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

documentToHtmlString(document, options);
// -> <custom-component>(...)Link<'Entry'>(...)</custom-component>

这个 renderNode 键应为以下之一 BLOCKS 财务报告和审定财务报表 INLINES 定义属性 @contentful/rich-text-types数字 :

• BLOCKS

  • DOCUMENT
  • PARAGRAPH
  • HEADING_1
  • HEADING_2
  • HEADING_3
  • HEADING_4
  • HEADING_5
  • HEADING_6
  • UL_LIST
  • OL_LIST
  • LIST_ITEM
  • QUOTE
  • HR
  • EMBEDDED_ENTRY
  • EMBEDDED_ASSET
  • EMBEDDED_RESOURCE

• INLINES

  • EMBEDDED_ENTRY (这与 BLOCKS.EMBEDDED_ENTRY(中文(简体) )
  • EMBEDDED_RESOURCE
  • HYPERLINK
  • ENTRY_HYPERLINK
  • ASSET_HYPERLINK
  • RESOURCE_HYPERLINK

这个 renderMark 键应为以下之一 MARKS 定义属性 @contentful/rich-text-types数字 :

• BOLD
• ITALIC
• UNDERLINE
• CODE
• SUPERSCRIPT
• SUBSCRIPT
• STRIKETHROUGH

保留空白

在您的 HTML 渲染选项中, 您可以使用 preserveWhitespace 布尔旗。 设定为 true,此标记可确保所渲染的 HTML 中保存内容丰富的内容中的空格和换行符。 具体来说,它用   并使用 <br /> 标签。 这种能力特别有利于包含空间和换行的具体格式要求的内容.

import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello     world!',
          marks: [],
        },
      ],
    },
  ],
};

const options = {
  preserveWhitespace: true,
};

documentToHtmlString(document, options);
// -> <p>Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world!</p>

有了这个配置,HTML输出保留了"Hello"和"world!"之间发现的空格.