如何在 React 中使用 Tiptap 中的 setContent 加载内容？

Question

他们提供了有关 setContent 和一般命令的详细信息。但是，我一直在按 ctrl+F 到处寻找“命令”应该放在代码中的位置。我只是希望加载我之前使用 Tiptap 编辑器导出的 HTML。

\n

https://tiptap.dev/api/commands/set-content

\n

这是我的一些代码供参考。虽然，不确定这是否与放置命令的位置有关：

\n

import "../../styles/tiptap.scss";\n\nimport { EditorContent, useEditor } from "@tiptap/react";\nimport StarterKit from "@tiptap/starter-kit";\nimport React, { useEffect } from "react";\n\nconst MenuBar = ({ editor }) => {\n  if (!editor) {\n    return null;\n  }\n\n  return (\n    <>\n      <button\n        onClick={() => editor.chain().focus().toggleBold().run()}\n        disabled={!editor.can().chain().focus().toggleBold().run()}\n        className={editor.isActive("bold") ? "is-active" : ""}\n      >\n        bold\n      </button>\n      <button\n        onClick={() => editor.chain().focus().toggleItalic().run()}\n        disabled={!editor.can().chain().focus().toggleItalic().run()}\n        className={editor.isActive("italic") ? "is-active" : ""}\n      >\n        italic\n      </button>\n      <button\n        onClick={() => editor.chain().focus().toggleStrike().run()}\n        disabled={!editor.can().chain().focus().toggleStrike().run()}\n        className={editor.isActive("strike") ? "is-active" : ""}\n      >\n        strike\n      </button>\n      <button\n        onClick={() => editor.chain().focus().toggleCode().run()}\n        disabled={!editor.can().chain().focus().toggleCode().run()}\n        className={editor.isActive("code") ? "is-active" : ""}\n      >\n        code\n      </button>\n      <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>clear marks</button>\n      <button onClick={() => editor.chain().focus().clearNodes().run()}>clear nodes</button>\n      <button\n        onClick={() => editor.chain().focus().setParagraph().run()}\n        className={editor.isActive("paragraph") ? "is-active" : ""}\n      >\n        paragraph\n      </button>\n      <button\n        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}\n        className={editor.isActive("heading", { level: 1 }) ? "is-active" : ""}\n      >\n        h1\n      </button>\n      <button\n        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}\n        className={editor.isActive("heading", { level: 2 }) ? "is-active" : ""}\n      >\n        h2\n      </button>\n      <button\n        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}\n        className={editor.isActive("heading", { level: 3 }) ? "is-active" : ""}\n      >\n        h3\n      </button>\n      <button\n        onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}\n        className={editor.isActive("heading", { level: 4 }) ? "is-active" : ""}\n      >\n        h4\n      </button>\n      <button\n        onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}\n        className={editor.isActive("heading", { level: 5 }) ? "is-active" : ""}\n      >\n        h5\n      </button>\n      <button\n        onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}\n        className={editor.isActive("heading", { level: 6 }) ? "is-active" : ""}\n      >\n        h6\n      </button>\n      <button\n        onClick={() => editor.chain().focus().toggleBulletList().run()}\n        className={editor.isActive("bulletList") ? "is-active" : ""}\n      >\n        bullet list\n      </button>\n      <button\n        onClick={() => editor.chain().focus().toggleOrderedList().run()}\n        className={editor.isActive("orderedList") ? "is-active" : ""}\n      >\n        ordered list\n      </button>\n      <button\n        onClick={() => editor.chain().focus().toggleCodeBlock().run()}\n        className={editor.isActive("codeBlock") ? "is-active" : ""}\n      >\n        code block\n      </button>\n      <button\n        onClick={() => editor.chain().focus().toggleBlockquote().run()}\n        className={editor.isActive("blockquote") ? "is-active" : ""}\n      >\n        blockquote\n      </button>\n      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>\n        horizontal rule\n      </button>\n      <button onClick={() => editor.chain().focus().setHardBreak().run()}>hard break</button>\n      <button\n        onClick={() => editor.chain().focus().undo().run()}\n        disabled={!editor.can().chain().focus().undo().run()}\n      >\n        undo\n      </button>\n      <button\n        onClick={() => editor.chain().focus().redo().run()}\n        disabled={!editor.can().chain().focus().redo().run()}\n      >\n        redo\n      </button>\n    </>\n  );\n};\n\nexport default ({ newPostRichText, setNewPostRichText }) => {\n  const editor = useEditor({\n    extensions: [StarterKit],\n    content: `\n      <h2>\n        Hi there,\n      </h2>\n      <p>\n        this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you\xe2\x80\x99d probably expect from a text editor. But wait until you see the lists:\n      </p>\n      <ul>\n        <li>\n          That\xe2\x80\x99s a bullet list with one \xe2\x80\xa6\n        </li>\n        <li>\n          \xe2\x80\xa6 or two list items.\n        </li>\n      </ul>\n      <p>\n        Isn\xe2\x80\x99t that great? And all of that is editable. But wait, there\xe2\x80\x99s more. Let\xe2\x80\x99s try a code block:\n      </p>\n      <pre><code class="language-css">body {\n  display: none;\n}</code></pre>\n      <p>\n        I know, I know, this is impressive. It\xe2\x80\x99s only the tip of the iceberg though. Give it a try and click a little bit around. Don\xe2\x80\x99t forget to check the other examples too.\n      </p>\n      <blockquote>\n        Wow, that\xe2\x80\x99s amazing. Good work, boy! \n        <br />\n        \xe2\x80\x94 Mom\n      </blockquote>\n    `,\n    // triggered on every change\n    onUpdate: ({ editor }) => {\n      setNewPostRichText(editor?.getHTML());\n      //console.log(newPostRichText);\n    },\n  });\n\n  return (\n    <div>\n      <MenuBar editor={editor} />\n      <EditorContent editor={editor} />\n    </div>\n  );\n};\n\n

\n

我希望将从 TipTap 导出的 HTML 传回

\n

Answer 1

如果在编辑器最初显示时您已经有了想要加载到编辑器中的内容，您可以轻松地将内容传递到 useEditor 挂钩中，如下所示：

// make sure to have your content ready somewhere here?
const editorContent = '<p>Your content</p>'

const Tiptap = () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
    ],
    content: editorContent,
  })

  return (
    <EditorContent editor={editor} />
  )
}

如果您还没有内容并且要从某个地方获取它，您可以执行以下操作：

const Tiptap = () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
    ],
    content: '',
  })

  useEffect(() => {
    // this is just an example. do whatever you want to do here
    // to retrieve your editors content from somewhere
    editor.commands.setContent(insertYourHTMLHere)
  }, [editor])

  return (
    <EditorContent editor={editor} />
  )
}

在这种情况下，您可能应该将内容保存在状态中，并且在尚未加载内容时不显示 ，因为人们可能已经在网络请求仍在运行时开始输入。

向https://github.com/bdbch寻求帮助