在DraftJS中将实体添加到其自己的块中

Question

因此，我正在尝试为我的项目创建一个相当简单的WYSIWYG BBCode编辑器，以此作为围绕DraftJS的机会。我一直在关注一些教程，并使用react-rte作为示例（因为它具有我需要的99％的功能，看起来相对简单易懂）。

我难以理解的问题是react-rte内嵌图像实体（它在当前选择中添加一个空格，然后将一个条目绑定到该空间），如下所示：

const addEntity = (editorState, type, mutability = 'MUTABLE', data = {}) => {
    let currentContent = editorState.getCurrentContent();
    let selection = editorState.getSelection();
    currentContent = currentContent.createEntity(type, mutability, data);
    let entityKey = currentContent.getLastCreatedEntityKey();
    return Modifier.insertText(currentContent, selection, ' ', null, entityKey);
}

我希望每个图像（和视频一样）都在它自己独立的块中，并使其成为其他任何东西都不能写入该块。我找到了一个我在megadraft中所遵循的行为的例子，但是我无法通过其代码来找到正确的实现。

Answer 1

经过数小时的试验和错误（以及大量手册）后找到解决方案。

const addAtomic = (editorState, type, mutability = 'MUTABLE', data = {}) => {
    let currentContent = editorState.getCurrentContent();
    let selection = editorState.getSelection();
    currentContent = currentContent.createEntity(type, mutability, data);
    let entityKey = currentContent.getLastCreatedEntityKey();
    const newState = EditorState.set(editorState, { currentContent: currentContent })
    return AtomicBlockUtils.insertAtomicBlock(newState, entityKey, ' ')
}