tiptap 占位符

这个扩展提供了占位符支持。给你的用户一些提示，让他们知道应该写些什么。如果你愿意，可以自定义一些设置。

安装

npm install @tiptap/extension-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 属性添加的占位符文本。

默认值：'Write something …'

Placeholder.configure({
  placeholder: "My Custom Placeholder",
});

甚至可以使用函数根据节点动态添加占位符：

Placeholder.configure({
  placeholder: ({ node }) => {
    if (node.type.name === "heading") {
      return "What’s the title?";
    }

    return "Can you add some further context?";
  },
});

considerAnyAsEmpty

将任何非叶节点或原子节点视为编辑器为空状态的考虑范围。

默认值：false

Placeholder.configure({
  considerAnyAsEmpty: true,
});

showOnlyWhenEditable

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

默认值：true

Placeholder.configure({
  showOnlyWhenEditable: false,
});

showOnlyCurrent

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

默认值：true

Placeholder.configure({
  showOnlyCurrent: false,
});

includeChildren

包括嵌套节点在内显示装饰。