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

date

Jun 10, 2025

slug

create-easy-editor

status

Published

写在前面

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

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

主要功能

一键式项目创建

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

多场景支持

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

Dashboard 模板：专为数据可视化大屏设计，内置丰富的图表组件

Form 模板：专注于表单构建场景（开发中）

多框架兼容

支持主流前端框架：

React：目前已完全支持，配套完整的生态

Vue：正在开发中，敬请期待

快速开始

安装使用

使用 pnpm：

使用 npm：

交互式创建

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

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

项目启动

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

命令行选项

当前支持的模板

Dashboard + React 模板

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

技术栈：

React 19 + TypeScript

Vite 构建工具

Tailwind CSS + Shadcn UI

EasyEditor 核心库

Recharts 图表库

功能特性：

🎯 拖拽式组件库，包含文本、图片、各类图表

📊 内置 6 种图表类型：柱状图、折线图、饼图、面积图、雷达图、径向图

🎨 实时属性编辑器，支持位置、尺寸、样式调整

🌗 明暗主题切换

📱 响应式设计，适配不同屏幕尺寸

🔍 项目大纲视图，清晰展示组件层级

⌨️ 快捷键支持，提升操作效率

💾 本地存储，自动保存编辑状态

👁️ 实时预览模式

组件库包含：

基础组件：文本、图片

图表组件：柱状图、折线图、饼图、面积图、雷达图、径向图表

布局组件：分组容器

即将添加：表格、按钮、输入框等更多组件

项目结构

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

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

扩展和定制

添加自定义组件

在 src/editor/materials 下创建新组件

定义组件的 component.tsx（React 组件）

配置 configure.ts（属性配置）

添加 meta.ts（组件元信息）

在 materials/index.ts 中注册

自定义属性设置器

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

添加编辑器插件

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

未来规划

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

即将支持的场景

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

即将支持的框架

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

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