syncfusion-angular-blockeditor

Syncfusion Angular Block Editor 是 Syncfusion Angular UI 组件集合中的一个块级编辑器组件，适用于在 Angular 应用内构建类似现代内容管理系统的文档编辑体验。

【用途定位】 该组件面向需要在 Angular 应用中嵌入文档式、块结构化编辑器的场景，其工作方式以块为单位组织内容，而非传统的整片 HTML 文档流编辑。

【主要能力】

1. 块管理：可用段落、标题、列表、表格、代码、图片等多种块类型组合文档。
2. 文本格式化：支持加粗、斜体、下划线、删除线、颜色、高亮以及行内样式。
3. 高级菜单：提供斜杠命令、上下文菜单、行内工具栏和块操作菜单。
4. 事件与交互：对内容变更、选区变化、拖拽、粘贴等操作提供事件处理能力。
5. 内容管理：支持以 JSON、HTML 或 Markdown 导入导出，并提供序列化控制。
6. 编程接口：可通过方法以编程方式添加、删除、移动和更新块，并支持控制选区与光标位置、执行工具栏动作、聚焦/失焦、启用或禁用工具栏项以及打印内容。
7. 安全能力：内置 HTML 消毒与 XSS 防护，并支持粘贴清理规则与只读模式。
8. 协同编辑：基于 Yjs 支持多用户实时编辑，包含用户在线状态、远端光标与版本历史。
9. 工具栏与模板：斜杠命令和块操作菜单可配置分组，块、占位符和空状态可使用自定义模板。
10. 全球化与外观：支持多语言、RTL 语言和基于区域设置的键盘快捷键；支持主题、CSS 变量、响应式尺寸、只读模式和占位文本等界面定制。

【使用方式】

1. 安装依赖：npm install @syncfusion/ej2-angular-blockeditor
2. 在 Angular 组件中引入 BlockEditorModule，并在模板中使用 ejs-blockeditor 标签，例如设置 [height]="'500px'"。
3. 引入与主题匹配的样式包，例如 Material 3：npm install @syncfusion/ej2-material3-theme，并在 src/styles.css 中添加 @import '../node_modules/@syncfusion/ej2-material3-theme/styles/blockeditor/index.css';。组件也可通过 importProvidersFrom(BrowserModule) 或在 AppModule 的 imports 中加入 BlockEditorModule 完成接入。
4. 读取内容使用 getDataAsJson() 等方法，导出 HTML 使用 getDataAsHtml()。

【典型场景（依据资料中的示例模式）】 文档自动保存：监听 blockChanged 事件，在一段延迟后调用 getDataAsJson() 将内容保存到服务端，并更新保存状态提示。格式导出：通过按钮分别导出 JSON、HTML 或 Markdown 文件。

【限制与注意事项】 若编辑器不显示，需确认已在 main.ts 或全局样式中引入 CSS（资料列出了 ej2-base、ej2-inputs、ej2-popups、ej2-buttons、ej2-splitbuttons、ej2-navigations、ej2-dropdowns 以及 ej2-angular-blockeditor 的 material3 样式）。内容未保存时应使用 getDataAsJson() 获取内容；事件未触发时需确认组件为 standalone 且导入正确。

关于收费、价格、许可、支持的浏览器版本、性能指标等信息，资料中暂未提供。