1. block 样式

1.1 blockRenderMap

1.1.1 作用：指定block的节点类型及其wrapper节点。

// 创建
const { DefaultDraftBlockRenderMap } = Draft;
import Immutable from 'immutable';

const blockRenderMap = DefaultDraftBlockRenderMap.merge(
	Immutable.Map({	
		// { [blockName: string]: { element: string; wrapper?: React.Node }}
		'atomic': {
			// block 的节点；如<span data-block="true" data-editor="a3m8r" data-offset-key="7j0tu-0-0"  contenteditable="false">
			element: 'span',
			// element所对应的父节点
			// Wrapper: React.FC<{ data-offset-key: string; children: React.Children }>
          	wrapper?: <Wrapper />,
		}
	})
);

// 使用
const { Editor } = Draft;

function MyComponent() {
	return <Editor blockRenderMap={blockRenderMap} ... />;
}

1.1.2 DefaultDraftBlockRenderMap

var DefaultDraftBlockRenderMap = Immutable.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'
  },
  ...
)}

1.2 blockStyleFn

1.2.1 作用：设置block的节点的类名，从而影响block的样式。

// 创建
function blockStyleFn(contentBlock: ContentBlock): string|null {
	// 设置 atomic 类型的block的 element 节点类名为 myCssClassName
	if (contentBlock.getType() === 'atomic') {
		return 'myCssClassName';
	}
}
// 使用
const { Editor } = Draft;

function MyComponent() {
	return <Editor blockStyleFn={blockStyleFn} ... />;
}

2. inline 样式

2.1 customStyleMap

2.1.1 作用：指定行内元素的样式

// 定义
const customStyleMap = {
	// 已预定义了的样式
	...DefaultDraftInlineStyle,
	CODE: {
    	backgroundColor: 'rgba(0, 0, 0, 0.05)',
  	},
  	customStyle1: React.CSSProperties;
}

const { Editor } = Draft;

// 使用
function MyComponent() {
	return <Editor customStyleMap={customStyleMap} ... />;
}

2.1.2 添加或移除online的样式

/************ 添加 start *************/
// 增加样式
const newContentState = Modifier.applyInlineStyle(editorState.getCurrentContent(), selection, styleName: string);
// 更新state
this.setState({
	editorState: EditorState.push(editorState, newContentState, 'change-inline-style')
});
/************ 添加 end *************/

/************ 移除 start *************/
const newContentState = Modifier.removeInlineStyle(editorState.getCurrentContent(), selection, styleName: string);
this.setState({
	editorState: EditorState.push(editorState, newContentState, 'change-inline-style')
});
/************ 移除 end *************/

/************ 移除 或 增加 start *************/
const { RichUtils } = Draft;

const newEditorState = RichUtils.toggleInlineStyle(editorState, styleName: string);
this.setState({ editorState: newEditorState });
/************ 移除 或 增加 end *************/

2.1.3 DefaultDraftInlineStyle 已预定义了的行内样式

const DefaultDraftInlineStyle = {
  BOLD: {
    fontWeight: 'bold',
  },
  CODE: {
    fontFamily: 'monospace',
    wordWrap: 'break-word',
  },
  ITALIC: {
    fontStyle: 'italic',
  },
  STRIKETHROUGH: {
    textDecoration: 'line-through',
  },
  UNDERLINE: {
    textDecoration: 'underline',
  },
};

2.2 customStyleFn

2.2.1 作用：动态设置行内元素的样式

function customStyleFn((style: DraftInlineStyle, block: BlockNodeRecord): Object | undefined | null {
	if (style.has('CODE')) {
		// 会和已有的样式混合，优先级最高
		return {
			backgroundColor: 'blue',
		}
	}
}