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 的图片处理器（未来版本会添加）
|
|||
|
|
|