PlateJS 序列化 HTML

Question

我正在尝试这样做，以便当我单击按钮时，我可以获得一个 html 字符串。 一般来说，这个富文本编辑器会在React-Hook-Form内部，当提交表单时，它会将值保存到html中，因此可以将其保存到数据库中

这是我的代码：

"use client";

import { plugins } from "@/lib/plugins";
import { CommentsProvider } from "@udecode/plate-comments";
import { Plate, createPlateEditor } from "@udecode/plate-common";
import { serializeHtml } from "@udecode/plate-serializer-html";
import { FC } from "react";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

import { CommentsPopover } from "@/components/plate-ui/comments-popover";
import { Editor } from "@/components/plate-ui/editor";
import { FixedToolbar } from "@/components/plate-ui/fixed-toolbar";
import { FixedToolbarButtons } from "@/components/plate-ui/fixed-toolbar-buttons";
import { FloatingToolbar } from "@/components/plate-ui/floating-toolbar";
import { FloatingToolbarButtons } from "@/components/plate-ui/floating-toolbar-buttons";
import { MentionCombobox } from "@/components/plate-ui/mention-combobox";

interface PropsType {
  initialValue?: any;
}

const RichTextEditor: FC<PropsType> = ({ initialValue }) => {
  const editor = createPlateEditor({ plugins });

  const html = serializeHtml(editor, {
    nodes: editor.children,
    dndWrapper: (props) => <DndProvider backend={HTML5Backend} {...props} />,
  });
  return (
    <>
      <DndProvider backend={HTML5Backend}>
        <CommentsProvider users={{}} myUserId="1">
          <Plate
            plugins={plugins}
            initialValue={initialValue}
            editor={editor}
            onChange={() => {
              console.log(editor.children);
            }}
          >
            <FixedToolbar>
              <FixedToolbarButtons />
            </FixedToolbar>

            <Editor />

            <FloatingToolbar>
              <FloatingToolbarButtons />
            </FloatingToolbar>
            <MentionCombobox items={[]} />
            <CommentsPopover />
          </Plate>
        </CommentsProvider>
      </DndProvider>
      <button
        onClick={() => {
          console.log(html);
        }}
      >
        Click
      </button>
    </>
  );
};

export default RichTextEditor;

但目前由于某种原因我得到一个空字符串

我认为问题出在创建 html 上，但我无法在 onChange 或 onClick 中创建此变量。

也许有人有现成的代码或者知道如何解决问题。我将非常感激

Answer 1

我也面临着同样的问题。你能解决同样的问题吗？