@ editorcn/ 编辑

A 类 工具栏样式 以丰富文本编辑器为基础 提示 带有shadcn/ui设计符号。 部分 编辑器cn 编辑套房.

特征

• 化合物成分 APIRichTextEditor, (中文(简体) ), RichTextEditor.Toolbar, (中文(简体) ), RichTextEditor.Content页:1
• 20+ 内置工具栏控件( Bold, H1, Link, Undo等)
• 有可配置控制组的粘性工具栏
• 用类型脚本完全输入
• 通过 Tiptap 扩展可扩展
• 由 shadcn/ ui CSS 变量所建 — 匹配您的主题

安装

无

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

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

阴影登记册

npx shadcn@latest add @editorcn/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 { Underline } from "@tiptap/extension-underline";
import { RichTextEditor, Link } from "@editorcn/editor";
import "@editorcn/editor/style.css";

export function MyEditor() {
  const editor = useEditor({
    extensions: [StarterKit, Link, Underline],
    content: "<p>Start typing...</p>",
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Bold />
          <RichTextEditor.Italic />
          <RichTextEditor.Underline />
        </RichTextEditor.ControlsGroup>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.H1 />
          <RichTextEditor.H2 />
          <RichTextEditor.H3 />
        </RichTextEditor.ControlsGroup>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Undo />
          <RichTextEditor.Redo />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>
      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

文档

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

许可证

麻省理工学院