# @ant-design/pro-editor 中文文档

规范地址：https://npmcn.com/package/%40ant-design/pro-editor/

版本：1\.3\.0
npm 元数据更新时间：2026-04-02T03:57:59.508Z
中文译文更新时间：2026-11-06T06:03:36.271Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ant-design/pro-editor
原文对照：https://npmcn.com/package/%40ant-design/pro-editor/?lang=original
项目主页：https://github.com/ant-design/pro-editor
源码仓库：https://github.com/ant-design/pro-editor

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：671 kB，485 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：50 个
- peer 依赖：antd \>=5，react \>=18，react-dom \>=18，antd-style \>=3
- 首次发布：2023-05-11T05:06:02.874Z
- 最新版本发布：2024-09-09T02:17:18.666Z
- 近 30 天下载量：6739（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：115（近 12 个月 0 个）

## 中文简介

QQ 轻量级编辑器 UI 框架

## 安装

```sh
npm install @ant-design/pro-editor
```

也可以使用：`pnpm add @ant-design/pro-editor`、`yarn add @ant-design/pro-editor`、`bun add @ant-design/pro-editor`

## README

![](https://gw.alipayobjects.com/zos/kitchen/wzToJwlSw%24/logo.svg)

# 编辑器

最终编辑器 UI 框架和组件

[![](https://img.shields.io/npm/v/@ant-design/pro-editor?color=1677FF&labelColor=black&logo=npm&logoColor=white&style=flat-square)](https://www.npmjs.com/package/@ant-design/pro-editor) [![](https://img.shields.io/npm/dt/@ant-design/pro-editor?labelColor=black&style=flat-square&color=1677FF)](https://www.npmjs.com/package/@ant-design/pro-editor) [![](https://img.shields.io/github/release-date/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square)](https://github.com/ant-design/pro-editor/releases) [![](https://img.shields.io/github/actions/workflow/status/ant-design/pro-editor/test.yml?color=1677FF&label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square)](https://github.com/ant-design/pro-editor/actions/workflows/test.yml) [![](https://img.shields.io/github/actions/workflow/status/ant-design/pro-editor/release.yml?color=1677FF&label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square)](https://github.com/ant-design/pro-editor/actions/workflows/release.yml) [![](https://img.shields.io/codecov/c/github/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square&logo=codecov&logoColor=white)](https://codecov.io/gh/ant-design/pro-editor)  
[![](https://img.shields.io/github/contributors/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square)](https://github.com/ant-design/pro-editor/graphs/contributors) [![](https://img.shields.io/github/forks/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square)](https://github.com/ant-design/pro-editor/network/members) [![](https://img.shields.io/github/stars/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square)](https://github.com/ant-design/pro-editor/network/stargazers) [![](https://img.shields.io/github/issues/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square)](https://github.com/ant-design/pro-editor/issues) [![](https://img.shields.io/github/license/ant-design/pro-editor?color=1677FF&labelColor=black&style=flat-square)](https://github.com/ant-design/pro-editor/blob/main/LICENSE)  
[![](https://img.shields.io/badge/-Ant%20Design-1677FF?labelColor=black&logo=antdesign&style=flat-square)](https://ant.design/) [![](https://img.shields.io/badge/docs%20by-dumi-blue?color=1677FF&labelColor=black&style=flat-square)](https://d.umijs.org/) [![](https://img.shields.io/badge/build%20with-father-028fe4.svg?color=1677FF&labelColor=black&style=flat-square)](https://github.com/umijs/father)

英语 [简体中文](https://npmcn.com/package/%40ant-design/pro-editor/README.zh-CN.md) • 妇女 [更改日志](https://npmcn.com/package/%40ant-design/pro-editor/CHANGELOG.md) 。 。 。 . [报告错误](https://github.com/ant-design/pro-editor/issues) • 妇女 [请求特性](https://github.com/ant-design/pro-editor/issues)

![](https://gw.alipayobjects.com/zos/kitchen/2rXP4ZVHCo/pro-editor.webp)

目录

#### 技选

-   [\* 安装](https://npmcn.com/package/%40ant-design/pro-editor/#readme--installation)
    -   [由 Next.js 编译](https://npmcn.com/package/%40ant-design/pro-editor/#readme-compile-with-nextjs)
-   [使用量](https://npmcn.com/package/%40ant-design/pro-editor/#readme--usage)
-   [\* 特性](https://npmcn.com/package/%40ant-design/pro-editor/#readme--features)
    -   [增强ProEditor的功能](https://npmcn.com/package/%40ant-design/pro-editor/#readme-empowering-features-of-proeditor)
    -   [框架结构](https://npmcn.com/package/%40ant-design/pro-editor/#readme-framework-architecture)
-   [显示大小写](https://npmcn.com/package/%40ant-design/pro-editor/#readme--showcase)
-   [QQ 浏览器兼容性](https://npmcn.com/package/%40ant-design/pro-editor/#readme--browser-compatibility)
-   [地方发展](https://npmcn.com/package/%40ant-design/pro-editor/#readme-%EF%B8%8F-local-development)
-   [捐款](https://npmcn.com/package/%40ant-design/pro-editor/#readme--contributing)
-   [生态系统](https://npmcn.com/package/%40ant-design/pro-editor/#readme-%EF%B8%8F-ecosystem)

## \* 安装

> \[大  
> 这个软件包是 [仅限无害环境管理](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)。 。 。 .

要安装 `@ant-design/pro-editor`,运行以下命令:

```bash
$ pnpm install @ant-design/pro-editor
```

### 由 Next.js 编译

> \[注\]  
> 加上: `transpilePackages: ['@ant-design/pro-editor']` 改为 `next.config.js`。例如:

```js
const nextConfig = {
  transpilePackages: ['@ant-design/pro-editor', 'leva', 'zustand'],
};
```

  

## 使用量

```jsx
import { SmileOutlined } from '@ant-design/icons';
import { ActionIcon } from '@ant-design/pro-editor';

export default () => (
  <ActionIcon
    title={'Function button description'}
    icon={<SmileOutlined />}
    onClick={() => {
      alert('Trigger action');
    }}
  />
);
```

  

## \* 特性

> \[注\]
> 
> 前端组件库使发展发生了革命性的变化,通过规模级提高了效率,并提高了用户的经验。 然而,像Ant Design(antd)和ProComponents这样的图书馆一样成熟,人们可能会怀疑是否有创新的余地.

[![](https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=637603722&image_size=auto&color_scheme=dark)](https://next.ossinsight.io/widgets/official/compose-activity-trends?repo_id=637603722)

  

### 增强ProEditor的功能

> \[注\]
> 
> 我们设想ProEditor作为编辑组件的基础库,类似于蚂蚁,使开发者能够轻松地创建具有固有的优越用户经验的复杂的交互式组件. 之所以如此 `ProEditor`。 。 。 .

**我们的proEditor原则:**

-   🖐️ **直观编辑**: 支持多选取,脱选等自然用户互动,以及键盘快捷键,确保编辑体验平稳.
-   ✨ **默认修改**: 增强 Ant Design组件,以提供更好的用户体验并进行更多的抛光和完善.
-   🔧 **打开灵活性**:提供原子级能力,提供广泛的组件,钩子,以及用于广泛定制和灵活性的公用功能.

  

**编辑领域的UI框架和前端组件解决方案 :**

> \[TIP\]
> 
> ProEditor专注于扩大可行的限制,并增加开发者可用于构建精密,互动和以用户为中心的网络应用程序的各种工具. 例如:

-   📦 **可拖动面板**:允许可扩展和可移动面板,增强用户界面的交互性.
-   📝 **列列表**: 提供方便用户的可分类列表,通过列定义可以管理,简化了复杂的列表交互.
-   🎨 **自由加拿大语Name**:提供类似于Sketch或Figma等应用程序的可缩放画布,为用户提供巨大的创意设计空间.
-   🔍 **图标选择器**:一个与图标font相容的图标选择工具,使得将一大批图标融入到设计中更为容易.
-   👥 **在线协作**: 利用yjs和zustand store等技术整合多用户能力,实现实时协作编辑和互动.

  

### 框架结构

ProEditor的结构是为了有效地促进这些原则.

![](https://gw.alipayobjects.com/zos/kitchen/2F0sXx1uad/architecture.webp)

  

## 显示大小写

让我们展示一下ProEditor的一些签名组件:

| **可拖动面板** | **列列表** |
| --- | --- |
| 可换装和可移动面板 | 基于列定义的方便用户排序列表 |
| ![](https://gw.alipayobjects.com/zos/kitchen/sytsa4%26R%26d/1.gif) | ![](https://gw.alipayobjects.com/zos/kitchen/2DHhgqlXns/2.gif) |
| **自由加拿大语Name** | **图标选择器** |
| 类似于 Skech 或 Figma 的无限可缩放画布 | 一个与图标font相容的图标选择工具 |
| ![](https://gw.alipayobjects.com/zos/kitchen/KKcuxwR0Pz/3.gif) | ![](https://gw.alipayobjects.com/zos/kitchen/huuRPs3Kmk/4.gif) |
| **在线协作** |  |
| 由yjs和zustand商店包裹的多用户能力. |  |
| ![](https://gw.alipayobjects.com/zos/kitchen/SQaNFOJbK4/5.gif) |  |

  

## QQ 浏览器兼容性

> \[注\]
> 
> -   现代浏览器和Internet Explorer 11(与 [多元填充器](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11)(中文(简体) )
> -   [电子](https://www.electronjs.org/)

| [![edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![electron\_48x48](https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png)](http://godban.github.io/browsers-support-badges/) |
| --- | --- | --- | --- | --- |
| 边缘 | 上两个版本 | 上两个版本 | 上两个版本 | 上两个版本 |

  

## 地方发展

您可以使用 Github 代码空间进行在线开发 :

[![](https://github.com/codespaces/badge.svg)](https://codespaces.new/ant-design/pro-editor)

或者复制它用于本地发展:

```bash
$ git clone https://github.com/ant-design/pro-editor.git
$ cd pro-editor
$ pnpm install
$ pnpm dev
```

  

## 捐款

> \[大
> 
> 加入我们的合作生态系统。 你的贡献是我们项目的心跳。 这就是你如何成为我们充满生机的社区的一个组成部分:

-   **整合和创新**: 将Ant Design Pro, umi, ProEditor 纳入您的项目中. 你的用法和反馈对我们来说是宝贵的.
-   **声音你的洞察力**\-遇到故障了吗? 有问题吗? 你的观点很重要 通过提交来分享 [问题](https://github.com/ant-design/pro-editor/issues) 帮助我们增强用户体验.
-   **塑造未来**:有代码增强或功能创意? 我们邀请你提议 [拖动请求](https://github.com/ant-design/pro-editor/pulls) 并直接促进我们代码库的发展.

每个贡献,无论大小,都会被庆祝. 加入我们的任务,完善和提升开放源码企业UI组件的世界

[![](https://img.shields.io/badge/%E2%9D%A4%EF%B8%8F%20PR%20WELCOME-%E2%86%92-1677FF?labelColor=black&style=for-the-badge)](https://github.com/ant-design/pro-editor/pulls)

[

|   
![](https://contrib.rocks/image?repo=ant-design/pro-editor)  
  
 |
| --- |
| ![](https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=12101536&repo_ids=637603722&image_size=2x3&color_scheme=dark) | ![](https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=12101536&repo_ids=637603722&image_size=4x7&color_scheme=dark) |
| ![](https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=12101536&repo_ids=637603722&image_size=2x3&color_scheme=dark) |

](https://github.com/ant-design/pro-editor/graphs/contributors)  

## 生态系统

-   **[亲组件](https://github.com/ant-design/pro-components)** - 为企业级应用程序设计,像Pro一样使用蚂蚁设计.
-   **[编辑器](https://github.com/ant-design/pro-editor)** - 最终编辑器UI框架和组件.
-   **[前进](https://github.com/ant-design/pro-flow)** - React-Flow上的流程编辑框架基础.
-   **[ProChat 语录](https://github.com/ant-design/pro-chat)** - 用于快速构建 LLM 聊天界面的组件库.

  

* * *

#### 许可证

版权2023年至今 [亚足联](https://ant.design/) 打开 [蚂蚁数码](https://antdigital.com/)。 。 。 .  
这个项目是 [麻省理工学院](https://npmcn.com/package/%40ant-design/pro-editor/LICENSE) 有执照.

## 常见问题

### @ant-design/pro-editor 是什么？

QQ 轻量级编辑器 UI 框架

### 如何安装 @ant-design/pro-editor？

在项目目录运行 npm install @ant-design/pro-editor，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：antd（\>=5）、react（\>=18）、react-dom（\>=18）、antd-style（\>=3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ant-design/pro-editor 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ant-design/pro-editor 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ant-design/pro-editor 可以商用吗？

@ant-design/pro-editor 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ant-design/pro-editor 的下载量有多少？

根据 npm 官方下载统计，@ant-design/pro-editor 在 2026/10/06 – 2026/11/04 这 30 天内被下载 6,739 次，日均约 225 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ant-design/pro-editor 还在维护吗？

最新版本 1\.3\.0 发布于 2024/09/09（2 年前）；至今共发布 115 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/05/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。