默认情况下,draft.js会将任何原子类型块放入2个空行(1之前是atimic,1之后是atimic)。此行为是draft.js中缺少原子选择和描述here的结果。我怎么能摆脱那些线?我还没有在Modifier中找到任何正确的功能。 也许有人有另一个解决方案来解决这个问题,因为现在它看起来并不好看
更新:我发现溶剂对我有用:
const { editorState } = this.props;
const contentState = editorState.getCurrentContent();
const entityKey = Entity.create('image', 'IMMUTABLE', {src: this.state.url});
const with_atomic = AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, ' ');
const new_content_state = with_atomic.getCurrentContent();
const block_map = new_content_state.getBlockMap();
const current_atomic_block = block_map.find(block => {
if (block.getEntityAt(0) === entityKey) {
return block
}
});
const atomic_block_key = current_atomic_block.getKey();
const block_before = new_content_state.getBlockBefore(atomic_block_key).getKey();
const new_block_map = block_map.filter(block => {
if ((block.getKey() !== block_before) ) {
return block
}
});
const newContentState = contentState.set('blockMap', new_block_map);
const newEditorState = EditorState.createWithContent(newContentState);
this.props.onChange(newEditorState);
答案 0 :(得分:3)
如果您在插入时需要处理非折叠选择,那么这不是几行代码。如果你只需要删除原子周围的两行,也许这段代码可以工作:
const newAtomicBlock = contentState.getBlockMap().find(b=>b.getEntityAt(0)===entityKey).getKey();
const newBlockMap = contentState.getBlockMap().delete(contentState.getBlockBefore(newAtomicBlock)).delete(contentState.getBlockAfter(newAtomicBlock));
const newContentState = contentState.set('blockMap', newBlockMap);
const newEditorState = EditorState.push(editorState, newContentState, 'delete-empty-lines');