# RichTextComponent - 富文本编辑器组件

基于 Quill 的 Vue 3 富文本编辑器组件。

## 安装依赖

首先需要安装 Quill 依赖：

```bash
npm install quill
# 或
yarn add quill
```

## 基础使用

```vue
<template>
  <RichTextComponent 
    v-model="content"
    placeholder="请输入内容..."
    height="300px"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { RichTextComponent } from '@/components/text';

const content = ref('<p>初始内容</p>');
</script>
```

## Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| modelValue | string | '' | 绑定值（HTML格式） |
| placeholder | string | '请输入内容...' | 占位文本 |
| height | string | '300px' | 编辑器高度 |
| disabled | boolean | false | 是否禁用 |
| readOnly | boolean | false | 是否只读 |
| maxLength | number | 0 | 最大字数限制（0表示无限制） |
| showWordCount | boolean | false | 是否显示字数统计 |
| error | boolean | false | 是否显示错误状态 |
| errorMessage | string | '' | 错误提示文本 |

## Events

| 事件名 | 参数 | 说明 |
|--------|------|------|
| update:modelValue | (value: string) | 内容变化时触发 |
| change | (value: string) | 内容变化时触发 |
| blur | () | 失去焦点时触发 |
| focus | () | 获得焦点时触发 |

## 方法

通过 ref 可以调用以下方法：

| 方法名 | 参数 | 返回值 | 说明 |
|--------|------|--------|------|
| getText | - | string | 获取纯文本内容 |
| getHTML | - | string | 获取HTML内容 |
| clear | - | void | 清空内容 |
| setContent | (content: string) | void | 设置内容 |
| focus | - | void | 聚焦编辑器 |
| blur | - | void | 失焦编辑器 |

## 使用示例

### 带字数统计

```vue
<RichTextComponent 
  v-model="content"
  :max-length="500"
  show-word-count
  placeholder="最多输入500字..."
/>
```

### 只读模式

```vue
<RichTextComponent 
  v-model="content"
  read-only
/>
```

### 禁用状态

```vue
<RichTextComponent 
  v-model="content"
  disabled
/>
```

### 错误状态

```vue
<RichTextComponent 
  v-model="content"
  error
  error-message="内容不能为空"
/>
```

### 使用 ref 调用方法

```vue
<template>
  <RichTextComponent ref="editorRef" v-model="content" />
  <button @click="handleGetText">获取文本</button>
  <button @click="handleClear">清空</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { RichTextComponent } from '@/components/text';

const editorRef = ref();
const content = ref('');

function handleGetText() {
  const text = editorRef.value?.getText();
  console.log('纯文本：', text);
}

function handleClear() {
  editorRef.value?.clear();
}
</script>
```

## 功能特性

### 富文本功能

- ✅ 标题（H1-H3）
- ✅ 字体大小
- ✅ 加粗、斜体、下划线、删除线
- ✅ 文字颜色、背景颜色
- ✅ 有序列表、无序列表
- ✅ 对齐方式（左、中、右、两端对齐）
- ✅ 插入链接、图片、视频
- ✅ 代码块、引用
- ✅ 清除格式

### 其他特性

- ✅ 字数统计
- ✅ 字数限制
- ✅ 只读模式
- ✅ 禁用状态
- ✅ 错误状态显示
- ✅ 自定义高度
- ✅ 响应式设计

## 样式定制

组件使用了 Quill 的 Snow 主题，并进行了一些定制。如需进一步定制样式，可以通过以下方式：

```scss
// 在你的样式文件中
:deep(.ql-editor) {
  // 定制编辑器内容区域样式
  font-family: '你的字体';
  font-size: 16px;
}

:deep(.ql-toolbar) {
  // 定制工具栏样式
  background: #your-color;
}
```

## 注意事项

1. 确保已安装 `quill` 依赖
2. 组件导入了 Quill 的样式文件，无需额外导入
3. v-model 绑定的是 HTML 格式的内容
4. 如需纯文本，使用 `getText()` 方法
5. 图片上传需要配置 Quill 的图片处理器（未来版本会添加）