# @appflowyinc/editor 中文文档

规范地址：https://npmcn.com/package/%40appflowyinc/editor/

版本：0\.1\.13
npm 元数据更新时间：2025-07-01T05:55:41.829Z
中文译文更新时间：2026-11-06T11:28:25.421Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40appflowyinc/editor
原文对照：https://npmcn.com/package/%40appflowyinc/editor/?lang=original
项目主页：https://github.com/AppFlowy-IO/AppFlowy-Web-Editor#readme
源码仓库：https://github.com/AppFlowy-IO/AppFlowy-Web-Editor

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

- 包体积（解压后）：1.2 MB，152 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：22 个
- peer 依赖：i18next ^22\.4\.10，i18next-resources-to-backend ^1\.2\.1，react ^18\.3\.1，react-dom ^18\.3\.1，react-i18next ^14\.1\.0，slate ^0\.112\.0，slate-history ^0\.110\.3，slate-react ^0\.112\.0
- 首次发布：2024-12-18T04:32:54.969Z
- 最新版本发布：2025-07-01T05:55:41.583Z
- 近 30 天下载量：9314（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：54（近 12 个月 0 个）

## 中文简介

Appflowy 网页编辑器

## 安装

```sh
npm install @appflowyinc/editor
```

也可以使用：`pnpm add @appflowyinc/editor`、`yarn add @appflowyinc/editor`、`bun add @appflowyinc/editor`

## README

# Appflowy 网页编辑器

一个现代编辑库,支持丰富的文本,markdown,和代码编辑.

## \* 特性

-   ++ 日/夜模式切换
-   \* 多种语文支助
-   \* 响应性设计
-   QQ 类型脚本支持
-   \* \* 丰富文本、减记和代码编辑
-   方便整合
-   还有更多!

## \* 安装

要安装 AppFlowy 网络编辑器, 请运行以下命令 :

```bash
npm install @appflowyinc/editor

# or

yarn add @appflowyinc/editor

# or

pnpm add @appflowyinc/editor
```

说明: 此软件包需要安装这些对等依赖 :

```
"peerDependencies": {
    "i18next": "^22.4.10",
    "i18next-resources-to-backend": "^1.2.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-i18next": "^14.1.0",
    "slate": "^0.112.0",
    "slate-history": "^0.110.3",
    "slate-react": "^0.112.0"
}
```

## QQ 快速启动

要使用 AppFlowy 网页编辑器,请导入 `Editor` 财务报告和审定财务报表 `EditorProvider` 从软件包的组件并包装您的应用程序

注:使用编辑器需要 `EditorProvider` 组件。 因此,每个 `Editor` 组件需要被包裹 由相应的 `EditorProvider`

```tsx

import { Editor, EditorProvider } from '@appflowyinc/editor';

const App = () => {
  return <EditorProvider>
    <Editor/>
  </EditorProvider>
};

export default App;
```

## QQ 自定义工具栏

AppFlowy Web编辑器提供了包含各种编辑内容选项的工具栏. 您可以自定义工具栏 传递 `ToolbarComponent` 给 `Editor` 组件.

```tsx
import { Editor, EditorProvider, FixedToolbar } from '@appflowyinc/editor';

const App = () => {
  return <EditorProvider>
    <Editor ToolbarComponent={FixedToolbar}/>
  </EditorProvider>;
};

export default App;
```

## QQ 应用数据

你可以来 `editor` 从 `useEditor` 钩并应用数据到编辑器中.

```tsx
import { Editor, EditorProvider, useEditor, NodeType } from '@appflowyinc/editor';

const App = () => {
  const editor = useEditor();

  useEffect(() => {
    editor.applyData({
      type: NodeType.Paragraph,
      delta: [
        {
          insert: 'Hello, World!',
        },
      ],
      children: []
    });

    // or apply markdown
    editor.applyMarkdown('# Hello, World!');
  }, []);

  return
  <Editor/>;
};

const Main = () => {
  return <EditorProvider>
    <App/>
  </EditorProvider>;
};

export default App;
```

## 主题切换

AppFlowy Web编辑器支持在光和暗模式之间切换主题. 您可以通过路过来自定义主题 页:1 `theme` 给 `Editor` 组件.

```tsx
import { Editor, EditorProvider } from '@appflowyinc/editor';

const App = () => {
  return <EditorProvider>
    <Editor theme={'dark'}/>
  </EditorProvider>;
};

export default App;
```

## 多语种使用

AppFlowy网络编辑器支持多种语言. 您可以通过 : `language` 向 页:1 `Editor` 组件.

