42 lines
1.3 KiB
Markdown
42 lines
1.3 KiB
Markdown
# ArticleEditor 文章编辑器
|
||
|
||
以 `Article` 为数据模型，按正文类型切换纯文本、Markdown 与富文本三种编辑形态。
|
||
|
||
## 基础用法
|
||
|
||
:::preview 基础用法 || 切换正文类型会同时替换内容，提交时读取完整文章
|
||
|
||
demo-preview=../demos/article-editor/basic.vue
|
||
|
||
:::
|
||
|
||
## 何时使用
|
||
|
||
需要在一套表单里同时支持多种正文格式时使用。切换只改 `contentType`，上层不需要关心具体编辑器。
|
||
|
||
## 数据模型
|
||
|
||
组件只约束三个字段，其他字段会原样保留：
|
||
|
||
| 字段 | 说明 |
|
||
| --- | --- |
|
||
| `contentType` | 正文类型，支持 `TEXT`、`MARKDOWN`、`TIP_TAP`（`TIPTAP` 为兼容写法）。 |
|
||
| `content` | 正文内容，随类型分别是纯文本、Markdown 源码或 HTML。 |
|
||
| `attachmentList` | 附件列表，元素至少包含 `id`、`name`、`url`。 |
|
||
|
||
## 附件与媒体
|
||
|
||
`uploadImage`、`uploadVideo` 负责上传，`resolveAttachmentUrl`、`resolveTempUrl` 负责把附件标识换成可访问地址。四个回调都可选，不传时对应能力自动降级。
|
||
|
||
## 提交内容
|
||
|
||
编辑过程中抛出的是实时值，提交时建议调用 `submit()`，它会等待富文本里未完成的上传再返回最终数据：
|
||
|
||
```ts
|
||
const article = await editorRef.value?.submit();
|
||
```
|
||
|
||
## API
|
||
|
||
<api-table name="ArticleEditor" />
|