lizixuan
/
m2pool_web_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity
m2pool_web_frontend/mining-pool/README_SplitEditor.md

9.0 KiB
Raw Blame History

分屏编辑器使用说明

📌 概述

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

🚀 快速开始

1. 访问演示页面

在浏览器中访问：http://localhost:8080/zh/splitEditorDemo （假设您的项目运行在8080端口）

2. 三种显示模式

📝 编辑模式

  • 只显示编辑器，专注于内容编写
  • 点击工具栏中的"编辑"按钮激活

👀 预览模式

  • 只显示预览效果，方便查看最终结果
  • 点击工具栏中的"预览"按钮激活

🔀 分屏模式（推荐）

  • 左边编辑，右边实时预览
  • 所见即所得，完美解决圆点在预览时才显示的问题
  • 点击工具栏中的"分屏"按钮激活

✨ 圆点功能使用

方法一：使用专用按钮

  1. 在分屏模式下，点击编辑器面板头部的"插入圆点"按钮
  2. 或者在富文本编辑器的工具栏中找到"• 圆点"按钮
  3. 圆点将自动插入到光标位置

方法二：直接输入

在编辑器中直接输入：• 您的内容

方法三：列表功能

使用编辑器的无序列表功能，会自动生成带圆点的列表

🎯 圆点列表示例

• ALEO矿工必须质押一定数量的ALEO代币
• 否则将无法提交PoW工作量证明(即算力)
• 质押金额直接影响挖矿收益

📋 组件使用方法

在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 事件参数详解

发布成功时：

{
  success: true,
  documentId: 123,           // 后端返回的文档ID
  title: "文档标题",
  content: "文档内容", 
  wordCount: 1250,
  timestamp: "2024-01-01T12:00:00Z",
  response: { /* 后端完整响应数据 */ }
}

发布失败时：

{
  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自定义编辑器内容区域的样式：

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配置

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

📞 技术支持

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

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