TGSQ MD编辑器 — 所见即所得

TGSQ MD编辑器 — 简介与开发初衷

undefined 开发原因

在社区或常规的Markdown编辑场景中，常见的编辑器多为源码视图，要求用户手动输入 #、、链接 等符号来格式化文本。对于不熟悉Markdown语法的用户，这种体验门槛较高，编辑效率较低，且无法直观地看到最终排版效果。为此，我们开发了 TGSQ MD编辑器，一款纯前端的所见即所得Markdown编辑器，目标是将“写源码”转变为“像Word一样排版”，同时保留一键导出标准 .md 文件的能力。     2.功能介绍· 🎯 所见即所得编辑    所有文本格式（加粗、斜体、标题、列表、引用、代码块、链接、图片、表格等）均在编辑区即时渲染为最终排版效果，无需切换到预览模式。
· 📊 强化的表格交互
  · 点击“表格”按钮或拖拽网格选择器快速插入表格。
  · 拖拽多选单元格，支持 Shift/Ctrl 扩展选区。
  · 双击编辑单元格内容，Escape 退出编辑模式。
  · 选中单元格后出现上下文工具栏，可合并/拆分单元格、插入或删除行列、删除表格。
· 🖼️ 图片插入与上传
  · 可手动输入图片URL，并自定义描述（alt文本）。
  · 支持本地上传图片（对接 img.api.aa1.cn 接口，表单字段 image），上传成功后自动填充URL和描述。
· 💻 代码块与行内代码
    提供独立的“行内代码”和“代码块”按钮，生成的代码块采用 GitHub 风格（浅灰背景、细边框），转换为MD时自动使用标准    围栏语法。
· 📤 一键导出MD
    工具栏右侧提供查看MD源码、复制MD 和 下载.md文件 功能。所有富文本内容均可转换为合规的Markdown文本，表格、列表、链接等均能正确转化。
· ✨ 现代化UI与快捷键
    采用 Font Awesome 图标、柔性布局和极简设计。支持常用快捷键（Ctrl+B/I/U/K/Z/Y）以及 Ctrl+Shift+C/S 快速复制/下载MD。核心原理编辑器的实现基于 HTML5 contenteditable 属性，使普通 <div> 变成可直接富文本编辑的区域。所有格式化操作利用浏览器原生 document.execCommand() 命令（如 bold, insertHTML, formatBlock 等）完成，保证兼容性和选区管理的稳定性。

与社区“源码视图”编辑器的根本区别在于：

· 源码视图编辑器展示的是纯文本的Markdown标记，用户需要脑补渲染效果。
· TGSQ MD编辑器则在编辑过程中直接呈现最终样式，将“标记”隐藏，通过HTML元素（如 <h1>、<strong>、<table>）承载格式信息。当用户需要导出为 .md 文件时，再通过自定义的 HTML‑to‑Markdown 转换引擎 深度遍历 DOM 树，将所见元素准确还原为标准Markdown语法。

这种设计既保留了Markdown的可移植性，又极大降低了普通用户的书写成本，实现了“编辑即排版”的流畅体验。Screenshot_20260812_082803_net.waterfox.android.release