# 分屏编辑器使用说明

## 📌 概述

分屏编辑器是一个支持实时预览的富文本编辑器组件，完美解决了您需要边编辑边查看效果的需求。支持三种显示模式：编辑、预览、分屏。

## 🚀 快速开始

### 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复制功能
- ✅ 响应式设计
- ✅ 自动保存机制

## 📞 技术支持

如有任何问题或建议，请联系开发团队。

---

> **提示**: 建议在分屏模式下使用编辑器，这样可以实时看到圆点和其他格式化效果，大大提升编辑体验！