# rich-text-editor LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/rich-text-editor` 的使用方式。

## 模块定位

富文本编辑器，配置参考tinymce https://www.tiny.cloud/docs/tinymce/6

## 导入方式

```ts
import { RichTextEditor } from '@flatbiz/antd/rich-text-editor';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `* from ./rich-text-editor.jsx`
- `* from ./preview.jsx`
- `Preview`
- `RichTextEditor` - 富文本编辑器，配置参考tinymce https://www.tiny.cloud/docs/tinymce/6
- `RichTextEditorProps`
- `editorTemplates`
- `defaultVarStyle`
- `varStyles`

## 依赖的 antd 能力

`Image`、`message`

## Props / 配置要点

### RichTextEditorProps

- `height`（可选）：: number；设置高度，默认：500
- `onChange`（可选）：: (data?: string) => void
- `onUploadImage`（可选）：: (file: File) => Promise<string>；上传图片服务
- `imgPreview`（可选）：: boolean；图片点击预览
- `init`（可选）：: IAllProps['init'] & { img_ratio?: { min: number; max?: number; ratio: number }[]; paste_text_limit?: { limit: number; message: string; }; plugins_append?: st…；通过粘贴图片创建的img标签，显示压缩比例，此处min、max是和指图片宽度
- `onFullScreenChange`（可选）：: (state?: boolean) => void；点击全屏按钮回调
- `className`（可选）：: string

## 使用规则与行为

- 设置高度，默认：500
- 上传图片服务
- 图片点击预览
- 通过粘贴图片创建的img标签，显示压缩比例，此处min、max是和指图片宽度
- 粘贴文本大小限制
- 插件添加；自定义plugins后失效
- 工具栏添加；自定义toolbar后失效
- 点击全屏按钮回调
- 富文本编辑器，配置参考tinymce https://www.tiny.cloud/docs/tinymce/6 @param props @returns

## 基础示例

```tsx
import { RichTextEditor, type RichTextEditorProps } from '@flatbiz/antd/rich-text-editor';

const props: RichTextEditorProps = {
  // 按业务传入必要参数
};

<RichTextEditor {...props} />;
```

## 源码索引

- `src/rich-text-editor/index.ts`
- `src/rich-text-editor/preview/index.ts`
- `src/rich-text-editor/preview/preview.tsx`
- `src/rich-text-editor/rich-text-editor.tsx`
- `src/rich-text-editor/template.ts`
- `src/rich-text-editor/types.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/rich-text-editor` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。