10

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

4

2 回答 2

5

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

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";
};

然后将其作为道具传递给编辑器。这将解决您的问题。

于 2019-10-04T10:51:52.737 回答
3

不幸的是，没有关于处理粘贴内容的公开文档。但由于 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 拆分为块。

Draft-js 0.10.0

div在 draft-js@0.10.0 中默认p 使用别名

于 2017-03-18T18:36:44.530 回答