Block Styling(块级样式)

在Editor中, 一些block样式会被赋予默认的样式，这是为了减少开发者做的必要的基础配置。

通过在Editor组件上声明一个blockStyleFn props函数，可以在渲染的时候为块类型元素加上指定的类名。

DraftStyleDefault.css

在DraftStyleDefault.css中,Draft库包含了默认的块类型元素的CSS样式。(请注意，CSS类名上的注释是Facebook内部CSS模块管理系统的产物。)

这些CSS规则主要用于为列表项提供默认样式，没有这些样式，开发者将负责管理自己的默认列表样式。

blockStyleFn

在Editor组件上的blockStyleFn的props函数，允许你在渲染的时候去定义块类型元素的样式的CSS类名。

例如，您可能希望将“blockquote”类型的块类型元素样式设置为花里胡哨的斜体文本。

function myBlockStyleFn(contentBlock) {
  const type = contentBlock.getType();
  if (type === 'blockquote') {
    return 'superFancyBlockquote';
  }
}
// Then...
import {Editor} from 'draft-js';
class EditorWithFancyBlockquotes extends React.Component {
  render() {
    return <Editor ... blockStyleFn={myBlockStyleFn} />;
  }
}

然后在你自己的CSS文件中这样定义:

.superFancyBlockquote {
  color: #999;
  font-family: 'Hoefler Text', Georgia, serif;
  font-style: italic;
  text-align: center;
}