syncfusion-react-modern-rich-text-editor

用途

Syncfusion React Modern Rich Text Editor（RichTextEditorUIComponent，包名 @syncfusion/ej2-react-richtexteditor-ui）是一款用于 React 应用的所见即所得（WYSIWYG）富文本编辑器组件，用于创建、编辑和格式化富文本内容，支持行内格式与块级格式。

主要能力

工具栏：可配置的工具栏项与布局类型（Auto、Expanded、Scrollable、MultiRow）、位置及浮动行为；支持通过 actionId 和 itemClicked 路由自定义工具栏按钮；运行时可通过 updateToolbarItems() 更新。
快捷工具栏：针对文本选区、链接、图片、表格的上下文弹出菜单。
斜杠命令：输入 / 触发弹窗，包含块、行内和媒体条目，并支持自定义项；需通过 <Inject services={[SlashCommand]} /> 注入 SlashCommand 模块。
格式：14 种行内格式、字体与颜色、引用、代码块、提示框（Info、Success、Warning、Error、Note 五种变体）、可折叠段落与标题。
列表：编号列表、项目符号列表、交互式清单列表，支持多种编号格式、符号样式与复选框形状。
表格：插入表格、行列操作、表头、单元格背景与对齐、调整大小。
链接：粘贴自动链接、协议规范化、协议白名单、目标配置。
图片：本地与 URL 插入，Blob 或 Base64 保存格式，尺寸与显示模式，以及服务端上传流程（含上传事件）。
命令 API：commands() 流式构建器，用于以编程方式执行格式化命令。
事件：生命周期（created、destroyed）、焦点（focus、blur）、内容变更（change）、可取消的操作前钩子（actionBegin、actionComplete）、图片上传事件等。

使用方式

基础用法：

import * as React from 'react';
import { RichTextEditorUIComponent } from '@syncfusion/ej2-react-richtexteditor-ui';
import './App.css';

function App() {
    return (
        <RichTextEditorUIComponent
            placeholder='Type something.'
        />
    );
}

export default App;

需引入 Tailwind 3 主题样式：

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/richtexteditor-ui/index.css';

读取内容：

const [value, setValue] = React.useState('');

<RichTextEditorUIComponent
    value={value}
    onChange={(e: any) => setValue(e.value)}
/>

通过命令 API 执行格式化：

const editorRef = React.useRef<RichTextEditorUIComponent>(null);

const makeBold = () => {
    (editorRef.current as any).commands().bold().apply();
};

启用斜杠命令：

import { RichTextEditorUIComponent, Inject, SlashCommand } from '@syncfusion/ej2-react-richtexteditor-ui';

<RichTextEditorUIComponent
    slashCommandSettings={{ enable: true, items: ['Paragraph', 'Heading 1', 'Blockquote'] }}
>
    <Inject services={[SlashCommand]} />
</RichTextEditorUIComponent>

关键属性包括 value、valueFormat（'html' 或 'json'，默认 'json'）、placeholder、enableAutoSave、saveInterval、toolbarSettings、quickToolbarSettings、slashCommandSettings、imageSettings、linkSettings、tableSettings、listSettings、fontFamily、fontSize、fontColor 与 backgroundColor。

适用场景

内容管理系统（结构化块内容、可配置工具栏、服务端图片管线）、长文档撰写（提示框、折叠区块、代码块、表格）、笔记应用（格式化工具栏、清单、键盘优先导航）、表单富文本输入（受控值、自动保存）、链接与媒体工作流（远程上传端点、认证上传、协议受限链接）。

限制

资料未提供该组件的授权与收费方式、浏览器兼容性、包体积和对 React 版本的具体要求等信息，暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制