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
包括嵌套节点在内显示装饰。
默认值:false
Placeholder.configure({
includeChildren: true,
});
源代码
packages/extension-placeholder/
使用示例
查看 Tiptap 预览