```tsx

import { Editor, EditorProvider } from '@appflowyinc/editor';
// Optionally, you can import the language resources from the package
import zh from '@appflowyinc/editor/locales/zh-CN.json';

import hostI18n from 'i18next';

const App = () => {
  return <I18nextProvider i18n={hostI18n}>
    <EditorProvider>
      <Editor locale={{
        // The language code.
        lang: 'zh-CN',
        // Optionally, you can pass the language resources or let it use the default resources
        resources: zh,
      }}/>
    </EditorProvider>
  </I18nextProvider>;
};

export default App;
```

### 支持的语言

-   英语( en)
-   阿拉伯语( ar- SA)
-   加泰罗尼亚语( ca- ES)
-   中库尔德语( 克布- KU)
-   捷克语( cs- CZ)
-   德语( de- DE)
-   西班牙语( es- VE)
-   巴斯克语( eu- ES)
-   波斯语( 发)
-   法语( fr- CA)
-   法语( fr- FR)
-   希伯来语( 他)
-   匈牙利语( hu- HU)
-   印度尼西亚语( id- ID)
-   意大利语( It- IT)
-   日语( ja- JP)
-   韩语( ko- KR)
-   波兰语( pl- PL)
-   巴西葡萄牙语( pt- BR)
-   葡萄牙语( pt- PT)
-   俄语( ru- RU)
-   瑞典语( sv- SE)
-   泰语( 第- TH )
-   土耳其语( Tr- TR)
-   乌克兰语( uk- UA)
-   越南语( 六)
-   越南语( vi- VN)
-   简化中文(zh-CN)
-   传统汉语( zh- TW)

## • API

### 编辑器Props

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 主题 | `'light' | 'dark'` | `'light'` | 编辑器主题 |
| 语言 | `{ lang: string; resources?: Record<string, string> }` | \- 说吧 | 编辑器语言配置 |
| 仅读 | `boolean` | `false` | 编辑器是否只读 |
| 变化 | `(data: EditorData) => void` | \- 说吧 | 编辑器内容更改时召回 |
| 初次 数值 | `EditorData` | \- 说吧 | 初始编辑器内容 |
| 模式ZIndex | `number` | 第50条 | 编辑器模式 Z 索引 |
| 工具栏组件 | `FC` | \- 说吧 | 自定义工具栏组件 |

### 提供道具编辑器

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 儿童 | `ReactNode` | \- 说吧 | 儿童部分 |

### 编辑器数据

```ts
type EditorData = {
  type: NodeType;
  data: Record<string, any>;
  delta: DeltaOperation[];
  children: EditorData[];
};
```

### 节点Type

```ts

enum NodeType {
  Paragraph = 'paragraph',
  Heading = 'heading',
  NestedBlock = 'nested-block',
  Todo = 'todo_list',
  NumberedList = 'numbered_list',
  BulletedList = 'bulleted_list',
  Quote = 'quote',
}
```

### 钩子

#### 使用编辑器

返回带有控制编辑器的方法的编辑器实例.

```ts
const editor = useEditor();
```

| 方法 | 说明 |
| --- | --- |
| 应用程序数据 | 对编辑器应用数据 |
| 应用马克下沉 | 将标记降为编辑器 |

## 发展

指南

发展 模式

```

# Install dependencies

pnpm i

# Start development server

pnpm run dev

# Build library

pnpm run build

```

要在当地运行演示 :

```bash
pnpm install
pnpm run dev
```

打开 [http://localhost:5173/ (英语)](http://localhost:5173/) 使用浏览器查看结果. ![img.png](https://npmcn.com/package/%40appflowyinc/editor/img.png)

通过点击右上角的主题切换器来切换光和暗模式. ![img\_1.png](https://npmcn.com/package/%40appflowyinc/editor/img_1.png)

## 许可证

MIT 许可证

```

[]: # (END) README.md


```

## 常见问题

### @appflowyinc/editor 是什么？

Appflowy 网页编辑器

### 如何安装 @appflowyinc/editor？

在项目目录运行 npm install @appflowyinc/editor，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：i18next（^22\.4\.10）、i18next-resources-to-backend（^1\.2\.1）、react（^18\.3\.1）、react-dom（^18\.3\.1）、react-i18next（^14\.1\.0）、slate（^0\.112\.0）、slate-history（^0\.110\.3）、slate-react（^0\.112\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @appflowyinc/editor 支持 TypeScript 吗？

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

### @appflowyinc/editor 支持 ESM 还是 CommonJS？

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

### @appflowyinc/editor 可以商用吗？

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

### @appflowyinc/editor 的下载量有多少？

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

### @appflowyinc/editor 还在维护吗？

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