Draft 文档翻译 - 高级主题 - 常用的Block渲染-原创手记-慕课网

常用的Block渲染

本文讨论如何自定义Draft默认块渲染。块渲染用于定义支持的块类型及其各自的渲染器，以及将粘贴的内容转换为已知的草稿块类型。

当粘贴内容或使用convertFromHTML草稿时，将粘贴的内容转换为相应的块渲染类型，方法是将“草稿”块渲染图与匹配的标签进行匹配。

配置块渲染图

HTML element  Draft block type
<h1/>         header-one
<h2/>         eader-two
<h3/>         header-three
<h4/>         header-four
<h5/>         header-five
<h6/>         header-six
<blockquote/> blockquote
<pre/>        code-block
<figure/>     atomic
<li/>         unordered-list-item,ordered-list-item**
<div/>        unstyled*

Configuring block render map

通过将不可变图传递给编辑器blockRender道具，可以覆盖Draft默认块渲染地图。

覆盖默认块渲染图的示例：

const blockRenderMap = Immutable.Map({
  'header-two': {
    element: 'h2'
  },
  'unstyled': {
    element: 'h2'
  }
});

class RichEditor extends React.Component {
  render() {
    return (
      <Editor
        ...
        blockRenderMap={blockRenderMap}
      />
    );
  }
}

有些情况下，而不是覆盖默认值，我们只是想添加新的块类型; 这可以通过使用DefaultDraftBlockRenderMap引用来创建一个新的blockRenderMap来完成

const blockRenderMap = Immutable.Map({
  'section': {
    element: 'section'
  }
});

const extendedBlockRenderMap = Draft.DefaultDraftBlockRenderMap.merge(blockRenderMap);

class RichEditor extends React.Component {
  render() {
    return (
      <Editor
        ...
        blockRenderMap={extendedBlockRenderMap}
      />
    );
  }
}

当Draft解析粘贴HTML时，它将HTML元素映射回草稿块类型。如果要指定映射到特定块类型的其他HTML元素，则可以将数组aliasedElements添加到块配置。

未锁定块类型别名的使用示例：

'unstyled': {
  element: 'div',
  aliasedElements: ['p'],
}

Custom block wrappers

默认情况下，html元素用于包装块类型，但也可以将一个 React 组件提供给blockRenderMap以包装EditorBlock。

在粘贴或使用convertFromHTML时，将扫描html以匹配标签元素。当blockRenderMap上有一个定义来包装该特定块类型时，将使用一个包装器。例如：

Draft使用包装器将<li />包裹在<ol />或<ul />中，但是包装也可以用于包装任何其他自定义块类型.

扩展默认块渲染图以使用自定义块的反应组件的示例：

class MyCustomBlock extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className='MyCustomBlock'>
        {/* here, this.props.children contains a <section> container, as that was the matching element */}
        {this.props.children}
      </div>
    );
  }
}

const blockRenderMap = Immutable.Map({
  'MyCustomBlock': {
    // element is used during paste or html conversion to auto match your component;
    // it is also retained as part of this.props.children and not stripped out
    element: 'section',
    wrapper: <MyCustomBlock {...this.props} />
  }
});

// keep support for other draft default block types and add our myCustomBlock type
const extendedBlockRenderMap = Draft.DefaultDraftBlockRenderMap.merge(blockRenderMap);

class RichEditor extends React.Component {
  ...
  render() {
    return (
      <Editor
        ...
        blockRenderMap={extendedBlockRenderMap}
      />
    );
  }
}