如何从 Tiptap React (TypeScript) Wysiwyg 中的内容中获取文本值？

Question

我正在尝试抓取输入到 wysiwig 中的文本以将其存储到我的数据库中。

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

<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 钩子创建编辑器，在其中添加事件 onUpdate 并在编辑器上的每次更新时设置 editorContent 状态的值。

\n

  const [editorContent, setEditorContent] = useState("");\n  const editor = useEditor({\n    extensions: [StarterKit],\n    content: "<p>Hello World! \xef\xb8\x8f</p>",\n    onUpdate({ editor }) {\n      setEditorContent(editor.getHTML());\n    },\n  });\n

\n