角向平分编辑器
[大 ^v3. 0. 使用 Tiptap v3。如果需要留在 Tiptap v2 上,请使用版本
^2.4.1。 。 。 .
现代定制的Angular 丰富文本编辑器,使用 提示。 。 。 .
高性能Angular WYSIWYG编辑. 建于顶上 提示 由本地人提供动力 信号 它的外观是 一种被打磨的 专业设计 感觉,我认为, 干净和现代的盒子. 然而,我努力保持它完全的自定义性:你可以轻松地配置编辑器,调整UI,甚至嵌入你自己的Angular组件作为交互式节点.
* 特性
- ⚡ 基于信号: 与
ChangeDetectionStrategy.OnPush。 。 。 . - 📋 目录: 名称式浮起或内置 TOC 组件,并有相位适应的破折叠.
- 🗂️ 全球编辑登记册(单位:千美元)
AteEditorRegistry用于跟踪、控制和在多编辑实例之间切换的服务. - 🧩 角结点: 将任意角元件嵌入为交互式编辑器节点.
- ⌨️ UX 第一个: 斜线命令( S)
/)和有上下文意识的泡泡菜单(类似名词). - ✅ 任务列表: GFM 风格核对表,带有嵌入子任务, a
/斜线命令,可选工具栏按钮和可选复选框 CSS 令牌. - 📊 表格功率: 具有单元格选择,合并,分列排序和过滤的高级管理.
- 🖼️ 媒体:图像再大小,自动压缩,以及自定义上传器.
- 🌍 内建 i18n:支持英文,法文,德文,意大利文,巴西葡萄牙文,西班牙文出道.
- 📎 办公室准备:从"Word"和"Excel"上清除粘贴,控制了其他应用程序的保存内容(
paste颜色 亮点,transformHTML钩子). - 🎨 高度定制:易地配置工具栏,气泡菜单和斜线命令项.
- 🛠️ 广泛:轻松地添加自定义的Tiptap扩展和反应状态计算器.
- 🧩 角 18+ 辅助:使用Angular 18的信号并进行再造以达到最佳性能.
* 安装
npm install @flogeez/angular-tiptap-editor
将样式添加到您的 angular.json数字 :
{
"styles": [
...
"node_modules/@flogeez/angular-tiptap-editor/styles/index.css",
...
]
}
图标
图书馆运送它作为内部SVG使用的每一个图标(材料符号, Apache 2. 0):不需要图标字体.
用于 任意 在自己的工具栏项目,泡泡菜单或斜线命令中的材料符号名称,也加载字体. 未注册姓名归根结底:
"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(...)数字 :
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数字 :
export const appConfig: ApplicationConfig = {
providers: [provideAteEditor()],
};
2. 基本用途
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. 反应形式一体化
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] 输入 :
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 参考 用于输入和配置选项的完整列表.
高级特性
图像上传处理器
通过提供自定义上传器(S3, Cloudinary等)来避免 Base64 :
同样的处理器用于所有基于文件的图像插入:工具栏拾取器,拖放和剪贴板粘贴.
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。见 认证后图像。 。 。 .
高级能力
寻找更深入的融合模式? 探索我们 高级使用指南数字 :
- 🧩 自定义角节点: 将任意角元件嵌入为交互式编辑器节点.
- 📋 目录:反应性,口号式起浮或内置TOC.
- 🗂️ 全球编辑登记册:通过DI跟踪和控制多编辑实例.
- ⚡ 程序控制: 远程执行命令
AteEditorCommandsService。 。 。 . - ⌨️ 自定义斜线命令: 添加自定义动作和模板到
/菜单. - 🛠️ Tiptap 扩展和状态计算器:扩展计划与自定义反应状态.
i18n 和 & 🎨型
- 语文英文(简体中文)
en),法语fr),德语(de页:1it),葡萄牙语(pt页:1es) 内置. 自动检测浏览器语言( 如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"]。 。 。 .
发展
npm install
npm run build:lib # Build library
npm start # Run demo
许可证
麻省理工学院执照 - 看 自由主义 详细文件.
捐款
欢迎捐款! 见 捐款额 设立、核查和公约.
链接
- 📖 提示文档
- 📦 国家防范机制一揽子计划
- 📖 现场直播
- 🐛 报告问题/专题要求
由 Q 制作 弗洛盖兹