Tiptap富文本编辑器在Next.js中无法上传数据至数据库的问题

• 补全自定义TipTap组件的Props接收逻辑
  你的自定义TipTap组件仅声明了setValue作为入参，但调用时传入了value、name、placeholder等属性，这些属性未被组件接收和使用，导致编辑器无法初始化内容、表单绑定失效。修改组件定义，补充必要的props：

  const TipTap = ({ setValue, value, name, placeholder }) => {
    // 后续逻辑
  };
  

  同时初始化编辑器时，将content设置为传入的value，确保编辑器初始内容与formState同步：

  const editor = useEditor({
    extensions: [StarterKit, Underline, ListItem, TextStyle],
    content: value || '',
    placeholder: placeholder,
    onUpdate: ({ editor }) => {
      const json = editor.getJSON();
      setValue(json);
    },
  });
  

• 修正setValue的传递错误
  调用TipTap组件时传入的setValue={setFormState.description}是错误用法。setFormState是useState返回的状态更新函数，正确的传递方式是传入一个能更新formState中description字段的函数：

  <TipTap 
    value={formState.description} 
    setValue={(content) => setFormState(prev => ({ ...prev, description: content }))}
    name="description"
    placeholder={!language ? 'description' : 'description'}
  />
  

  无需再传入onChange，组件内部已通过onUpdate触发状态更新。

• 移除EditorContent的无效属性
  Tiptap的EditorContent组件不支持value和name属性，这些配置不会生效。如果需要绑定表单name以确保提交时能获取数据，可以添加一个隐藏input同步编辑器内容：

  return (
    <div className="text-editor">
      <MenuBar editor={editor} />
      <EditorContent editor={editor} />
      {/* 隐藏input同步内容，保证表单提交时能正确获取值 */}
      <input 
        type="hidden" 
        name={name} 
        value={JSON.stringify(editor?.getJSON() || {})} 
      />
    </div>
  );
  

• 统一数据格式适配后端接口
  Tiptap默认返回JSON格式内容，而原textarea传递的是纯文本/HTML。需确认后端接口是否支持接收JSON格式的description字段，若需兼容原接口，可在onUpdate中获取HTML字符串而非JSON：

  onUpdate: ({ editor }) => {
    const html = editor.getHTML();
    setValue(html);
  };
  

• 调试状态更新是否生效
  在父组件中打印formState.description，确认编辑器内容变化时状态是否被正确更新；同时在TipTap组件的onUpdate中添加console.log(json)，验证编辑器内容是否正常触发回调。

内容的提问来源于stack exchange，提问作者Tony