# @looohz/rich-editor

> Vue 3 富文本编辑器组件 — 支持 WYSIWYG、Markdown、分屏预览三模式，支持 Word、URL 和本地视频导入。

[![npm version](https://img.shields.io/npm/v/@looohz/rich-editor)](https://www.npmjs.com/package/@looohz/rich-editor)
[![license](https://img.shields.io/npm/l/@looohz/rich-editor)](./LICENSE)

## 安装

```bash
npm install @looohz/rich-editor
```

## 快速开始

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { RichEditor } from '@looohz/rich-editor'
import '@looohz/rich-editor/style.css'

const content = ref('# Hello World')
</script>

<template>
  <RichEditor v-model="content" />
</template>
```

## 渲染已保存内容

编辑器的 `v-model` 保存为 Markdown 字符串，可用 `ContentRenderer` 在页面上渲染。

```vue
<script setup lang="ts">
import { ContentRenderer } from '@looohz/rich-editor'
import '@looohz/rich-editor/style.css'

const savedContent = '# Hello World'
</script>

<template>
  <ContentRenderer :model-value="savedContent" />
</template>
```

## 特性

- **三种编辑模式**：WYSIWYG / Markdown / 分屏预览，一键切换
- **多源导入**：从 `.docx` Word 文件或任意 URL 导入内容
- **媒体上传**：在 WYSIWYG、Markdown 和分屏模式中导入图片与视频
- **多格式导出**：Markdown、HTML、纯文本
- **主题定制**：CSS 变量驱动，支持暗色模式
- **TypeScript**：完整类型定义
- **轻量**：Vue 3 peerDependency，不重复打包

## 文档

更多用法见本仓库 `docs/` 目录。

## License

MIT
