---
name: jjb-editor
description: 定义 JJB 富文本组件使用规范。在使用 Editor、jjb-react-admin-component/Editor 或富文本编辑器时使用。必须参考 MD/d.ts 文档。
---

# 通用业务组件使用规范

## 富文本组件

> **⚠️ 重要约束**：本章节所有组件必须严格参考 node_modules 中对应依赖包的 MD 文档或 d.ts 文件！不得猜测组件属性！

## 使用

```javascript
import Editor from '@cqsjjb/jjb-react-admin-component/Editor'
```

## 代码演示

```jsx
import React from 'react';
import { Form } from 'antd';
import Editor from '@cqsjjb/jjb-react-admin-component/Editor';

function App() {
  return (
    <Form>
      <Form.Item
        name="content"
        label="内容"
      >
        <Editor />
      </Form.Item>
    </Form>
  )
}
```

## API

| 属性                  | 说明                       | 类型                                    | 默认值                                    |
|---------------------|:-------------------------|:--------------------------------------|:--------------------------------------|
| bordered            | 是否要边框                    | `boolean`                              | false                                  |
| borderStyle         | 边框样式，`bordered`为`true`有效 | `string`                               | solid                                  |
| borderColor         | 边框颜色，`bordered`为`true`有效 | `string`                               | #e8e8e8                                |
| borderWidth         | 边框宽度，`bordered`为`true`有效 | `number`                               | 1                                      |
| borderRadius        | 边框圆角，`bordered`为`true`有效 | `number`                               | 2                                      |
| value               | 内容，受控                    | `string`                               | -                                      |
| mode                | 模式                       | `default` \| `simple`                  | default                                |
| height              | 高度                       | `string`                               | 300                                    |
| zIndex              | 层级                       | `string`                               | 1000                                   |
| disabled            | 是否禁用                     | `boolean`                              | false                                  |
| uploadUrl           | 上传地址                     | `string`                               | /attachment/files/upload-speed-simple |
| uploadFileName      | 上传文件名                    | `string`                               | file                                   |
| uploadImageFileSize | 图片上传大小，单位`byte`          | `number`                               | 5MB                                    |
| uploadVideoFileSize | 视频上传大小，单位`byte`          | `number`                               | 5MB                                    |
| uploadHeaders       | 上传请求头                    | `Record<string, string>`               | -                                      |
| uploadCustomRequest | 自定义上传                    | `(file: File) => Promise<string>`      | -                                      |
| placeholder         | 占位符                      | `string`                               | 请输入...                               |
| onBlur              | 失去焦点回调                   | `() => void`                           | -                                      |
| onFocus             | 获得焦点回调                   | `() => void`                           | -                                      |
| onChange            | 内容变化回调、受控                | `(value: string) => void`             | -                                      |
| ref                 | 实例                       | `React.Ref<EditorFC>`                  | -                                      |

## EditorFC

| 属性           | 说明        | 类型                      | 默认值 |
|--------------|:----------|:------------------------|:----|
| getEditorInstance | 获取编辑器实例 | `() => any`             | -   |
| getHtml      | 手动获取html | `() => string`          | -   |
| setHtml      | 手动设置html | `(html: string) => void` | -   |
| getPlainText | 手动获取纯文本 | `() => string`          | -   |