Draft js在返回键上添加新块

问题描述 投票:0回答:1

我一直在尝试在回车键上添加一个新块。这是我的代码,将其放在检查keyCode的开关盒中。 shift + return通过添加新行来工作。但是只是返回,它需要在编辑器中启动一个新块。

                // SHIFT + RETURN <br/>
                if(e.shiftKey) {
                    const newEditorState = RichUtils.insertSoftNewline(this.state.editorState);
                    if (newEditorState !== this.state.editorState) {
                        this.onChange(newEditorState);
                    }
                } else {
                    const newBlock = new ContentBlock({
                        key: genKey(),
                        type: "unstyled",
                        text: ""
                    });

                    const contentState = this.state.editorState.getCurrentContent();
                    const newBlockMap = contentState.getBlockMap().set(newBlock.getKey(), newBlock);

                    EditorState.push(
                        this.state.editorState,
                        ContentState
                            .createFromBlockArray(newBlockMap.toArray(), contentState.getBlockMap())
                            .set("selectionAfter", contentState.getSelectionAfter().merge({
                                anchorKey: newBlock.getKey(),
                                anchorOffset: 0,
                                focusKey: newBlock.getKey(),
                                focusOffset: 0,
                                isBackward: false
                            })),
                        "split-block"
                    );
                }

控制台中没有错误。当按下回车键时,它什么都不做。

我希望有人可以提供帮助。

javascript reactjs draftjs
1个回答
0
投票

我设法使它与之配合使用:

                // SHIFT + RETURN <br/>
                if(e.shiftKey) {
                    const newEditorState = RichUtils.insertSoftNewline(this.state.editorState);
                    if (newEditorState !== this.state.editorState) {
                        this.onChange(newEditorState);
                    }
                } else {
                    const editorState = this.state.editorState;
                    const currentContent = editorState.getCurrentContent();
                    const selection = editorState.getSelection();
                    const textWithEntity = Modifier.splitBlock(currentContent, selection);

                    this.setState({
                        editorState: EditorState.push(editorState, textWithEntity, "split-block")
                    });
                }

希望对下一个人有帮助!

© www.soinside.com 2019 - 2024. All rights reserved.