Tiptap编辑器Placeholder扩展使用注意事项

2025-05-05 14:29:32作者：江焘钦

打造富文本编辑器的理想之选！TIPTAP是一个基于ProseMirror的无头、框架无关的富文本编辑器，可自由定制和扩展。无论你是Vue、React还是JavaScript开发者，都能无缝集成。借助超过100个社区扩展，轻松实现从样式调整到复杂功能添加。开启协作模式，利用HOCUSPOCUS后端，让多人实时编辑成为可能。立即加入，塑造你独一无二的用户体验！

项目地址：https://gitcode.com/gh_mirrors/tip/tiptap

Tiptap作为一款基于ProseMirror的现代化富文本编辑器框架，其Placeholder扩展为编辑器提供了占位符功能，但在实际使用中开发者常会遇到占位文本不显示的问题。本文将深入分析该问题的原因及解决方案。

问题现象分析

当开发者按照文档配置Placeholder扩展后，发现编辑器区域并未显示预期的占位文本。示例配置如下：

const editor = useEditor({
    extensions: [
        StarterKit,
        Placeholder.configure({
            placeholder: 'Write your post here...'
        }),
        // 其他扩展...
    ],
    editorProps: {
        attributes: {
            class: 'focus:outline-none'
        }
    }
})

根本原因

Placeholder扩展的实现原理是通过CSS伪元素来显示占位文本。当编辑器内容为空时，扩展会为编辑器添加特定的CSS类名，但要使占位文本实际可见，必须定义相应的CSS样式。

解决方案

需要在项目中添加以下CSS样式规则：

/* 基础占位符样式 */
.ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    color: #adb5bd;
    pointer-events: none;
    height: 0;
}

/* 针对其他块级元素的占位符样式 */
.ProseMirror .is-empty::before {
    content: attr(data-placeholder);
    color: #adb5bd;
    float: left;
    pointer-events: none;
    height: 0;
}