321 lines
9.0 KiB
Markdown
321 lines
9.0 KiB
Markdown
# 分屏编辑器使用说明
|
||
|
||
## 📌 概述
|
||
|
||
分屏编辑器是一个支持实时预览的富文本编辑器组件，完美解决了您需要边编辑边查看效果的需求。支持三种显示模式：编辑、预览、分屏。
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 1. 访问演示页面
|
||
|
||
在浏览器中访问：`http://localhost:8080/zh/splitEditorDemo` （假设您的项目运行在8080端口）
|
||
|
||
### 2. 三种显示模式
|
||
|
||
#### 📝 编辑模式
|
||
- 只显示编辑器，专注于内容编写
|
||
- 点击工具栏中的"编辑"按钮激活
|
||
|
||
#### 👀 预览模式
|
||
- 只显示预览效果，方便查看最终结果
|
||
- 点击工具栏中的"预览"按钮激活
|
||
|
||
#### 🔀 分屏模式（推荐）
|
||
- **左边编辑，右边实时预览**
|
||
- 所见即所得，完美解决圆点在预览时才显示的问题
|
||
- 点击工具栏中的"分屏"按钮激活
|
||
|
||
## ✨ 圆点功能使用
|
||
|
||
### 方法一：使用专用按钮
|
||
1. 在分屏模式下，点击编辑器面板头部的"插入圆点"按钮
|
||
2. 或者在富文本编辑器的工具栏中找到"• 圆点"按钮
|
||
3. 圆点将自动插入到光标位置
|
||
|
||
### 方法二：直接输入
|
||
在编辑器中直接输入：`• 您的内容`
|
||
|
||
### 方法三：列表功能
|
||
使用编辑器的无序列表功能，会自动生成带圆点的列表
|
||
|
||
## 🎯 圆点列表示例
|
||
|
||
```
|
||
• ALEO矿工必须质押一定数量的ALEO代币
|
||
• 否则将无法提交PoW工作量证明(即算力)
|
||
• 质押金额直接影响挖矿收益
|
||
```
|
||
|
||
## 📋 组件使用方法
|
||
|
||
### 在Vue页面中使用
|
||
|
||
```vue
|
||
<template>
|
||
<div>
|
||
<!-- 使用分屏编辑器组件 -->
|
||
<SplitScreenEditor
|
||
ref="splitEditor"
|
||
v-model="content"
|
||
:height="500"
|
||
:options="editorOptions"
|
||
@change="handleContentChange"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import SplitScreenEditor from '@/components/SplitScreenEditor.vue'
|
||
|
||
export default {
|
||
components: {
|
||
SplitScreenEditor
|
||
},
|
||
data() {
|
||
return {
|
||
content: '',
|
||
editorOptions: {
|
||
height: 500,
|
||
// 其他TinyMCE配置选项
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
handleContentChange(content) {
|
||
console.log('内容变化:', content);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 组件属性
|
||
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| `value` | String | '' | 编辑器内容（支持v-model） |
|
||
| `height` | String/Number | 500 | 编辑器高度 |
|
||
| `options` | Object | {} | TinyMCE配置选项 |
|
||
|
||
### 组件事件
|
||
|
||
| 事件 | 参数 | 说明 |
|
||
|------|------|------|
|
||
| `input` | content | 内容变化时触发（v-model） |
|
||
| `change` | content | 内容变化时触发 |
|
||
| `publish` | publishResult | 发布操作完成时触发，包含发布结果 |
|
||
|
||
#### publish 事件参数详解
|
||
|
||
**发布成功时：**
|
||
```javascript
|
||
{
|
||
success: true,
|
||
documentId: 123, // 后端返回的文档ID
|
||
title: "文档标题",
|
||
content: "文档内容",
|
||
wordCount: 1250,
|
||
timestamp: "2024-01-01T12:00:00Z",
|
||
response: { /* 后端完整响应数据 */ }
|
||
}
|
||
```
|
||
|
||
**发布失败时：**
|
||
```javascript
|
||
{
|
||
success: false,
|
||
error: "错误信息",
|
||
title: "文档标题",
|
||
content: "文档内容"
|
||
}
|
||
```
|
||
|
||
### 组件方法
|
||
|
||
| 方法 | 参数 | 说明 |
|
||
|------|------|------|
|
||
| `getContent()` | - | 获取编辑器内容 |
|
||
| `setContent(content)` | content | 设置编辑器内容 |
|
||
| `clear()` | - | 清空编辑器内容 |
|
||
|
||
## 🛠️ 高级功能
|
||
|
||
### 全屏编辑
|
||
- 点击"全屏"按钮进入全屏编辑模式
|
||
- 按ESC键退出全屏
|
||
|
||
### 字数统计
|
||
- 实时显示当前内容的字符数量
|
||
- 自动排除HTML标签
|
||
|
||
### 复制HTML
|
||
- 在预览区域点击"复制HTML"按钮
|
||
- 将生成的HTML代码复制到剪贴板
|
||
|
||
### 使用指南
|
||
- 点击工具栏中的"使用指南"按钮
|
||
- 展开详细的TinyMCE功能说明
|
||
- 包含快捷键、操作步骤、专用功能介绍
|
||
- 支持展开/收起切换
|
||
|
||
### 发布功能
|
||
- 点击工具栏中的"发布"按钮
|
||
- 自动验证内容是否为空
|
||
- **两步式发布流程**：
|
||
1. 输入文档标题（自动生成默认标题）
|
||
2. 选择文档类型（其他、服务条款、API文档、挖矿教程）
|
||
- **直接调用后端接口**：使用 `addDocument` API 发布到文档管理系统
|
||
- **完整的状态反馈**：发布中状态、成功通知、错误处理
|
||
- **自动清理**：发布成功后自动清空本地草稿
|
||
- **事件回调**：触发 `publish` 事件，返回发布结果和文档ID
|
||
|
||
### 自动保存
|
||
- 演示页面包含2秒防抖的自动保存功能
|
||
- 自动保存到浏览器本地存储
|
||
- 页面刷新后自动恢复草稿
|
||
|
||
## 🎨 自定义样式
|
||
|
||
### 编辑器样式
|
||
可以通过`options.content_style`自定义编辑器内容区域的样式：
|
||
|
||
```javascript
|
||
editorOptions: {
|
||
content_style: `
|
||
body {
|
||
font-family: 'Arial', sans-serif;
|
||
font-size: 16px;
|
||
line-height: 1.6;
|
||
}
|
||
ul, ol {
|
||
padding-left: 24px;
|
||
}
|
||
li {
|
||
margin: 6px 0;
|
||
}
|
||
`
|
||
}
|
||
```
|
||
|
||
### 预览区域样式
|
||
预览区域的样式已经过优化，确保与编辑器样式保持一致。
|
||
|
||
## 🔧 配置选项
|
||
|
||
### 推荐的TinyMCE配置
|
||
|
||
```javascript
|
||
editorOptions: {
|
||
height: 500,
|
||
menubar: false,
|
||
plugins: [
|
||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
|
||
'preview', 'anchor', 'searchreplace', 'visualblocks', 'code',
|
||
'fullscreen', 'insertdatetime', 'media', 'table', 'help', 'wordcount'
|
||
],
|
||
toolbar: [
|
||
'undo redo | formatselect | bold italic underline strikethrough',
|
||
'forecolor backcolor | alignleft aligncenter alignright alignjustify',
|
||
'bullist numlist outdent indent | link image table',
|
||
'code preview fullscreen | removeformat help'
|
||
].join(' | '),
|
||
language: 'zh_CN',
|
||
branding: false,
|
||
resize: false
|
||
}
|
||
```
|
||
|
||
## 📱 响应式支持
|
||
|
||
组件完全支持响应式设计：
|
||
- 移动设备上工具栏自动调整布局
|
||
- 分屏模式在小屏幕上自动变为垂直布局
|
||
- 字体大小和间距自动适配
|
||
|
||
## 🐛 常见问题
|
||
|
||
### Q: 圆点在编辑时看不到？
|
||
A: 这是正常现象，请切换到分屏模式，右侧预览区域会实时显示圆点效果。
|
||
|
||
### Q: 如何自定义编辑器工具栏？
|
||
A: 通过`options.toolbar`配置项自定义工具栏按钮。
|
||
|
||
### Q: 支持哪些文件格式？
|
||
A: 组件输出标准HTML格式，支持所有富文本编辑器的常见功能。
|
||
|
||
### Q: 如何集成到现有项目？
|
||
A: 复制`SplitScreenEditor.vue`组件到您的项目中，然后按照上述方法使用即可。
|
||
|
||
## 📚 TinyMCE 功能详解
|
||
|
||
### 📝 基础文本编辑
|
||
- **撤销/重做**: `Ctrl + Z` / `Ctrl + Y` - 快速回退或恢复编辑操作
|
||
- **字体样式**: `Ctrl + B` 粗体 | `Ctrl + I` 斜体 | `Ctrl + U` 下划线
|
||
|
||
### 🎨 格式与样式
|
||
- **段落格式**: 标题1-6、段落、预格式化文本
|
||
- **颜色设置**: 字体颜色和背景颜色选择
|
||
- **文本对齐**: 左对齐、居中、右对齐、两端对齐
|
||
|
||
### 📋 列表与缩进
|
||
- **无序列表（圆点）**: 创建带圆点的项目列表
|
||
- **有序列表（数字）**: 创建带数字编号的项目列表
|
||
- **缩进控制**: `Tab` 增加缩进 | `Shift + Tab` 减少缩进
|
||
|
||
### 🔗 插入与媒体
|
||
- **链接插入**: `Ctrl + K` - 插入超链接
|
||
- **图片插入**: 支持上传图片或插入图片链接
|
||
- **表格插入**: 创建和编辑表格数据
|
||
|
||
### 🛠️ 高级功能
|
||
- **搜索替换**: `Ctrl + F` 查找 | `Ctrl + H` 替换
|
||
- **源码编辑**: 查看和编辑HTML源代码
|
||
- **全屏编辑**: `F11` 或点击全屏按钮
|
||
|
||
### ⌨️ 快捷键汇总
|
||
| 功能 | 快捷键 | 说明 |
|
||
|------|--------|------|
|
||
| 撤销 | `Ctrl + Z` | 撤销上一步操作 |
|
||
| 重做 | `Ctrl + Y` | 重做操作 |
|
||
| 粗体 | `Ctrl + B` | 加粗选中文字 |
|
||
| 斜体 | `Ctrl + I` | 倾斜选中文字 |
|
||
| 下划线 | `Ctrl + U` | 给选中文字加下划线 |
|
||
| 插入链接 | `Ctrl + K` | 为选中文字插入超链接 |
|
||
| 全屏 | `F11` | 进入/退出全屏模式 |
|
||
| 查找 | `Ctrl + F` | 搜索文本内容 |
|
||
| 替换 | `Ctrl + H` | 查找并替换文本 |
|
||
|
||
## 🔄 更新日志
|
||
|
||
### v1.2.0 (LATEST!)
|
||
- ✅ **完整发布功能** - 直接调用 addDocument 接口发布文档
|
||
- ✅ **文档类型选择** - 支持4种文档类型分类（其他、服务条款、API文档、挖矿教程）
|
||
- ✅ **两步式发布流程** - 标题输入 + 类型选择
|
||
- ✅ **发布状态管理** - 加载中、成功、失败状态处理
|
||
- ✅ **智能默认值** - 自动生成文档标题和时间戳
|
||
- ✅ **演示编辑器** - 在使用指南中直接体验功能
|
||
|
||
### v1.1.0
|
||
- ✅ **使用指南功能** - 点击显示详细的TinyMCE功能说明
|
||
- ✅ **发布按钮** - 一键发布内容，支持事件回调
|
||
- ✅ **完整快捷键说明** - 涵盖所有常用快捷键
|
||
- ✅ **功能分类展示** - 按类别组织功能说明
|
||
- ✅ **响应式指南面板** - 适配各种屏幕尺寸
|
||
|
||
### v1.0.0
|
||
- ✅ 支持三种显示模式（编辑/预览/分屏）
|
||
- ✅ 专用圆点插入功能
|
||
- ✅ 实时预览效果
|
||
- ✅ 全屏编辑支持
|
||
- ✅ 字数统计功能
|
||
- ✅ HTML复制功能
|
||
- ✅ 响应式设计
|
||
- ✅ 自动保存机制
|
||
|
||
## 📞 技术支持
|
||
|
||
如有任何问题或建议，请联系开发团队。
|
||
|
||
---
|
||
|
||
> **提示**: 建议在分屏模式下使用编辑器，这样可以实时看到圆点和其他格式化效果，大大提升编辑体验！ |