用 GooGle Antigravity IDE 编写的原生JS轻量级加载速度极快的富文本编辑器。

WellCMS 3.0 会集成这个编辑器，后期还会再集成一个及其相似 Notion 功能的编辑器 editor.js，是一款开源的编辑器，我也不需要再造轮子，跟 Notion 相似度达到90%以上。

WELLRTE 富文本编辑器文档

1. 简介 (Introduction)

WellRTE 是一款基于原生 JavaScript (Vanilla JS) 和 Tailwind CSS 构建的现代化富文本编辑器。它旨在提供类似 Notion 的流畅写作体验，同时保持极轻量级的体积和高性能。它内置了丰富的 Markdown 支持、社交化功能（提及、话题）、以及针对移动端深度优化的交互体验。

2. 核心功能 (Features)

2.1 文本编辑与排版

  • 基础格式：支持加粗、斜体、下划线、删除线、链接、清除格式。
  • 段落样式：支持 H1 - H6 各级标题、段落 (P)、引用模块 (Blockquote)。
  • 列表系统：支持有序列表 (Ordered List) 和无序列表 (Unordered List)。
  • 对齐方式：左对齐、居中对齐、右对齐。
  • 字体系统：
    • 字体选择：内置 24 种常用中西文字体（如微软雅黑、宋体、Arial、Times New Roman 等）。
    • 字号控制：支持 12px 至 72px 的精准像素级字号调整。

2.2 Markdown 与快捷输入

  • Markdown 语法支持：
    • 输入 ## 自动转换为 H2。
    • 输入 - 或 * 自动转换为列表。
    • 输入 > 自动转换为引用。
    • 输入 --- 自动转换为分割线。
    • 输入 `code` 转换为行内代码。
    • 输入 **text** 转换为粗体。
    • 支持表格语法粘贴与渲染。
  • Slash 命令 (/)：
    • 输入 / 即可唤起全功能快捷菜单。
    • 支持键盘上下键选择、回车确认。
    • 菜单包含所有区块类型、对齐方式、字体、字号、媒体插入等功能。
    • 高级交互：支持按分类浏览（基础、列表、对齐、字体、字号），具备智能屏幕边缘检测，确保菜单永远在可视区域内。

2.3 多媒体与交互

  • 图片处理：
    • 支持本地图片拖拽上传。
    • 支持剪贴板图片直接粘贴。
    • 支持远程图片粘贴自动检测。
  • 代码块：支持多行代码块 (pre)，具有独立的样式和滚动条。
  • 表格：支持可视化的行列选择器插入表格。

2.4 社交化功能 (Social Features)

  • @提及 (Mentions)：输入 @ 唤起用户搜索菜单（支持异步加载）。
  • #话题 (Hashtags)：输入 # 唤起话题搜索菜单。
  • Emoji 表情：内置高性能 Emoji 选择器，支持最近使用记录。
  • 统计功能：实时显示字数统计及预计阅读时间。
  • 自动存稿：光标停止行为2秒自动存稿。

2.5 移动端与响应式

  • 深度适配：针对移动端触摸事件 (touchend) 进行了专门优化，解决点击延迟和焦点丢失问题。
  • 布局优化：工具栏支持横向滚动，Slash 菜单智能判断弹出方向（自动左/右偏移），防止溢出屏幕。
  • 外观模式：完美支持深色模式 (Dark Mode)，随系统或 Tailwind 配置自动切换。