draft-js常用操作

1. 操作自定义block

1.1 添加

const { AtomicBlockUtils } = Draft;

function add() {
	const { editorState } = this.state;
	const contentState = editorState.getCurrentContent();
	// 创建entity，并返回新的contentState
    const contentStateWithEntity = contentState.createEntity(type, 'MUTABLE' | 'IMMUTABLE', data: Object);
    // 获取刚创建的entity
	const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
	// 创建新的editorState
	const newEditorState = AtomicBlockUtils.insertAtomicBlock(editorState: EditState, entityKey, blockChars: string);

	this.setState({ editorState: newEditorState });
}

1.2 修改

function modify() {
	const { editorState } = this.state;
	const contentState = editorState.getCurrentContent();
	// 创建新entity，并返回新的contentState
    const contentStateWithEntity = contentState.createEntity(type, 'MUTABLE' | 'IMMUTABLE', newData: Object);
    // 获取刚创建的entity
	const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
	// 创建新的contentState
	const newContentState = Modifier.applyEntity(contentStateWithEntity, selection, entityKey);
	// 创建新的editorState
	const newEditorState = EditorState.push(editorState, newContentState, 'apply-entity');

	this.setState({ editorState: newEditorState });
}

2. 移动光标

2.1 移动到指定位置（好像对自定义block的光标移动无效）

const { editorState } = this.state;
// 获取当前光标位置
const oldSelectionState = editorState.getSelection();
// 重新指定光标位置
const newSelectionState = oldSelectionState.merge({ anchorOffset: 0, focusOffset: 2})) });
// 更新editorState
this.setState({ editorState: EditorState.forceSelection(editorState, newSelectionState) });

2.2 移动到文章末尾

const { editorState } = this.state;
/******* 方式一 start ********/
// 移动光标位置
const newSelectionState = EditorState.moveSelectionToEnd(editorState).getSelection();
// 更新editorState
this.setState({ editorState: EditorState.forceSelection(editorState, newSelectionState) });
/******* 方式一 end ********/

/******* 方式二 start ********/
this.setState({ editorState: EditorState.moveSelectionToEnd(editorState) });
/******* 方式二 end ********/

3. 插入文本

const { editorState } = this.state;
// 更新contentState
const newContentState = Modifier.insertText(
	// oldContentState: ContentState
	editorState.getCurrentContent(),
	// SelectionState；注意⚠️：插入文本要求selectionState必须闭合
	editorState.getSelection(),
	// insertText: string
	'this is insert text',
	// inlineStyle: DraftInlineStyle | null
	OrderedSet.of('BOLD', 'ITALIC')),
	// entityKey?: string;
);
// 更新eidtorState
this.setState({ editorState: EditorState.push(editorState, newContentState, 'insert-characters') })

3.1 创建行内样式

OrderedSet.of('BOLD')
// 或
OrderedSet.of('BOLD', 'ITALIC')),

4. entity

4.1 修改entity数据

const newEditorState = EditorState.push(
	editorState,
	editorState.getCurrentContent().mergeEntityData(entityKey, data)
	, 'change-block-data');