使用 React Hook 表单的 CK 编辑器验证

Question

我有一个 nextJs 项目，其中我使用 CKeditor 反应组件，我使用反应钩子形式作为我的验证库

我的主页代码如下所示

import React from "react";
import { Paper } from "@material-ui/core";
import { makeStyles, withStyles } from "@material-ui/core/styles";

import { useForm } from "react-hook-form";
import dynamic from "next/dynamic";
const Editor = dynamic(() => import("../../components/Form/Editor"), {
  ssr: false,
});
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    "& > *": {
      margin: theme.spacing(1),
    },
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary,
  },
}));
function create2() {
  const classes = useStyles();
  const { errors, control, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };


  return (
    <Paper className={classes.paper}>
      <form onSubmit={handleSubmit(onSubmit)}>
       
        <Editor
          control={control}
          onReady={(editor) => {
            // You can store the "editor" and use when it is needed.
            // console.log("Editor is ready to use!", editor);
            editor.editing.view.change((writer) => {
              writer.setStyle(
                "height",
                "200px",
                editor.editing.view.document.getRoot()
              );
            });
          }}
         
          defaultValue=""
          name="question"
          value={formValues.question}
          rules={{ required: "Question Field is required" }}
          errors={errors}
        />

        <input type="submit" />
      </form>
    </Paper>
  );
}

export default create2;

我的编辑器组件如下图所示

import React, { useEffect, useState } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { Controller } from "react-hook-form";
//import ClassicEditor from 'ckeditor5-classic-with-mathtype';
const useStyles = makeStyles((theme) => ({
  formControl: {
    // margin: theme.spacing(1),
    minWidth: 120,
    fullWidth: true,
  },
  errordiv: {
    width: "100%",
    border: "1px solid red",
  },
  errorText: {
    width: "100%",
    color: "red",
    display: "flex",
    padding: "2px 10px",
  },
}));
const Editor = (props) => {
  const classes = useStyles();
  const [isLayoutReady, setIsLayoutReady] = useState(true);
  const [error, setError] = useState({ error: false, helperText: "" });
  const errorObj = props.errors || "";

  useEffect(() => {
    const errorVal = errorObj ? errorObj[props.name] : "";
    if (errorVal) {
      setError({ ...error, error: true, helperText: errorVal.message });
    } else {
      setError({ error: false, helperText: "" });
    }
  }, [errorObj[props.name]]);
  useEffect(() => {
    setIsLayoutReady(true);
  }, []);

  return (
    <div>
      <div className={error.error ? classes.errordiv : ""}>
        {isLayoutReady ? (
          <Controller
            as={CKEditor}
            {...props}
            config={{
              ckfinder: {
                // Upload the images to the server using the CKFinder QuickUpload command.
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Credentials": "true",
                uploadUrl:
                  "https://run.mocky.io/v3/5125188a-47c1-4138-8871-8837d5ab8764",
              },
              toolbar: {
                items: [
                  "heading",
                  "|",
                  "bold",
                  "italic",
                  "link",
                  "bulletedList",
                  "numberedList",
                  "|",
                  "indent",
                  "outdent",
                  "|",
                  "imageUpload",
                  "blockQuote",
                  "insertTable",
                  "mediaEmbed",
                  "undo",
                  "redo",
                  "fontColor",
                  "fontSize",
                  "fontFamily",
                  "MathType",
                  "ChemType",
                ],
              },
              language: "en",
            }}
            editor={ClassicEditor}
          />
        ) : null}
      </div>
      <div className={classes.errorText}>
        {error.error ? error.helperText : ""}
      </div>
    </div>
  );
};

export default Editor;

我在第一次单击带有所需规则的提交按钮时收到验证警报，但如果我清除 ck 编辑器值并且我提交的输出数据是一些 object，验证不会返回

问题： tsname: "change:data"off: ƒ t()path: [qg]source: qg {model: Fp, version: 19, history: Vg, selection: Cf, root: vs, ...}stop: ƒ t ()原型: Object__proto__: Object

任何人都可以帮我解决这个错误。

Answer 1

尝试这个...

<CKEditor    
data={ textValue }
onChange={(event, editor) => {
                            const data = editor.getData();
                            setTextValue(data);
                          }}
/>

为我加油！！