写编辑器的人都知道，编辑器其实是个脾气很大的家伙。

它表面上很乖：你打字，它就显示；你换行，它就换行；你加粗，它就加粗。  
可你真要让它懂一点“人类直觉”，它就开始装傻。

人类写作时经常会做一件事：  
鼠标轻轻停在一句话上，眼睛扫一眼，心里想的是“就这句，给我圈出来”。  
编辑器听见了吗？它没听见。它只听得懂光标位置、选区起点终点、DOM Range、Slate Path 这种“机器语言”。

于是就有了这个故事：  
我们决定给 wangeditor 装一个小小的灵魂，让它学会观察鼠标的停顿，学会从停顿里猜出你的意图，然后把那一句话礼貌地递到你面前。

它的名字可以叫：  
鼠标悬停自动选中整句。

你把鼠标停住，它就像一个贴心的助理，悄悄走过去，帮你把那句完整的话选中。  
不打扰，不聒噪，等你需要的时候，它已经把事情办好。

---

## 事情是怎么发生的

最初的起因往往很简单：我们在做富文本编辑时，需要对句子做操作。

可能是要：

- 快速对某一句做改写或润色
- 触发某种悬停交互，比如弹出工具条、评论、标注
- 把一句话当作最小语义单位交给 AI 或其他处理逻辑
- 让用户不必精确拖拽选区就能命中“句子边界”

你会发现，拖拽选择是一个很费劲的动作。  
它要求你的手、眼、心都很配合，稍微滑一下，选区就多了；稍微少拖一点，又缺了。

而鼠标悬停是一种非常自然的表达：  
我停在这里，说明我对这里有兴趣。  
如果停了一小会儿，说明我不是路过，我是认真看它。

所以我们让编辑器学会一件事：  
当鼠标在同一个位置停留一段时间，就自动选中当前光标所在句子。

---

## 编辑器的两张脸：DOM 与 Slate

wangeditor 的底层是 Slate。  
Slate 很像编辑器的大脑，它以节点、路径、选区来思考世界。

DOM 则是编辑器的脸。  
鼠标、键盘、浏览器事件都是先碰到 DOM，再由编辑器转换成 Slate 能理解的东西。

要从鼠标悬停到选中一句话，中间必须完成一段翻译过程：

1. 鼠标告诉 DOM：我在这里
2. DOM 通过坐标算出：这里对应哪个文本位置
3. 把 DOM 的位置映射到 Slate：这是哪个 Slate 节点、哪个 Path
4. 从 Slate 取出该节点的纯文本
5. 以当前 offset 为中心，向左右寻找句子边界
6. 组装 Slate range，告诉编辑器：选中它
7. 编辑器聚焦，执行选择

这段翻译，就是我们这位小助理每天的工作。

---

## 代码登场：小助理的工作日志

下面这段代码，就是它的全套流程。它的性格很明确：只要你鼠标移动，它就盯着；只要你停下来，它就开始认真干活。

``` typescript
import { DomEditor, IDomEditor, SlateEditor, SlateTransforms } from '@wangeditor/editor'

function addMouseHoverListener(editor: IDomEditor) {
  const editorElement = DomEditor.toDOMNode(editor, editor)

  let hoverTimeout: NodeJS.Timeout | null = null // 用于存储定时器
  let lastHoveredOffset: { x: number; y: number } | null = null // 用于记录上次鼠标悬停的位置

  editorElement.addEventListener('mousemove', event => {
    const { clientX, clientY } = event

    // 如果鼠标位置与上次相同，直接返回
    if (lastHoveredOffset && lastHoveredOffset.x === clientX && lastHoveredOffset.y === clientY) {
      return
    }

    // 更新鼠标位置
    lastHoveredOffset = { x: clientX, y: clientY }

    // 清除之前的定时器
    if (hoverTimeout) {
      clearTimeout(hoverTimeout)
      hoverTimeout = null
    }

    // 设置新的定时器（延时 1 秒触发选中逻辑）
    hoverTimeout = setTimeout(() => {
      // @ts-ignore
      const domCaretPosition = document.caretPositionFromPoint?.(clientX, clientY)
      const domRange = domCaretPosition
        ? document.createRange()
        : document.caretRangeFromPoint?.(clientX, clientY)

      if (domCaretPosition && domRange) {
        domRange.setStart(domCaretPosition.offsetNode, domCaretPosition.offset)
        domRange.collapse(true)
      }

      if (!domRange) return

      const slateNode = DomEditor.toSlateNode(editor, domRange.startContainer)
      const slatePath = DomEditor.findPath(editor, slateNode)

      // 获取当前节点的内容
      const nodeText = SlateEditor.string(editor, slatePath)

      // 判断鼠标所在位置的偏移量
      const offset = domCaretPosition?.offset || domRange.startOffset

      // 支持的句子分隔符，包括中文标点符号和西文标点符号
      const sentenceSeparators = ['。', '？', '！', '.', '?', '!']

      // 找到句子的起点
      const sentenceStart = (() => {
        let start = 0
        for (const sep of sentenceSeparators) {
          const index = nodeText.lastIndexOf(sep, offset - 1)
          if (index !== -1) {
            start = Math.max(start, index + 1) // 分隔符后一个字符是句子的开头
          }
        }
        return start
      })()

      // 找到句子的终点
      const sentenceEnd = (() => {
        let end = nodeText.length
        for (const sep of sentenceSeparators) {
          const index = nodeText.indexOf(sep, offset)
          if (index !== -1) {
            end = Math.min(end, index + 1) // 分隔符本身是句子的结尾
          }
        }
        return end
      })()

      // 定义选区范围
      const range = {
        anchor: { path: slatePath, offset: sentenceStart },
        focus: { path: slatePath, offset: sentenceEnd },
      }

      // 确保编辑器被聚焦
      if (!editor.isFocused()) {
        editor.focus()
      }

      // 设置选区
      SlateTransforms.select(editor, range)
    }, 500) // 延时 1 秒
  })

  // 在鼠标移出编辑器时清除定时器
  editorElement.addEventListener('mouseleave', () => {
    if (hoverTimeout) {
      clearTimeout(hoverTimeout)
      hoverTimeout = null
    }
    lastHoveredOffset = null
  })
}

export default addMouseHoverListener
```
注册就是

``` typescript
import addMouseMoveListener from './auto-select-sentence'

addMouseMoveListener(editor)
```


它表面上很乖：你打字，它就显示；你换行，它就换行；你加粗，它就加粗。  可你真要让它懂一点“人类直觉”，它就开始装傻。

wangeditor实现鼠标悬停自动选中整句：给编辑器装上读心术

人类写作时经常会做一件事：  
鼠标轻轻停在一句话上，眼睛扫一眼，心里想的是“就这句，给我圈出来”。  
编辑器听见了吗？它没听见。它只听得懂光标位置、选区起点终点、DOM Range、Slate Path 这种“机器语言”。

技术副总监/联合创始人

前端

本文将介绍如何为wangeditor富文本编辑器开发“鼠标悬停自动选中整句”功能。该功能通过监听鼠标停留行为，智能识别句子边界，实现无需精确拖拽即可快速选中整句。文章详细解析了从DOM事件到Slate选区映射的技术实现，并提供了完整的TypeScript代码示例，帮助开发者提升编辑器的交互体验与操作效率。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

wangeditor实现鼠标悬停自动选中整句：给编辑器装上读心术-腾讯云开发者社区-腾讯云

wangeditor实现鼠标悬停自动选中整句：给编辑器装上读心术

wangeditor实现鼠标悬停自动选中整句：给编辑器装上读心术

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