draft.js:粘贴内容时如何保留分段符？

Question

是否有文档说明了将内容粘贴到draft.js时如何保留分段符？其他格式化看起来很合理,但所有段落块在粘贴时都会折叠成一个段落块.

Answer 1

您可以使用编辑器的道具来处理这个问题。

handlePastedText = (text: string, html?: string, editorState: EditorState) => {
    const selection = editorState.getSelection();
    const pastedBlocks = ContentState.createFromText(text).blockMap;
    const newState = Modifier.replaceWithFragment(
        editorState.getCurrentContent(),
        editorState.getSelection(),
        pastedBlocks,
    );
    const newEditorState = EditorState.push(editorState, newState, "insert-fragment");
    this.handleChange(newEditorState);
    return "handled";
};

然后将其作为 props 传递到编辑器中。这将解决您的问题。

Answer 2

不幸的是，没有关于处理粘贴内容的公开文档。但由于 Draft-js 是开源的，阅读源代码可以解决问题。

Draft-js 0.9.1 及以下版本

只需使用blockRenderMapp指定为块的别名元素：unstyled

import { Map } from 'immutable';
import Editor from 'draft-js';

const customRenderMap = Map({
  unstyled: {
    element: 'div',
    // will be used in convertFromHTMLtoContentBlocks
    aliasedElements: ['p'],
  },
});

<Editor
  editorState={this.state.editorState}
  blockRenderMap={customRenderMap}
/>

解释：

当您将内容粘贴到 Draft-js 时，将调用editOnPaste函数。在其中，草稿确定您粘贴的内容是 html（是的，当您从 MS Word、Google Docs 或 Apple Pages 等文本处理器复制粘贴任何文本时，它实际上是 html），并调用ConvertFromHTMLToContentBlocks()。

convertFromHTMLToContentBlocks()反过来，使用 blockRenderMap来确定如何将 html 拆分为块。

草案-js 0.10.0

divp 默认情况下别名为 Draft-js@0.10.0