Tiptap是基于ProseMirror构建的现代化富文本编辑器，默认的内容存储形式为JSON结构，当用户在编辑器内输入空白符、换行符时，生成的JSON内容不会是真正的空值，直接判断内容是否存在很容易出现误判。要实现忽略空白符和换行符的精确空内容判断，需要先理解Tiptap的内容结构，再针对性处理。
Tiptap内容结构基础
Tiptap编辑器的内容可以通过getJSON()方法获取，空内容对应的JSON结构通常为{"type":"doc","content":[{"type":"paragraph"}]}，而用户输入空白符、换行符后，内容会包含text节点，节点内容可能是空格、制表符、换行符等字符。
常规的空内容判断方式比如判断editor.isEmpty属性，或者判断获取到的HTML内容是否为空，都无法准确过滤掉空白符和换行符，下面先分析这类判断的问题。
常规判断方式的缺陷
先看两种常见的错误判断方式：
- 直接使用
editor.isEmpty：这个属性仅判断编辑器是否有内容节点，空白符和换行符生成的内容节点会被视为非空，导致判断失效。 - 将内容转为HTML后判断长度：空白符、换行符转成HTML后可能保留为
精确判断的实现方案
核心思路是遍历Tiptap的JSON内容结构，提取所有文本节点的内容，过滤掉空白符、换行符、制表符等无意义字符，最后判断剩余内容是否为空。
步骤1：获取编辑器JSON内容
首先通过Tiptap实例的getJSON()方法获取完整的内容结构，这个方法返回的是标准的JSON对象，不需要额外处理特殊字符。
步骤2：递归提取所有文本内容
JSON内容是一个嵌套结构，顶层是doc节点，子节点可能是paragraph、text等，需要递归遍历所有节点，收集text节点的text属性值。
步骤3：过滤空白字符并判断
收集到所有文本内容后，使用正则匹配去掉所有空白符（包括空格、换行符、制表符、回车符等），再判断处理后的字符串长度是否为0。
完整代码示例
以下是Vue3环境下结合Tiptap实现精确空内容判断的完整代码：
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import { ref } from 'vue'
// 初始化Tiptap编辑器
const editor = useEditor({
content: '',
extensions: [StarterKit],
})
// 递归提取JSON内容中的所有文本
const extractTextFromJSON = (node) => {
let text = ''
// 如果节点是文本节点，直接取text属性
if (node.type === 'text' && node.text) {
return node.text
}
// 如果节点有子内容，递归遍历子节点
if (node.content && Array.isArray(node.content)) {
node.content.forEach(childNode => {
text += extractTextFromJSON(childNode)
})
}
return text
}
// 判断编辑器内容是否为空（忽略空白符和换行符）
const isEditorContentEmpty = () => {
if (!editor.value) return true
// 获取编辑器JSON内容
const jsonContent = editor.value.getJSON()
// 提取所有文本
const allText = extractTextFromJSON(jsonContent)
// 匹配所有空白字符（空格、换行、制表符、回车等）并替换为空
const trimmedText = allText.replace(/s+/g, '')
// 判断处理后的文本是否为空
return trimmedText.length === 0
}
// 测试示例
const testEmpty = () => {
const isEmpty = isEditorContentEmpty()
console.log('编辑器内容是否为空（忽略空白符）：', isEmpty)
}
方案验证
可以测试以下几种场景：
- 编辑器完全无输入：返回
true - 输入多个空格、换行符：返回
true - 输入空格后加正常文本：返回
false - 仅输入制表符：返回
true
这个方案不需要处理HTML转义问题，直接基于Tiptap原生的JSON结构处理，性能稳定且判断准确，适配所有Tiptap支持的内容类型。