重新整理仓库
This commit is contained in:
325
docs/富文本编辑器图片上传功能说明.md
Normal file
325
docs/富文本编辑器图片上传功能说明.md
Normal file
@@ -0,0 +1,325 @@
|
||||
# 富文本编辑器完整功能说明
|
||||
|
||||
## 🎯 功能概述
|
||||
|
||||
我已经成功为您的富文本编辑器实现了完整的图片、视频上传和一键排版功能，完美解决了弹窗被工具栏遮挡的问题：
|
||||
|
||||
### 图片功能
|
||||
1. **图片库选择**：从已上传的图片库中选择图片（推荐）
|
||||
2. **快速图片上传**：点击按钮快速上传新图片
|
||||
3. **直接上传**：拖拽或粘贴图片直接上传到OSS
|
||||
|
||||
### 视频功能
|
||||
4. **视频库选择**：从已上传的视频库中选择视频（推荐）
|
||||
5. **快速视频上传**：点击按钮快速上传新视频
|
||||
|
||||
### 排版功能
|
||||
6. **一键排版**：自动优化文章格式和排版（新增）
|
||||
|
||||
## ✨ 功能特点
|
||||
|
||||
### 1. 文件库选择功能（主要功能）
|
||||
- 点击工具栏"图片"按钮弹出文件库
|
||||
- 浏览所有已上传的图片
|
||||
- 支持按分组筛选
|
||||
- 支持搜索功能
|
||||
- 双击选择图片或点击"选择"按钮
|
||||
- 可在弹窗中直接上传新图片
|
||||
- 弹窗层级优化，不会被编辑器工具栏遮挡
|
||||
|
||||
### 2. 快速上传功能
|
||||
- 点击工具栏"上传"按钮快速选择文件上传
|
||||
- 文件大小限制：10MB
|
||||
- 支持所有常见图片格式
|
||||
- 上传成功后自动插入到编辑器
|
||||
|
||||
### 3. 直接上传功能
|
||||
- 支持拖拽图片到编辑器
|
||||
- 支持粘贴剪贴板中的图片
|
||||
- 自动上传到阿里云OSS
|
||||
- 文件大小限制：10MB
|
||||
|
||||
### 4. 视频库选择功能
|
||||
- 点击工具栏"视频"按钮弹出视频库
|
||||
- 浏览所有已上传的视频
|
||||
- 支持按分组筛选
|
||||
- 支持搜索功能
|
||||
- 双击选择视频或点击"选择"按钮
|
||||
- 可在弹窗中直接上传新视频
|
||||
- 弹窗层级优化，不会被编辑器工具栏遮挡
|
||||
|
||||
### 5. 快速视频上传功能
|
||||
- 点击工具栏"上传视频"按钮快速选择文件上传
|
||||
- 文件大小限制：100MB
|
||||
- 支持所有常见视频格式
|
||||
- 上传成功后自动插入到编辑器
|
||||
|
||||
### 6. 智能一键排版功能（人性化设计）
|
||||
- 点击工具栏"一键排版"按钮自动优化文章格式
|
||||
- **10大智能优化**：
|
||||
- 🏷️ **标题优化**：6级标题层次分明，H1带下划线
|
||||
- 📝 **段落优化**：中文首行缩进，合理行高间距
|
||||
- 🖼️ **图片优化**：居中显示，圆角阴影，响应式
|
||||
- 📋 **列表优化**：清晰缩进，合理间距
|
||||
- 💬 **引用优化**：左边框，渐变背景，斜体
|
||||
- 💻 **代码优化**：专业字体，语法高亮背景
|
||||
- 📊 **表格优化**：渐变表头，专业边框
|
||||
- 🔗 **链接优化**：悬停下划线效果
|
||||
- ➖ **分隔线优化**：渐变效果，优雅间距
|
||||
- 🧹 **内容清理**：清除冗余空白，规范结构
|
||||
- **人性化体验**：
|
||||
- 📱 友好提示：emoji 图标 + 温馨文案
|
||||
- ⏱️ 加载动画：让用户感受到系统在工作
|
||||
- 🎉 成功反馈：完成后的庆祝提示
|
||||
- 📊 优化统计：显示具体优化了哪些项目
|
||||
|
||||
### 7. 段落首行缩进切换功能（新增）
|
||||
- 点击工具栏"首行缩进"按钮切换段落缩进格式
|
||||
- **智能切换**：
|
||||
- 🔄 自动检测当前段落是否已有首行缩进
|
||||
- 📐 一键在有缩进/无缩进之间切换
|
||||
- 📝 批量处理文章中的所有段落
|
||||
- **中文优化**：
|
||||
- 标准缩进：使用 2em 的首行缩进
|
||||
- 智能识别：只对段落标签进行处理
|
||||
- 样式保持：保留段落的其他样式属性
|
||||
- **友好反馈**：
|
||||
- 添加缩进：`📐 已添加段落首行缩进`
|
||||
- 移除缩进：`📐 已移除段落首行缩进`
|
||||
|
||||
### 8. 栏目选择记忆功能（新增）
|
||||
- 智能记忆用户最后选择的栏目，避免重复选择
|
||||
- **智能记忆**：
|
||||
- 🧠 自动保存用户选择的栏目到本地存储
|
||||
- 🔄 新建文章时自动填入上次选择的栏目
|
||||
- 💾 跨会话保持，关闭浏览器后仍然有效
|
||||
- **优先级策略**：
|
||||
- 🎯 从栏目页面点击"添加文章"时，优先使用传入的栏目
|
||||
- 📝 其他情况下使用记忆的栏目
|
||||
- ✏️ 编辑文章时保持原有栏目不变
|
||||
- **用户体验**：
|
||||
- 🚀 减少重复操作，提升发布效率
|
||||
- 🎯 特别适合批量发布同类文章
|
||||
- 🔄 用户可随时更改，不强制绑定
|
||||
|
||||
### 3. 图片编辑功能
|
||||
- 图片对齐（左对齐、居中、右对齐）
|
||||
- 图片旋转（左转、右转）
|
||||
- 图片尺寸调整
|
||||
- 图片标题和描述
|
||||
- 图片样式类别：
|
||||
- 无样式
|
||||
- 响应式图片
|
||||
- 圆角图片
|
||||
- 圆形图片
|
||||
|
||||
## 🚀 使用方法
|
||||
|
||||
### 方法一：图片库选择（推荐）
|
||||
1. 点击编辑器工具栏的"图片"按钮
|
||||
2. 在弹出的图片库窗口中：
|
||||
- 浏览已上传的图片
|
||||
- 使用搜索框查找特定图片
|
||||
- 选择分组筛选图片
|
||||
- 双击图片进行选择，或点击"选择"按钮
|
||||
3. 如需上传新图片，点击"上传图片"按钮
|
||||
4. 选择完成后图片自动插入到编辑器
|
||||
|
||||
### 方法二：快速图片上传
|
||||
1. 点击编辑器工具栏的"上传"按钮
|
||||
2. 在文件选择对话框中选择图片文件
|
||||
3. 系统自动上传并插入图片
|
||||
|
||||
### 方法三：直接上传
|
||||
1. 在编辑器中定位光标到需要插入图片的位置
|
||||
2. 直接拖拽图片文件到编辑器，或
|
||||
3. 复制图片后在编辑器中粘贴（Ctrl+V）
|
||||
4. 系统自动上传并插入图片
|
||||
|
||||
### 方法四：视频库选择（推荐）
|
||||
1. 点击编辑器工具栏的"视频"按钮
|
||||
2. 在弹出的视频库窗口中：
|
||||
- 浏览已上传的视频
|
||||
- 使用搜索框查找特定视频
|
||||
- 选择分组筛选视频
|
||||
- 双击视频进行选择，或点击"选择"按钮
|
||||
3. 如需上传新视频，点击"上传视频"按钮
|
||||
4. 选择完成后视频自动插入到编辑器
|
||||
|
||||
### 方法五：快速视频上传
|
||||
1. 点击编辑器工具栏的"上传视频"按钮
|
||||
2. 在文件选择对话框中选择视频文件
|
||||
3. 系统自动上传并插入视频
|
||||
|
||||
### 方法六：智能一键排版（全新升级）
|
||||
1. 编写完文章内容后，点击编辑器工具栏的"一键排版"按钮
|
||||
2. 在弹出的排版样式选择窗口中选择合适的排版模板：
|
||||
- **📄 标准排版**：平衡的间距和字体，适合大多数文章
|
||||
- **📋 紧凑排版**：较小间距，适合长文章节省空间
|
||||
- **📖 舒适排版**：较大间距和行高，提升阅读体验
|
||||
- **🎓 学术排版**：严谨格式规范，适合学术论文
|
||||
3. 系统智能分析文章内容并应用专业排版格式
|
||||
4. **智能优化包括**：
|
||||
- **内容识别**：自动检测中英文比例，应用对应排版规则
|
||||
- **段落优化**：智能调整行高、间距、首行缩进
|
||||
- **标题层级**：统一H1-H6标题样式，支持紧凑/标准模式
|
||||
- **媒体美化**：图片视频添加圆角、阴影、居中效果
|
||||
- **列表优化**：完善缩进、间距、嵌套列表处理
|
||||
- **表格美化**：渐变表头、专业边框、悬停效果
|
||||
- **引用样式**：左边框、背景渐变、斜体效果
|
||||
- **代码优化**：专业字体、语法高亮背景
|
||||
- **链接美化**：悬停下划线效果
|
||||
- **内容清理**：清除冗余空白、规范结构
|
||||
5. 优化完成后显示详细的优化报告
|
||||
|
||||
## 🔧 技术实现
|
||||
|
||||
### 核心配置
|
||||
```javascript
|
||||
const config = ref({
|
||||
height: 620,
|
||||
paste_data_images: true,
|
||||
automatic_uploads: true,
|
||||
|
||||
// 自定义工具栏，添加图片和上传按钮
|
||||
toolbar: [
|
||||
'fullscreen preview code codesample emoticons custom_image_selector quick_upload media',
|
||||
'undo redo | forecolor backcolor',
|
||||
'bold italic underline strikethrough',
|
||||
'alignleft aligncenter alignright alignjustify',
|
||||
'outdent indent | numlist bullist',
|
||||
'formatselect fontselect fontsizeselect',
|
||||
'link charmap anchor pagebreak | ltr rtl'
|
||||
].join(' | '),
|
||||
|
||||
// 直接上传处理器
|
||||
images_upload_handler: (blobInfo, success, error) => {
|
||||
// 文件大小和类型检查
|
||||
// 上传到OSS
|
||||
// 错误处理
|
||||
},
|
||||
|
||||
// 自定义按钮设置
|
||||
setup: (editor) => {
|
||||
// 图片库选择按钮
|
||||
editor.ui.registry.addButton('custom_image_selector', {
|
||||
text: '图片',
|
||||
icon: 'image',
|
||||
tooltip: '插入图片（从图片库选择）',
|
||||
onAction: () => {
|
||||
// 打开图片库弹窗
|
||||
}
|
||||
});
|
||||
|
||||
// 快速图片上传按钮
|
||||
editor.ui.registry.addButton('quick_upload', {
|
||||
text: '上传',
|
||||
icon: 'upload',
|
||||
tooltip: '快速上传图片',
|
||||
onAction: () => {
|
||||
// 打开文件选择对话框
|
||||
}
|
||||
});
|
||||
|
||||
// 视频库选择按钮
|
||||
editor.ui.registry.addButton('custom_video_selector', {
|
||||
text: '视频',
|
||||
icon: 'embed',
|
||||
tooltip: '插入视频（从视频库选择）',
|
||||
onAction: () => {
|
||||
// 打开视频库弹窗
|
||||
}
|
||||
});
|
||||
|
||||
// 快速视频上传按钮
|
||||
editor.ui.registry.addButton('quick_video_upload', {
|
||||
text: '上传视频',
|
||||
icon: 'upload',
|
||||
tooltip: '快速上传视频',
|
||||
onAction: () => {
|
||||
// 打开视频文件选择对话框
|
||||
}
|
||||
});
|
||||
|
||||
// 一键排版按钮
|
||||
editor.ui.registry.addButton('auto_format', {
|
||||
text: '一键排版',
|
||||
icon: 'template',
|
||||
tooltip: '自动优化文章格式和排版',
|
||||
onAction: () => {
|
||||
// 执行排版优化
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 文件库集成
|
||||
- 使用现有的 `SelectData` 组件
|
||||
- 支持图片和视频类型筛选
|
||||
- 集成分组管理功能
|
||||
- 支持搜索和预览
|
||||
- 统一的文件管理界面
|
||||
|
||||
## 💡 优势
|
||||
|
||||
1. **解决层级问题**：文件库弹窗不再被编辑器工具栏遮挡
|
||||
2. **避免重复上传**：可以复用已上传的图片和视频
|
||||
3. **统一文件管理**：所有媒体文件在文件库中统一管理
|
||||
4. **多种上传方式**：满足不同使用场景和习惯
|
||||
5. **文件组织**：支持分组和搜索，便于管理大量文件
|
||||
6. **性能优化**：减少重复上传，节省存储空间
|
||||
7. **用户体验优化**：清晰的按钮分工，操作更直观
|
||||
8. **智能一键排版**：
|
||||
- 四种专业排版模板可选
|
||||
- 智能内容识别和分析
|
||||
- 全面的格式优化
|
||||
- 详细的优化反馈
|
||||
9. **专业排版效果**：
|
||||
- 符合中文排版习惯
|
||||
- 支持多种内容元素
|
||||
- 视觉层次清晰
|
||||
- 阅读体验优秀
|
||||
|
||||
## 🎨 样式定制
|
||||
|
||||
编辑器内的图片支持以下样式类：
|
||||
- `.img-responsive`：响应式图片（宽度100%）
|
||||
- `.img-rounded`：圆角图片
|
||||
- `.img-circle`：圆形图片
|
||||
|
||||
## 📝 注意事项
|
||||
|
||||
1. **文件大小限制**：
|
||||
- 图片文件大小限制为10MB
|
||||
- 视频文件大小限制为100MB
|
||||
2. **文件类型支持**：
|
||||
- 图片：支持所有常见图片格式（jpg, png, gif, webp等）
|
||||
- 视频：支持所有常见视频格式（mp4, avi, mov, wmv等）
|
||||
3. 上传失败时会显示错误提示
|
||||
4. 建议优先使用文件库选择功能，避免重复上传
|
||||
5. 文件库弹窗已优化层级，不会被编辑器工具栏遮挡
|
||||
6. 工具栏按钮分工明确：
|
||||
- "图片"按钮：从图片库选择
|
||||
- "上传"按钮：快速上传图片
|
||||
- "视频"按钮：从视频库选择
|
||||
- "上传视频"按钮：快速上传视频
|
||||
- "一键排版"按钮：自动优化文章格式
|
||||
|
||||
## 🔄 后续扩展
|
||||
|
||||
可以进一步扩展的功能：
|
||||
1. ✅ ~~支持视频文件选择~~ （已实现）
|
||||
2. ✅ ~~一键排版功能~~ （已实现）
|
||||
3. 图片压缩功能
|
||||
4. 图片水印添加
|
||||
5. 批量图片/视频上传
|
||||
6. 图片编辑功能（裁剪、滤镜等）
|
||||
7. 自定义排版模板
|
||||
8. 文章目录自动生成
|
||||
9. 文章字数统计
|
||||
10. 阅读时间估算
|
||||
|
||||
---
|
||||
|
||||
现在您可以在文章编辑页面体验这个完整的富文本编辑功能了！包括图片上传、视频上传和一键排版功能。
|
||||
Reference in New Issue
Block a user