前端面试：富文本编辑器里面如何在划词选择的文本上添加右键菜单？

在富文本编辑器中，为划词选择的文本添加右键菜单（上下文菜单）是一项常见的需求。实现这一功能涉及监听用户的右键点击事件、显示自定义菜单以及在该菜单上执行相应操作。以下是实现这一功能的步骤和示例代码。

1. HTML 结构

首先，假设有一个用于展示富文本的容器和一个上下文菜单的基本 HTML 结构。

<div id="editor" contenteditable="true" style="border: 1px solid #ccc; padding: 10px;"> 这是一个可编辑的富文本区域。请在这里选择文本。 </div> <div id="context-menu" style="display:none; position:absolute; background:#fff; border:1px solid #ccc; z-index:1000;"> <ul> <li id="bold">加粗</li> <li id="italic">斜体</li> <li id="underline">下划线</li> </ul> </div>

2. CSS 样式

可以根据需要给菜单添加一些基本的样式，以使其看起来更美观。

#context-menu { padding: 5px; } #context-menu ul { list-style: none; padding: 0; margin: 0; } #context-menu li { padding: 5px 10px; cursor: pointer; } #context-menu li:hover { background-color: #f0f0f0; }

3. JavaScript 实现

接下来，使用 JavaScript 来实现右键菜单的打开、关闭和功能处理。

1. 监听右键点击事件

在富文本编辑器的容器上监听 contextmenu 事件，以便检测右键点击。

const editor = document.getElementById('editor'); const contextMenu = document.getElementById('context-menu'); // 右键点击事件 editor.addEventListener('contextmenu', function(event) { event.preventDefault(); // 阻止默认的右键菜单 const selection = window.getSelection(); // 确保有选中的文本 if (selection && selection.toString().length > 0) { // 获取点击位置并显示上下文菜单 contextMenu.style.top = `${event.clientY}px`; contextMenu.style.left = `${event.clientX}px`; contextMenu.style.display = 'block'; } });

2. 处理菜单项点击事件

监听上下文菜单中各个项的点击事件，进行相应的文本操作。

// 加粗操作 document.getElementById('bold').addEventListener('click', function() { toggleTextStyle('strong'); hideContextMenu(); }); // 斜体操作 document.getElementById('italic').addEventListener('click', function() { toggleTextStyle('em'); hideContextMenu(); }); // 下划线操作 document.getElementById('underline').addEventListener('click', function() { toggleTextStyle('u'); hideContextMenu(); }); // 通用函数用于添加或移除样式 function toggleTextStyle(tagName) { const selection = window.getSelection(); if (selection.rangeCount > 0) { const range = selection.getRangeAt(0); const newNode = document.createElement(tagName); // 创建新的元素 range.surroundContents(newNode); // 用新节点包裹选中文本 } }

3. 隐藏上下文菜单

为了在点击菜单之外的地方时隐藏菜单，可以添加一个鼠标点击事件监听器到 document。

// 隐藏上下文菜单 function hideContextMenu() { contextMenu.style.display = 'none'; } // 点击非菜单区域时隐藏菜单 document.addEventListener('click', hideContextMenu);

4. 完整实现

整合上述代码后，最终实现如下：

<div id="editor" contenteditable="true" style="border: 1px solid #ccc; padding: 10px;"> 这是一个可编辑的富文本区域。请在这里选择文本。 </div> <div id="context-menu" style="display:none; position:absolute; background:#fff; border:1px solid #ccc; z-index:1000;"> <ul> <li id="bold">加粗</li> <li id="italic">斜体</li> <li id="underline">下划线</li> </ul> </div> <style> #context-menu { padding: 5px; } #context-menu ul { list-style: none; padding: 0; margin: 0; } #context-menu li { padding: 5px 10px; cursor: pointer; } #context-menu li:hover { background-color: #f0f0f0; } </style> <script> const editor = document.getElementById('editor'); const contextMenu = document.getElementById('context-menu'); editor.addEventListener('contextmenu', function(event) { event.preventDefault(); const selection = window.getSelection(); if (selection && selection.toString().length > 0) { contextMenu.style.top = `${event.clientY}px`; contextMenu.style.left = `${event.clientX}px`; contextMenu.style.display = 'block'; } }); document.getElementById('bold').addEventListener('click', function() { toggleTextStyle('strong'); hideContextMenu(); }); document.getElementById('italic').addEventListener('click', function() { toggleTextStyle('em'); hideContextMenu(); }); document.getElementById('underline').addEventListener('click', function() { toggleTextStyle('u'); hideContextMenu(); }); function toggleTextStyle(tagName) { const selection = window.getSelection(); if (selection.rangeCount > 0) { const range = selection.getRangeAt(0); const newNode = document.createElement(tagName); range.surroundContents(newNode); } } function hideContextMenu() { contextMenu.style.display = 'none'; } document.addEventListener('click', hideContextMenu); </script>

注意事项