@ editorcn/ 块编辑器

A 类 名称样式 块类型丰富的文本编辑器 提示 带有shadcn/ui设计符号。 部分 编辑器cn 编辑套房.

特征

• 基于块的编辑( 编号, 线性)
• 斜线命令菜单——类型 / 插入块
• 内置格式的泡泡菜单
• 块级动作( 复制、 删除、 通过拖动手柄重排序)
• 内建图像和表格块
• 用类型脚本完全输入
• 通过 Tiptap 扩展可扩展
• 由 shadcn/ ui CSS 变量所建 — 匹配您的主题
• 由 清晰的反应,继承主题的颜色

安装

无

npm install @editorcn/block-editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-link lucide-react

Tiptap v3 必须使用. @editorcn/block-editor 以 Tiptap 为对象构建 页:1. 确保您的 @tiptap/* 软件包在 v3 上, 导入 BubbleMenu编号 :FloatingMenu 从 @tiptap/react/menus (没有) @tiptap/react root)),如果直接使用它们.

阴影登记册

npx shadcn@latest add @editorcn/block-editor

保证你 components.json 包括编辑器登记册:

{
  "registries": {
    "@editorcn": "https://editorcn.vercel.app/r/{name}.json"
  }
}

使用量

"use client";

import { useEditor } from "@tiptap/react";
import { StarterKit } from "@tiptap/starter-kit";
import { Placeholder } from "@tiptap/extension-placeholder";
import { Underline } from "@tiptap/extension-underline";
import { BlockEditor } from "@editorcn/block-editor";
import "@editorcn/block-editor/style.css";

export function MyEditor() {
  const editor = useEditor({
    extensions: [
      StarterKit.configure({ heading: { levels: [1, 2, 3] } }),
      Placeholder.configure({ placeholder: "Type / for commands..." }),
      Underline,
    ],
  });

  return <BlockEditor editor={editor} />;
}

文档

完整 API 引用时间 编辑cn.vercel.app/docs/块编辑器。 。 。 .

许可证

麻省理工学院