富文本编辑器划词功能实现

在富文本编辑器中实现划词功能，通常涉及以下几个关键步骤和技术点：

1. 监听用户选择事件

首先，需要监听用户在富文本编辑器中的选择事件。这可以通过 selectionchange 事件来实现。当用户选择文本时，浏览器会触发这个事件。

document.addEventListener('selectionchange', () => {
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        // 处理选中的文本
    }
});

2. 获取选中的文本范围

使用 window.getSelection() 方法可以获取用户当前选中的文本范围。这个方法返回一个 Selection 对象，通过它可以获取选中的文本内容及其所在的 DOM 节点。

const selection = window.getSelection();
if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const selectedText = range.toString();
    console.log('选中的文本:', selectedText);
}

3. 高亮选中的文本

为了高亮选中的文本，可以在选中的文本周围包裹一个带有特定样式的元素（如 <span>）。这可以通过 Range.surroundContents() 方法来实现。

const highlightSpan = document.createElement('span');
highlightSpan.style.backgroundColor = 'yellow';
range.surroundContents(highlightSpan);

4. 处理跨节点选择

如果用户选择的文本跨越了多个 DOM 节点，处理起来会稍微复杂一些。在这种情况下，可能需要遍历选中的范围，并对每个文本节点分别进行处理。

const nodes = [];
for (let i = 0; i < range.commonAncestorContainer.childNodes.length; i++) {
    const node = range.commonAncestorContainer.childNodes[i];
    if (range.intersectsNode(node)) {
        nodes.push(node);
    }
}

nodes.forEach(node => {
    const span = document.createElement('span');
    span.style.backgroundColor = 'yellow';
    node.parentNode.replaceChild(span, node);
    span.appendChild(node);
});

5. 撤销高亮

如果需要撤销高亮，可以通过移除之前添加的高亮元素来恢复原始文本。

const highlightedSpans = document.querySelectorAll('span.highlight');
highlightedSpans.forEach(span => {
    const parent = span.parentNode;
    while (span.firstChild) {
        parent.insertBefore(span.firstChild, span);
    }
    parent.removeChild(span);
});

6. 兼容性和性能优化

在实际应用中，还需要考虑不同浏览器的兼容性，以及性能优化。例如，使用 MutationObserver 来监听 DOM 变化，避免频繁操作 DOM 导致的性能问题。

const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        // 处理 DOM 变化
    });
});

observer.observe(document.body, { childList: true, subtree: true });

7. 集成到富文本编辑器

如果使用的是现有的富文本编辑器（如 Quill、TinyMCE、CKEditor 等），通常这些编辑器已经提供了划词高亮的插件或 API，可以直接使用或扩展。

// 以 Quill 为例
const quill = new Quill('#editor', {
    theme: 'snow'
});

quill.on('selection-change', (range) => {
    if (range) {
        const selectedText = quill.getText(range.index, range.length);
        console.log('选中的文本:', selectedText);
    }
});

总结

实现富文本编辑器中的划词功能，核心在于监听用户的选择事件，获取选中的文本范围，并通过 DOM 操作对选中的文本进行高亮或其他处理。在实际开发中，还需要考虑跨节点选择、撤销高亮、兼容性和性能优化等问题。如果使用现有的富文本编辑器，可以借助其提供的 API 或插件来简化开发流程。