syncfusion-javascript-block-editor

用途

Syncfusion JavaScript BlockEditor 是一个基于块架构的现代文本编辑器控件，用于在 Web 应用中创建、格式化与组织内容。内容被拆分为离散的块，每个块有明确的类型（段落、标题、列表、图片、代码等），便于结构化编辑与程序化操作。

主要能力

块类型：内置 14 种块类型，涵盖排版（段落、标题 1-4、引用、标注）、列表（项目符号、编号、清单）、表格、图片、代码、分隔线、可折叠段落/标题以及模板块。
内容模型：通过 BlockModel 与 ContentModel 进行结构化内容操作；ContentType 包括 Text、Link、Mention、Label。
交互体验：斜杠命令菜单（/）、块操作菜单（⋮）、右键上下文菜单、内联格式化工具栏、块类型转换菜单，以及拖拽排序。
文本格式化：粗体、斜体、下划线、删除线、大小写转换、上下标、行内代码、字体颜色与背景高亮。
数据格式：支持以 HTML 或 JSON 导入/导出内容，便于存储与交换。
协作编辑：基于 Yjs（CRDT）实现实时多人编辑，支持在线状态、远程光标、文本选区叠加与版本历史（创建、列出、重命名、恢复、比较、导出、导入快照）。
扩展性：支持自定义块、命令、菜单项与模板。
无障碍：键盘导航、ARIA 属性与屏幕阅读器支持。
安全：HTML 清洗、HTML 编码（enableHtmlEncode）、XSS 防护、只读模式、粘贴时通过 deniedTags 控制。

使用方式

通过 npm 包 @syncfusion/ej2-blockeditor 安装，引入 CSS 主题（如 Tailwind3、Material、Bootstrap 等），然后初始化 BlockEditor 并调用 appendTo 渲染到指定容器。示例：

import { BlockEditor, BlockType, ContentType } from '@syncfusion/ej2-blockeditor';

const editor = new BlockEditor({
    width: '100%',
    height: '600px',
    blocks: [
        {
            id: 'heading-1',
            blockType: BlockType.Heading,
            properties: { level: 1 },
            content: [
                { contentType: ContentType.Text, content: 'Welcome to BlockEditor' }
            ]
        }
    ],
    enableDragAndDrop: true,
    enableHtmlSanitizer: true
});

editor.appendTo('#blockeditor');

常用方法包括：addBlock、removeBlock、moveBlock、updateBlock、getBlock、getBlockCount、getSelectedBlocks、selectBlock、selectAllBlocks、selectRange、setSelection、getRange、setCursorPosition、getDataAsHtml、getDataAsJson、parseHtmlToBlocks、renderBlocksFromJson、enableToolbarItems、disableToolbarItems、executeToolbarAction、focusIn、focusOut、print、refresh、dataBind、appendTo、destroy 等。

事件涵盖生命周期（created）、内容变更（blockChanged、selectionChanged）、焦点（focus、blur）、拖拽（blockDragStart、blockDragging、blockDropped）、粘贴（beforePasteCleanup、afterPasteCleanup）、文件上传（beforeFileUpload、fileUploading、fileUploadSuccess、fileUploadFailed）等。

协作编辑需注入 Collaboration 模块（版本历史需 VersionHistory 模块），配置 collaborationSettings（provider、adapter、enableAwareness、versionHistory），并选择 Yjs provider（如 y-websocket、y-webrtc、y-indexeddb、Hocuspocus、Liveblocks、PartyKit）。

适用场景

适用于需要在 Web 应用中嵌入结构化富文本编辑能力的场景，例如内容管理系统、文档编辑、笔记应用、博客/文章撰写、支持多人协作的编辑环境等。

限制

资料未提供具体的收费、价格、平台兼容性、性能指标或效果数据，暂未提供。使用前请以官方文档为准。

技能介绍

用途

主要能力

使用方式

适用场景

限制