占位符扩展

该扩展提供了占位符支持。给你的用户一个小提示，告诉他们应该写些什么。如果你愿意，可以自定义一些内容。

安装

npm install @tiptap/extensions

用法

import { Editor } from '@tiptap/core'
import { Placeholder } from '@tiptap/extensions'

new Editor({
  extensions: [
    Placeholder.configure({
      placeholder: '写点什么 …',
    }),
  ],
})

额外设置

占位符是通过 CSS 显示的。

仅在空编辑器的第一行显示占位符。

.tiptap p.is-editor-empty:first-child::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

在每个新行上显示占位符。

.tiptap p.is-empty::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

设置

emptyEditorClass

如果编辑器为空，添加的 CSS 类。

默认值：'is-editor-empty'

Placeholder.configure({
  emptyEditorClass: 'is-editor-empty',
})

emptyNodeClass

如果节点为空，添加的 CSS 类。

默认值：'is-empty'

Placeholder.configure({
  emptyNodeClass: 'my-custom-is-empty-class',
})

placeholder

作为 data-placeholder 属性添加的占位符文本。

默认值：'写点什么 …'

Placeholder.configure({
  placeholder: '我的自定义占位符',
})

您甚至可以使用一个函数根据节点添加占位符：

Placeholder.configure({
  placeholder: ({ node }) => {
    if (node.type.name === 'heading') {
      return '标题是什么？'
    }

    return '您能提供更多上下文吗？'
  },
})

showOnlyWhenEditable

仅在编辑器可编辑时显示装饰。

默认值：true

Placeholder.configure({
  showOnlyWhenEditable: false,
})

showOnlyCurrent

仅在当前选定的节点中显示装饰。

默认值：true

Placeholder.configure({
  showOnlyCurrent: false,
})

includeChildren

也为嵌套节点显示装饰。

默认值：false

Placeholder.configure({
  includeChildren: true,
})

源代码

packages/extensions/src/placeholder

最小安装

import { Editor } from '@tiptap/core'
import { Placeholder } from '@tiptap/extensions/placeholder'

new Editor({
  extensions: [Placeholder],
})