在Tiptap React（Typescript）WYSIWYG编辑器中如何获取content的文本值？

你当前使用的EditorContent属于非原生输入组件，onChange回调接收的参数不是原生DOM事件对象，因此不存在evt.target属性，读取evt.target.value自然会报错。

你用的是Tiptap编辑器的EditorContent组件，编辑器内容可以直接通过editor实例的内置方法获取，不需要给组件绑定value和原生形式的onChange：

1. 初始化editor实例时配置内容更新回调，直接监听内容变化同步到state：

import { useEditor, StarterKit } from '@tiptap/react'

// 组件内初始化逻辑
const editor = useEditor({
  extensions: [StarterKit /* 替换为你实际用到的其他扩展 */],
  content: state.content, // 绑定初始内容
  // 内容更新时触发回调
  onUpdate: ({ editor }) => {
    // 若需要存储HTML格式内容（推荐，方便后续回显渲染）
    const newContent = editor.getHTML()
    // 若需要存储纯文本内容，替换为下面的写法
    // const newContent = editor.getText()
    setState(prev => ({ ...prev, content: newContent }))
  }
})

2. 简化EditorContent组件写法，不需要额外传value和onChange：

<EditorContent 
  editor={editor} 
  className="contentInput" 
  style={{ backgroundColor:'lightgrey' }}
/>

如果选择存储HTML格式内容，入库前建议做XSS过滤，清除恶意脚本标签和属性，避免安全风险。

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