# @flogeez/angular-tiptap-editor 中文文档

规范地址：https://npmcn.com/package/%40flogeez/angular-tiptap-editor/

版本：3\.14\.1
npm 元数据更新时间：2026-11-10T15:52:42.787Z
中文译文更新时间：2026-11-14T23:43:13.866Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：4.8 MB，211 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：tippy\.js ^6\.3\.7，@tiptap/pm ^3\.31\.4，@tiptap/core ^3\.31\.4，@angular/core \>=18\.0\.0，@angular/forms \>=18\.0\.0，@angular/common \>=18\.0\.0，@tiptap/markdown ^3\.31\.4，@tiptap/extensions ^3\.31\.4，@tiptap/starter-kit ^3\.31\.4，@tiptap/extension-list ^3\.31\.4，@tiptap/extension-color ^3\.31\.4，@tiptap/extension-table ^3\.31\.4，@tiptap/extension-heading ^3\.31\.4，@tiptap/extension-highlight ^3\.31\.4，@tiptap/extension-paragraph ^3\.31\.4，@tiptap/extension-subscript ^3\.31\.4，@tiptap/extension-text-align ^3\.31\.4，@tiptap/extension-text-style ^3\.31\.4，@tiptap/extension-superscript ^3\.31\.4，@fontsource/material-symbols-outlined ^5\.0\.0，@intevation/tiptap-extension-office-paste ^0\.1\.2
- 首次发布：2025-08-20T13:07:25.136Z
- 最新版本发布：2026-11-10T15:52:42.484Z
- 近 30 天下载量：14237（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：84（近 12 个月 70 个）

## 中文简介

Angular (18+) 的现代定制丰富文本编辑器,由 Tiptap 所建造,并具有完整的国际化支持功能

## 安装

```sh
npm install @flogeez/angular-tiptap-editor
```

也可以使用：`pnpm add @flogeez/angular-tiptap-editor`、`yarn add @flogeez/angular-tiptap-editor`、`bun add @flogeez/angular-tiptap-editor`

## README

