为了账号安全,请及时绑定邮箱和手机立即绑定

Draft 文档翻译 - 高级主题 - 常用的Block渲染

标签:
React.JS
常用的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}
      />
    );
  }
}
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
90
获赞与收藏
327

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消