create-easy-editor —— 快速搭建你的可视化编辑器

写在前面

在使用 EasyEditor 的过程中，搭建一个功能完善的可视化编辑器往往需要大量的前期准备工作。从项目初始化、依赖配置到基础组件搭建，这些重复性工作既耗时又容易出错。

为了解决这个痛点，我们开发了 create-easy-editor ------ 一个专门用于快速创建 EasyEditor 项目的脚手架工具。就像 create-react-app 让 React 项目创建变得简单一样，create-easy-editor 让你能够在几分钟内拥有一个功能完整的可视化编辑器项目。

主要功能

一键式项目创建

只需要一条命令，就能生成包含完整功能的可视化编辑器项目，无需手动配置复杂的依赖关系。

多场景支持

根据不同的业务场景提供相应的模板：

Dashboard 模板：专为数据可视化大屏设计，内置丰富的图表组件
Form 模板：专注于表单构建场景（开发中）

多框架兼容

支持主流前端框架：

React：目前已完全支持，配套完整的生态
Vue：正在开发中，敬请期待

快速开始

安装使用

使用 pnpm：

bash 复制代码

pnpm create @easy-editor

使用 npm：

bash 复制代码

npm init @easy-editor

交互式创建

运行命令后，工具会引导你完成项目配置：

bash 复制代码

pnpm create @easy-editor
> @easy-editor/repository@1.0.0
> create

│◇  Project name:
│  easy-editor
│◇  Select a scenario:
│  Dashboard
│◇  Select a framework:
│  React
│◇  Scaffolding project in D:\Programming\EasyEditor\EasyEditor\easy-editor...
│└  Done.

整个过程大概只需要不到 10 秒，你就能得到一个可以直接运行的项目。

项目启动

创建完成后，进入项目目录：

bash 复制代码

cd easy-editor
pnpm install
pnpm dev

命令行选项

bash 复制代码

Usage:
  npm init @easy-editor [OPTION]... [DIRECTORY]
  npx @easy-editor/create [OPTION]... [DIRECTORY]

Create a new Easy Editor project in JavaScript or TypeScript.
With no arguments, start the CLI in interactive mode.

Options:
  -s, --scenarios NAME       use a specific scenario
  -t, --template NAME        use a specific template
  -h, --help                 display this help message
  --overwrite                overwrite target directory if it exists

Available templates:
react-dashboard

当前支持的模板

Dashboard + React 模板

这是目前最完善的模板，专为数据可视化场景设计。

技术栈：

React 19 + TypeScript
Vite 构建工具
Tailwind CSS + Shadcn UI
EasyEditor 核心库
Recharts 图表库

功能特性：

🎯 拖拽式组件库，包含文本、图片、各类图表
📊 内置 6 种图表类型：柱状图、折线图、饼图、面积图、雷达图、径向图
🎨 实时属性编辑器，支持位置、尺寸、样式调整
🌗 明暗主题切换
📱 响应式设计，适配不同屏幕尺寸
🔍 项目大纲视图，清晰展示组件层级
⌨️ 快捷键支持，提升操作效率
💾 本地存储，自动保存编辑状态
👁️ 实时预览模式

组件库包含：

基础组件：文本、图片
图表组件：柱状图、折线图、饼图、面积图、雷达图、径向图表
布局组件：分组容器
即将添加：表格、按钮、输入框等更多组件

项目结构

生成的项目具有清晰的目录结构：

bash 复制代码

easy-editor/
├── src/
│   ├── components/          # UI 组件库
│   ├── editor/              # 编辑器核心
│   │   ├── materials/       # 物料组件
│   │   ├── setters/         # 属性设置器
│   │   └── plugins/         # 编辑器插件
│   ├── pages/
│   │   ├── editor/          # 编辑器页面
│   │   └── preview/         # 预览页面
│   └── lib/                 # 工具函数
├── public/                  # 静态资源
└── ...配置文件

每个目录都有明确的职责，便于扩展和维护。

扩展和定制

添加自定义组件

在 src/editor/materials 下创建新组件
定义组件的 component.tsx（React 组件）
配置 configure.ts（属性配置）
添加 meta.ts（组件元信息）
在 materials/index.ts 中注册

自定义属性设置器

如果内置的设置器不满足需求，可以在 src/editor/setters 下创建自定义设置器。

添加编辑器插件

通过编写插件可以扩展编辑器功能，比如快捷键、自动保存等。

未来规划

我们正在积极开发更多功能：

即将支持的场景

Form 表单编辑器：专注于表单构建，支持各种表单控件和校验

即将支持的框架

Vue 3 + TypeScript：为 Vue 开发者提供同样优秀的体验

现在就试试吧，用一条命令开启你的可视化编辑器开发之旅！

bash 复制代码

pnpm create @easy-editor