![/ATE — Angular Tiptap Editor](https://npmcn.com/package/%40flogeez/angular-tiptap-editor/assets/logo/svg/logo-keys.svg)

# 角向平分编辑器

> \[大 **^v3. 0. 使用 Tiptap v3**。如果需要留在 Tiptap v2 上,请使用版本 `^2.4.1`。 。 。 .

现代定制的Angular 丰富文本编辑器,使用 **提示**。 。 。 .

[![NPM Version](https://img.shields.io/npm/v/@flogeez/angular-tiptap-editor?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@flogeez/angular-tiptap-editor) [![Demo](https://img.shields.io/badge/Demo-Live-brightgreen?style=for-the-badge&logo=google-chrome)](https://flogeez.github.io/angular-tiptap-editor/) [![Try it on StackBlitz](https://img.shields.io/badge/Try%20it-StackBlitz-blue?style=for-the-badge&logo=stackblitz)](https://stackblitz.com/edit/angular-tiptap-editor)

高性能Angular WYSIWYG编辑. 建于顶上 **提示** 由本地人提供动力 **信号** 它的外观是 一种被打磨的 专业设计 感觉,我认为, 干净和现代的盒子. 然而,我努力保持它完全的自定义性:你可以轻松地配置编辑器,调整UI,甚至嵌入你自己的Angular组件作为交互式节点.

![Angular Tiptap Editor demo: slash commands, Markdown shortcuts, Notion mode, dark mode, block controls, bubble menu and table of contents](https://npmcn.com/package/%40flogeez/angular-tiptap-editor/assets/demo/demo.gif)

* * *

## \* 特性

-   ⚡ **基于信号**: 与 `ChangeDetectionStrategy.OnPush`。 。 。 .
-   📋 **目录**: 名称式浮起或内置 TOC 组件,并有相位适应的破折叠.
-   🗂️ **全球编辑登记册**(单位:千美元) `AteEditorRegistry` 用于跟踪、控制和在多编辑实例之间切换的服务.
-   🧩 **角结点**: 将任意角元件嵌入为交互式编辑器节点.
-   ⌨️ **UX 第一个**: 斜线命令( S)`/`)和有上下文意识的泡泡菜单(类似名词).
-   ✅ **任务列表**: GFM 风格核对表,带有嵌入子任务, a `/` 斜线命令,可选工具栏按钮和可选复选框 CSS 令牌.
-   📊 **表格功率**: 具有单元格选择,合并,分列排序和过滤的高级管理.
-   🖼️ **媒体**:图像再大小,自动压缩,以及自定义上传器.
-   🌍 **内建 i18n**:支持英文,法文,德文,意大利文,巴西葡萄牙文,西班牙文出道.
-   📎 **办公室准备**:从"Word"和"Excel"上清除粘贴,控制了其他应用程序的保存内容(`paste`颜色 亮点, `transformHTML` 钩子).
-   🎨 **高度定制**:易地配置工具栏,气泡菜单和斜线命令项.
-   🛠️ **广泛**:轻松地添加自定义的Tiptap扩展和反应状态计算器.
-   🧩 **角 18+ 辅助**:使用Angular 18的信号并进行再造以达到最佳性能.

## \* 安装

```bash
npm install @flogeez/angular-tiptap-editor
```

将样式添加到您的 `angular.json`数字 :

```json
{
  "styles": [
    ...
    "node_modules/@flogeez/angular-tiptap-editor/styles/index.css",
    ...
  ]
}
```

### 图标

图书馆运送它作为内部SVG使用的每一个图标([材料符号](https://fonts.google.com/icons), Apache 2. 0):不需要图标字体.

用于 **任意** 在自己的工具栏项目,泡泡菜单或斜线命令中的材料符号名称,也加载字体. 未注册姓名归根结底:

```json
"node_modules/@fontsource/material-symbols-outlined/index.css",
```

图书馆图标按键是按其所作所为,而不是按其绘图: `bold`, (中文(简体) ), `heading1`, (中文(简体) ), `bulletList`, (中文(简体) ), `link`, (中文(简体) ), `unsetLink`, (中文(简体) ), `addRowBefore`, (中文(简体) ), `mergeCells`, (中文(简体) ), `deleteTable`, (中文(简体) ), `undo`... (见 `AteIconName` 类型。 覆盖其中任何一个,使用内置 `/ATE` 中风设置( e)`ATE_STROKE_ICONS`),或用 `provideAteIcons` 应用拖带( t)`app.config.ts` 编号 : `main.ts`),或运行时 `inject(AteIconRegistry).register(...)`数字 :

```typescript
providers: [
  provideAteEditor(),
  provideAteIcons(ATE_STROKE_ICONS), // or pass a custom AteIcons map:
  provideAteIcons({
    bold: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="…"/></svg>', // full <svg>: any viewBox, keeps its own fill/stroke
    rocket: '<path d="…"/>', // or inner markup: Material Symbols viewBox (0 -960 960 960), filled with currentColor
  }),
];
```

自定义工具栏项目、泡泡菜单项目和斜线命令可以使用 `icon: "rocket"`图标大小 `1em`启用 `currentColor` 满分 `<svg>` (单位:千美元)`fill` 或者说 `stroke`)所以它跟随文本颜色,就像库图标一样. 使用 `<ate-icon name="…" />` 把它们变成你自己的部件.

## QQ 快速启动

### 1\. 全球设置

初始化库于 `app.config.ts`数字 :

```typescript
export const appConfig: ApplicationConfig = {
  providers: [provideAteEditor()],
};
```

### 2\. 基本用途

```typescript
import { AngularTiptapEditorComponent } from "@flogeez/angular-tiptap-editor";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [AngularTiptapEditorComponent],
  template: `<angular-tiptap-editor
    [content]="content"
    (contentChange)="onContentChange($event)" />`,
})
export class ExampleComponent {
  content = "<p>Hello World!</p>";
  onContentChange(html: string) {
    console.log(html);
  }
}
```

### 3\. 反应形式一体化

```typescript
import { FormControl, ReactiveFormsModule } from "@angular/forms";

@Component({
  standalone: true,
  imports: [AngularTiptapEditorComponent, ReactiveFormsModule],
  template: ` <angular-tiptap-editor [formControl]="contentControl" /> `,
})
export class FormComponent {
  contentControl = new FormControl("<p>Initial content</p>");
}
```

## QQ 配置

编辑器完全可以通过 `[config]` 输入 :

```typescript
editorConfig: AteEditorConfig = {
  locale: "fr",
  placeholder: "Commencez à rédiger...",
  toolbar: { ...ATE_DEFAULT_TOOLBAR_CONFIG, highlight: true },
  slashCommands: { heading1: true, table: true },
};
```

| 投入 | 类型 | 说明 |
| --- | --- | --- |
| `[config]` | `AteEditorConfig` | 全局配置对象( 建议) |
| `[content]` | `string` | 初始 HTML 内容 |
| `[editable]` | `boolean` | 只读切换 |
| `[disabled]` | `boolean` | 已禁用切换 |

_见 [API 参考](https://npmcn.com/package/%40flogeez/angular-tiptap-editor/API.md) 用于输入和配置选项的完整列表._

## 高级特性

### 图像上传处理器

通过提供自定义上传器(S3, Cloudinary等)来避免 Base64 :

同样的处理器用于所有基于文件的图像插入:工具栏拾取器,拖放和剪贴板粘贴.

```typescript
uploadHandler: AteImageUploadHandler = ctx => {
  return this.http.post<any>("/api/upload", ctx.file).pipe(map(res => ({ src: res.url })));
};
```

### 图像 URL 解析器

认证背后的图像 ? 使用 `[imageSrcResolver]` (或 `imageSrcResolver` 内 `[config]`以显示不同的 URL( 例如 a) `blob:` 以符号获取),而文档保存原始 `src`。见 [认证后图像](https://npmcn.com/package/%40flogeez/angular-tiptap-editor/ADVANCED.md#images-behind-authentication-imagesrcresolver)。 。 。 .

* * *

### 高级能力

寻找更深入的融合模式? 探索我们 **[高级使用指南](https://npmcn.com/package/%40flogeez/angular-tiptap-editor/ADVANCED.md)**数字 :

-   🧩 **[自定义角节点](https://npmcn.com/package/%40flogeez/angular-tiptap-editor/ADVANCED.md#-embedding-angular-components-angular-nodes)**: 将任意角元件嵌入为交互式编辑器节点.
-   📋 **[目录](https://npmcn.com/package/%40flogeez/angular-tiptap-editor/ADVANCED.md#-table-of-contents-component-atetableofcontentscomponent)**:反应性,口号式起浮或内置TOC.
-   🗂️ **[全球编辑登记册](https://npmcn.com/package/%40flogeez/angular-tiptap-editor/ADVANCED.md#-global-editor-registry-ateeditorregistry)**:通过DI跟踪和控制多编辑实例.
-   ⚡ **[程序控制](https://npmcn.com/package/%40flogeez/angular-tiptap-editor/ADVANCED.md#-programmatic-control-with-ateeditorcommandsservice)**: 远程执行命令 `AteEditorCommandsService`。 。 。 .
-   ⌨️ **[自定义斜线命令](https://npmcn.com/package/%40flogeez/angular-tiptap-editor/ADVANCED.md#%EF%B8%8F-custom-slash-commands)**: 添加自定义动作和模板到 `/` 菜单.
-   🛠️ **[Tiptap 扩展和状态计算器](https://npmcn.com/package/%40flogeez/angular-tiptap-editor/ADVANCED.md#%EF%B8%8F-custom-tiptap-extensions)**:扩展计划与自定义反应状态.

## i18n 和 & 🎨型

-   **语文**英文(简体中文)`en`),法语`fr`),德语(`de`页:1`it`),葡萄牙语(`pt`页:1`es`) 内置. 自动检测浏览器语言( 如 `pt-BR` 或者说 `es-MX` 以他们的语言表达决心。 设定 `locale` 在一个编辑器(输入或配置)上只翻译该实例,对其他编辑器或全球语言没有影响。 以 `AteI18nService.addTranslations()`。 。 。 .
-   **样式**:通过 CSS 变量自定义(例如, `--ate-primary`, (中文(简体) ), `--ate-border-radius`还有更多.
    -   链接如下 `--ate-primary` 财务报告和审定财务报表 `--ate-primary-hover` 默认。 设定 `--ate-link-color` 财务报告和审定财务报表 `--ate-link-hover-color` 在不改变主色调的情况下给出它们自己的颜色.
-   **黑暗模式**: 通过添加本地工作 `.dark` 或者说 `[data-theme="dark"]`。 。 。 .

## 发展

```bash
npm install
npm run build:lib  # Build library
npm start          # Run demo
```

## 许可证

麻省理工学院执照 - 看 [自由主义](https://npmcn.com/package/%40flogeez/angular-tiptap-editor/LICENSE) 详细文件.

## 捐款

欢迎捐款! 见 [捐款额](https://npmcn.com/package/%40flogeez/angular-tiptap-editor/CONTRIBUTING.md) 设立、核查和公约.

## 链接

-   📖 [提示文档](https://tiptap.dev/)
-   📦 [国家防范机制一揽子计划](https://www.npmjs.com/package/@flogeez/angular-tiptap-editor)
-   📖 [现场直播](https://flogeez.github.io/angular-tiptap-editor/)
-   🐛 [报告问题/专题要求](https://github.com/FloGeez/angular-tiptap-editor/issues)

由 Q 制作 [弗洛盖兹](https://github.com/FloGeez)

## 常见问题

### @flogeez/angular-tiptap-editor 是什么？

Angular \(18\+\) 的现代定制丰富文本编辑器,由 Tiptap 所建造,并具有完整的国际化支持功能

### 如何安装 @flogeez/angular-tiptap-editor？

在项目目录运行 npm install @flogeez/angular-tiptap-editor，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：tippy\.js（^6\.3\.7）、@tiptap/pm（^3\.31\.4）、@tiptap/core（^3\.31\.4）、@angular/core（\>=18\.0\.0）、@angular/forms（\>=18\.0\.0）、@angular/common（\>=18\.0\.0）、@tiptap/markdown（^3\.31\.4）、@tiptap/extensions（^3\.31\.4）、@tiptap/starter-kit（^3\.31\.4）、@tiptap/extension-list（^3\.31\.4）、@tiptap/extension-color（^3\.31\.4）、@tiptap/extension-table（^3\.31\.4）、@tiptap/extension-heading（^3\.31\.4）、@tiptap/extension-highlight（^3\.31\.4）、@tiptap/extension-paragraph（^3\.31\.4）、@tiptap/extension-subscript（^3\.31\.4）、@tiptap/extension-text-align（^3\.31\.4）、@tiptap/extension-text-style（^3\.31\.4）、@tiptap/extension-superscript（^3\.31\.4）、@intevation/tiptap-extension-office-paste（^0\.1\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @flogeez/angular-tiptap-editor 支持 TypeScript 吗？

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

### @flogeez/angular-tiptap-editor 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @flogeez/angular-tiptap-editor 可以商用吗？

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

### @flogeez/angular-tiptap-editor 的下载量有多少？

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

### @flogeez/angular-tiptap-editor 还在维护吗？

最新版本 3\.14\.1 发布于 2026/11/10（5 天前）；至今共发布 84 个版本，其中过去 12 个月发布了 70 个；首次发布于 2025/08/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。