# 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" />