draftjs-utils没有insertBlockAfter
时间: 2023-06-30 16:23:00 浏览: 148
draftjs-utils:适用于DraftJS的实用工具功能的集合
是的,`draftjs-utils`库中确实没有名为`insertBlockAfter`的函数。但是,你可以使用Draft.js原生的`ContentState`和`EditorState` API来实现在一个块级元素后插入一个新的块级元素的功能。
以下是一个示例代码,演示如何在指定块级元素后插入一个新的块级元素:
```javascript
import { EditorState, ContentState, Modifier } from 'draft-js';
const editorState = this.state.editorState;
const contentState = editorState.getCurrentContent();
const selectionState = editorState.getSelection();
const currentBlockKey = selectionState.getStartKey();
const currentBlock = contentState.getBlockForKey(currentBlockKey);
const newBlock = new ContentBlock({
key: genKey(),
type: 'unstyled',
text: '',
characterList: new List(),
depth: 0,
data: {}
});
const newContentState = Modifier.insertText(
contentState,
selectionState,
'\n'
);
const newEditorState = EditorState.push(
editorState,
newContentState,
'insert-characters'
);
const newContentStateWithBlock = Modifier.insertBlockAfter(
newEditorState.getCurrentContent(),
currentBlockKey,
newBlock
);
const newEditorStateWithBlock = EditorState.push(
newEditorState,
newContentStateWithBlock,
'insert-fragment'
);
this.setState({
editorState: newEditorStateWithBlock
});
```
以上代码中,我们首先获取当前选中的块级元素,然后创建一个新的块级元素并将其插入到当前块级元素之后。具体来说,我们使用`Modifier.insertText`函数在当前块级元素后插入一个换行符,然后使用`Modifier.insertBlockAfter`函数将新的块级元素插入到当前块级元素后面。最后,我们使用`EditorState.push`函数将更新后的`ContentState`对象应用于`EditorState`对象,并将其设置为新的编辑器状态。
需要注意的是,`insertBlockAfter`函数会返回一个新的`ContentState`对象,因此需要将其传递给`EditorState.push`函数来更新编辑器状态。
阅读全文