当前位置：首页 > news >正文

前端面试：富文本里面，是如何做到划词的？

news 来源：原创 2025/5/2 9:44:53

实现富文本中的“划词”功能，通常涉及到文本的选择、用户交互和相应的操作（例如加粗、改变颜色等）。以下是一些实现思路和常用技术，可以帮助你在富文本编辑器中实现划词功能。

1. 实现文本选择

在富文本编辑器中，用户通过鼠标划动选择文本。JavaScript 提供了一些 API 来处理文本选择：

window.getSelection()：这个方法可以获取当前用户选中的文本范围。
Range 对象：创建一个 Range 对象，可以对选中的文本进行具体的操作。

2. 处理文本选择的基本步骤

下面是实现划词功能的基本步骤：

1. 监听鼠标事件

在富文本编辑器的容器上添加鼠标事件监听器，例如 mousedown、mouseup 和 mousemove。

const editor = document.getElementById('editor'); 



editor.addEventListener('mouseup', handleMouseUp);

2. 获取选中的文本

在 handleMouseUp 事件处理函数中，使用 window.getSelection() 来获取用户选择的文本。

function handleMouseUp() { 

    const selection = window.getSelection(); 

    const selectedText = selection.toString(); 



    if (selectedText) { 

        console.log('选中的文本:', selectedText); 

        // 调用其他操作函数，比如显示上下文菜单 

        showContextMenu(selection); 

    } 

}

3. 显示操作菜单

可以根据需要实现一个上下文菜单（例如工具栏），让用户可以对选中的文本进行操作。这可以使用 CSS 和 JavaScript 创建一个小的浮动菜单。

function showContextMenu(selection) { 

    const contextMenu = document.getElementById('context-menu'); 

    const range = selection.getRangeAt(0); 

    const rect = range.getBoundingClientRect(); 



    contextMenu.style.top = `${rect.bottom + window.scrollY}px`; 

    contextMenu.style.left = `${rect.left + window.scrollX}px`; 

    contextMenu.style.display = 'block'; 

}

4. 执行文本操作

用户点击上下文菜单中的某一选项后，可以对选中的文本进行操作。例如，如果用户选择“加粗”，可以将选中的文本包裹在 <strong> 标签中。

document.getElementById('bold').addEventListener('click', function() { 

    const selection = window.getSelection(); 

    if (selection.rangeCount > 0) { 

        const range = selection.getRangeAt(0); 

        const boldNode = document.createElement('strong'); 

        range.surroundContents(boldNode); 

        hideContextMenu(); // 隐藏菜单 

    } 

});

3. 注意