web-权限、文章

schoolNewsWeb/src/components/text/README.md

@@ -0,0 +1,187 @@
+# 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 的图片处理器（未来版本会添加）
+