日期

PreviousNext

Insert and format dates in your document.

日期元素
Loading…

功能特性

  • 使用内联日期元素在文本中插入和显示日期
  • 可通过日历界面轻松选择和修改这些日期

套件使用

安装

最快捷添加日期功能的方式是使用 DateKit，它包含了预配置的 DatePlugin 和 Plate UI 组件。

'use client';
 
import { DatePlugin } from '@platejs/date/react';
 
import { DateElement } from '@/components/ui/date-node';
 
export const DateKit = [DatePlugin.withComponent(DateElement)];
'use client';
 
import { DatePlugin } from '@platejs/date/react';
 
import { DateElement } from '@/components/ui/date-node';
 
export const DateKit = [DatePlugin.withComponent(DateElement)];

添加套件

将套件添加到你的插件中：

import { createPlateEditor } from 'platejs/react';
import { DateKit } from '@/components/editor/plugins/date-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    ...DateKit,
  ],
});
import { createPlateEditor } from 'platejs/react';
import { DateKit } from '@/components/editor/plugins/date-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    ...DateKit,
  ],
});

手动配置

安装

pnpm add @platejs/date
pnpm add @platejs/date

添加插件

在创建编辑器时将 DatePlugin 包含到 Plate 插件数组中。

import { DatePlugin } from '@platejs/date/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    DatePlugin,
  ],
});
import { DatePlugin } from '@platejs/date/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    DatePlugin,
  ],
});

配置插件

使用自定义组件配置插件来渲染日期元素。

import { DatePlugin } from '@platejs/date/react';
import { createPlateEditor } from 'platejs/react';
import { DateElement } from '@/components/ui/date-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    DatePlugin.withComponent(DateElement),
  ],
});
import { DatePlugin } from '@platejs/date/react';
import { createPlateEditor } from 'platejs/react';
import { DateElement } from '@/components/ui/date-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    DatePlugin.withComponent(DateElement),
  ],
});
  • withComponent: 指定 DateElement 来渲染内联日期元素

插入工具栏按钮

你可以将此项目添加到 插入工具栏按钮 来插入日期元素：

{
  focusEditor: true,
  icon: <CalendarIcon />,
  label: '日期',
  value: KEYS.date,
}
{
  focusEditor: true,
  icon: <CalendarIcon />,
  label: '日期',
  value: KEYS.date,
}

插件

DatePlugin

用于向文档添加日期元素的插件。

API

isPointNextToNode

检查一个点是否邻近特定类型的节点。

Parameters

    要检查邻近性的节点类型（例如 'date' 表示内联日期元素）

    检查邻近性的选项

Optionsobject

    检查的起始位置。如未提供则使用当前选区锚点

    检查方向。为 true 时检查前一个节点，为 false 时检查后一个节点

转换操作

tf.insert.date

Parameters

    要插入的日期字符串，格式为 'YYYY-MM-DD'

    • 默认值: 当前日期

    插入节点的选项