reactjs - 如何从tiptap react（typescript）所见即所得的内容中获取文本值？

Question

我正在尝试获取输入到所见即所得的文本以将其存储到我的数据库中。

我尝试了很多不同的东西，这是我最近的迭代：

<EditorContent editor={editor} className="contentInput" style={{ backgroundColor:'lightgrey' }} value={state.content} onChange={(evt) => setState({ ...state, content: evt.target.value })}/>

并且我得到的错误是 value 不是目标上的属性。我相信这是因为它不再是 HTML 输入元素，但我不确定现在如何获取该内容以放入数据库？

Answer 1

const editor = useEditor({
    // ...
    onUpdate({ editor }) {
        setState(editor.getJSON());
    },
});

Answer 2

首先，您需要使用 useState 挂钩创建一个状态，然后使用 useEditor Hook 创建编辑器，在其中您将添加事件 onUpdate 并在编辑器的每次更新时设置 editorContent 状态的值。

  const [editorContent, setEditorContent] = useState("");
  const editor = useEditor({
    extensions: [StarterKit],
    content: "<p>Hello World! ️&lt;/p>",
    onUpdate({ editor }) {
      setEditorContent(editor.getHTML());
    },
  });