Draft-js块级样式总结

1.默认块级样式

draft-js源码中默认块级样式定义如下：

var DefaultDraftBlockRenderMap = Map({
  'header-one': {
    element: 'h1'
  },
  'header-two': {
    element: 'h2'
  },
  'header-three': {
    element: 'h3'
  },
  'header-four': {
    element: 'h4'
  },
  'header-five': {
    element: 'h5'
  },
  'header-six': {
    element: 'h6'
  },
  'unordered-list-item': {
    element: 'li',
    wrapper: UL_WRAP
  },
  'ordered-list-item': {
    element: 'li',
    wrapper: OL_WRAP
  },
  'blockquote': {
    element: 'blockquote'
  },
  'atomic': {
    element: 'figure'
  },
  'code-block': {
    element: 'pre',
    wrapper: PRE_WRAP
  },
  'unstyled': {
    element: 'div',
    aliasedElements: ['p']
  }
});

一共有12个默认块级样式，其中:

• header-one到header-six,分别表示标题h1到h6
• unordered-list-item和ordered-list-item分别表示无序列表ul 和有序列表ol
• blockquote代表HTML5 blockquote(块引用)
• atomic 规定独立的流内容（图像、图表、照片、代码等等）
• code-block 代表代码块,HTML5中的pre标签
• unstyled 无样式块(div)

2.自定义块级样式