188 lines
3.8 KiB
Markdown
188 lines
3.8 KiB
Markdown
# 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 的图片处理器（未来版本会添加）
|
||
|