73 lines
4.5 KiB
Markdown
73 lines
4.5 KiB
Markdown
|
---
|
||
|
|
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` | - |
|