Editor 中,一些 block 类型已经给了默认的 css 样式,来提供自定义编辑器基础启动和运行。
通过为 Editor 定义一个 blockStyleFn prop (这是一个函数),可以指定在渲染时应用到这个 block 的 css class。

DraftStyleDefault.css

Draft.js 将默认的 block 样式包含在了 DraftStyleDefault.css 里。(注意,CSS类名的注释是 Facebook内部 CSS 管理模块生成的。)

这些 CSS 规则主要用于提供默认的样式,没有哪个调用方会管理默认的样式。

blockStyleFn

Editor 上的 blockStyleFn prop 允许你在渲染时使用自定 CSS 样式。例如,你可能会希望类型为「blockquote」的 block 带上斜体文本。

  1. function myBlockStyleFn(contentBlock) {
  2. const type = contentBlock.getType();
  3. if (type === 'blockquote') {
  4. return 'superFancyBlockquote';
  5. }
  6. }
  7. // Then...
  8. import {Editor} from 'draft-js';
  9. class EditorWithFancyBlockquotes extends React.Component {
  10. render() {
  11. return <Editor ... blockStyleFn={myBlockStyleFn} />;
  12. }
  13. }

之后在你的 CSS 中这样写:

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