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

Question

所以我正在尝试为我的项目创建一个相当简单的 WYSIWYG BBCode 编辑器，作为一个让我全神贯注于 DraftJS 的机会。我一直在学习一些教程，还使用 react-rte 作为示例（因为它具有我需要的 99% 的功能，而且看起来相对容易理解）。

我遇到的问题是 react-rte 内联插入图像实体（它在当前选择中添加一个 space，然后将一个条目绑定到那个 space），例如这个：

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, ' ')
}

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

Adding Entity into its own block in DraftJS

wysiwyg

reactjs

draftjs