React 表单组件不会随 Tiny MCE 一起更新

Question

当我尝试实现 TinyMCE 所见即所得时，此表单的“内容”字段不再更新。我知道我的 handleUpdate 函数与关于如何处理 React 组件的 TinyMCE 文档有点不同，但据我所知，它应该以相同的方式运行。有人知道为什么此集成不起作用吗？

import { useState } from 'react';
import { Editor } from "@tinymce/tinymce-react";
import "./NewBlogPost.css";

function NewBlogPost(props) {
  const [formData, setFormData] = useState({
    title: '',
    content: '',
    image_url: ''
  })

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }))
  }

  const saveBlog = (e) => {
    e.preventDefault();
    props.handleCreate({
      ...formData
    })
  }

  const clearForm = (e) => {
    e.preventDefault();
    setFormData({
      title: '',
      content: '',
      image_url: ''
    })
  }

  return (
    <div>
      <h1>Create New Blog Post</h1>
      <form
        className="new-blog-form"
        onSubmit={saveBlog}>
        <div>
        <label className="form-label">Title:
          <input
            className="form-input"
            type='text'
            name='title'
            value={formData.title}
            onChange={handleChange}
          />
        </label>
        </div>
        <div>
        <label className="form-label">Image URL:
          <input
            className="form-input"
            type='text'
            name='image_url'
            value={formData.image_url}
            onChange={handleChange}
          />
        </label>
        </div>
        <div>
          <label> Content:
            <Editor
              textareaName="text-area"
              name='content'
              value={formData.content}
              outputFormat= 'text'
              init={{
                height: 500,
                width: 420,
                menubar: false,
                toolbar: 'undo redo | formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
              }}
              onChange={handleChange}
            />
          </label>
        </div>
        <div>
        <button className="button" id="save-button">Save</button>
        <button
          className="button"
          id="clear-button"
          onClick={clearForm}
        >Clear</button>
        </div>
      </form>
    </div>
  );
}

export default NewBlogPost;

Answer 1

您需要做一些更改以适应您的代码中的 tinymce 编辑器并仍然保持您的 handleChange 函数可重用，您正在制作一个受控表单，因此首先您需要添加一个函数来构建 handleChange 的内容需要工作：

const parseEditorData = (content, editor) => {
 //content is the current value of the text editor
 // editor is an object that holds the html element that in this case is the text area where the name prop will be stored.
 const { targetElm } = editor;
 // This name value references the prop that you pass as textAreaName (content in your case)
 const { name } = targetElm;

 // This function returns an object that your handle change can parse correctly
 return {
  target: {
    name,
    value: content
  }
 };
};

现在您已经准备好解析函数，您需要稍微更改编辑器组件中的道具：

  <Editor
    outputFormat='text'
    init={{
     height: 500,
     width: 420,
     menubar: false,
     toolbar: 'undo redo | formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
    }}
    onEditorChange={(content, editor) =>
      handleChange(parseEditorData(content, editor))
    }
    value={formData.content}
    textareaName="content"
  />

如您所见，onEditorChange 将运行 handleChange 与从 parseEditorData 函数接收到的已解析对象，此结果看起来就像您需要正确运行 handleChange 的结果。最后但重要的是，textAreaName 道具将是您需要传递的道具，以保存 formData 对象中内容键的引用。

请检查说明该过程的沙箱： https://codesandbox.io/s/still-river-2q6pf?file=/src/App.js:840-862

React 表单组件不会随 Tiny MCE 一起更新

React form component does not update with Tiny MCE

forms

tinymce

reactjs