如何在 Reactjs 中获取编辑器值

Question

我正在使用 Reactjs，我正在使用 Nextjs，现在我正在尝试获取“编辑器”的值，但让我关注 错误“TypeError：编辑器为空”，我哪里错了？我怎样才能解决这个问题 ？

const handleSubmit = async(e: any) => {
        e.preventDefault();
        let editor: any = null;

         <Editor
            onInit={(evt, ed) => {
              editor = ed;
              }}
            initialValue="<p>This is the initial content of the editor.</p>"
            init={{
              height: 500,
              menubar: false,
              plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
              ],
              toolbar: 'undo redo | formatselect | ' +
              'bold italic backcolor | alignleft aligncenter ' +
              'alignright alignjustify | bullist numlist outdent indent | ' +
              'removeformat | help',
              content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
            }}
      />

       const content = editor.getContent();
        alert('content is ' + content);
};
 return (
    <>
 <form className="forms-sample" onSubmit={handleSubmit}>        
        <Editor />
<button type="submit" className='btn btn-primary mr-2'>Submit </button>
);

Answer 1

将编辑器定义为状态变量并访问它

const [editor, setEditor] = useState()

useEffect(() => {
 if(editor){
   const content = editor.getContent();
   console.log('content is ' + content);
 }
}, [editor])

const handleSubmit = async(e: any) => {
        e.preventDefault();
       
         <Editor
            onInit={(evt, ed) => {
                setEditor(ed);
               }}
            initialValue="<p>This is the initial content of the editor.</p>"
            init={{
              height: 500,
              menubar: false,
              plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
              ],
              toolbar: 'undo redo | formatselect | ' +
              'bold italic backcolor | alignleft aligncenter ' +
              'alignright alignjustify | bullist numlist outdent indent | ' +
              'removeformat | help',
              content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
            }}
      />
 
};
 return (
    <>
 <form className="forms-sample" onSubmit={handleSubmit}>        
        <Editor />
<button type="submit" className='btn btn-primary mr-2'>Submit </button>
);