draft.js: 使编辑器内容多页化

Question

我有个难题要解决

Here is my sample project

基本上我想创建一个可编辑的类似书本的容器，并且由于每个书页都是另一个容器，所以我不知道如何在页面充满文本后让编辑器从一个页面过渡到另一个页面。

这是我想要实现的目标：

我的第一个想法是为多个编辑器实例使用共享状态，但正如您在示例代码中看到的那样，它没有按预期工作，相同的文本出现在两个页面中。

如何在使用draft.js时实现多容器转换？

Answer 1

一般的逻辑是监听第一个编辑器的变化，计算字符/单词/行数（或更高级的计算，例如，如果编辑器有滚动），最后在需要时关注第二个编辑器。

本回答涵盖，听，虚算，关注下小编。这个答案不包括计算本身，也不包括动态页数，也不包括删除内容时从第二个编辑器返回等。但我相信这是你最终目标的方向。

听

首先，我将状态创建和处理移回了编辑器组件本身。 "interests" 父组件 ("App") 在其内容更改时收到通知。

但是现在，App 需要访问 ("draft-js") 编辑器才能调用 focus。这将通过在 App 中创建 "ref" 并使用 forwardRef.

传播它来解决

const editorRef = React.useRef();

const Editor = React.forwardRef((props, ref) => {
  return <MyEditor name="editor-2" forwardRef={ref} />;
});

...

return (
  ...
  <Editor ref={editorRef} />
)

并在 Editor.js

function MyEditor({ onChange, forwardRef }) {
  ...
  return (
    <Editor
      ref={forwardRef}
  )
});

下一步是将 onChange 添加到编辑器，以便 App 在内容更改时得到通知。

<Editor
  ref={forwardRef}
  stripPastedStyles
  editorState={editorState}
  onChange={editorState => {
    setEditorState(editorState);
    onChange && onChange(editorState); // <---
  }}
/>

处理变化并专注

现在是第一个编辑

<MyEditor name="editor-1" onChange={onEditorChange} />

并且onEditorChange是

const onEditorChange = editorState => {
  const text = editorState.getCurrentContent().getPlainText();
  if (text.length >= 5) {
    setTimeout(() => {
      editorRef.current.focus();
    });
  }
};

目前它检查内容的长度是否为 5。您可能想以更复杂的方式计算它。

最后一个问题是，为什么setTimeout？好吧，简单的答案是没有它，"draft-js" 会抛出一个错误。我相信这与他们实施释放/删除/清除全局变量或其他东西有关。

最重要的部分是代码和现场演示 :)

https://codesandbox.io/s/young-shape-t6kcc?file=/src/App.js

draft.js: 使编辑器内容多页化

draft.js: making editor content multipage

javascript

css

reactjs

transition

draftjs

听

处理变化并专注