在富文本编辑器中，为划词选择的文本添加右键菜单（上下文菜单）是一项常见的需求。实现这一功能涉及监听用户的右键点击事件、显示自定义菜单以及在该菜单上执行相应操作。以下是实现这一功能的步骤和示例代码。
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> 注意事项
- 上下文菜单的样式和交互：可以根据需要调整菜单的样式，增加动画效果等。
- 事件处理的性能：过多的事件监听可能会影响性能，确保在必要时移除不再使用的监听器。
- 交互兼容性：确保在不同浏览器中的兼容性测试，避免特定浏览器下功能失效。
- 无障碍访问：注意上下文菜单的无障碍性，确保使用键盘等其他方式的用户也能访问菜单功能。
通过上述步骤，你可以在富文本编辑器中为划词选择的文本添加右键菜单，用户可以轻松地对选中的文本执行各种操作，如加粗、斜体和下划线。这种方式增强了用户体验，并提供了更强大的文本编辑功能。