schoolNews/schoolNewsWeb/src/components/text

RichTextComponent - 富文本编辑器组件

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

安装依赖

首先需要安装 Quill 依赖：

npm install quill
# 或
yarn add quill

基础使用

<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	失焦编辑器

使用示例

带字数统计

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

只读模式

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

禁用状态

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

错误状态

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

使用 ref 调用方法

<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 主题，并进行了一些定制。如需进一步定制样式，可以通过以下方式：

// 在你的样式文件中
: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 的图片处理器（未来版本会添加）