富文编辑器右键菜单直接在鼠标旁边显示 并添加二级菜单并当鼠标在上面自动显示二级菜单

这需要使用JavaScript来实现。以下是一个简单的示例代码： HTML部分： ``` ``` JavaScript部分： ``` // 获取富文本编辑器元素 var editor = document.getElementById("editor"); // 创建右键菜单元素 var contextMenu = document.createElement("div"); contextMenu.id = "context-menu"; contextMenu.style.display = "none"; editor.appendChild(contextMenu); // 添加一级菜单项 var menuItem1 = document.createElement("div"); menuItem1.className = "menu-item"; menuItem1.innerHTML = "一级菜单项1"; contextMenu.appendChild(menuItem1); // 添加二级菜单项 var subMenu = document.createElement("div"); subMenu.className = "sub-menu"; subMenu.style.display = "none"; menuItem1.appendChild(subMenu); var subMenuItem1 = document.createElement("div"); subMenuItem1.className = "sub-menu-item"; subMenuItem1.innerHTML = "二级菜单项1"; subMenu.appendChild(subMenuItem1); var subMenuItem2 = document.createElement("div"); subMenuItem2.className = "sub-menu-item"; subMenuItem2.innerHTML = "二级菜单项2"; subMenu.appendChild(subMenuItem2); // 监听右键菜单事件 editor.addEventListener("contextmenu", function(e) { e.preventDefault(); // 显示右键菜单 contextMenu.style.display = "block"; contextMenu.style.left = e.pageX + "px"; contextMenu.style.top = e.pageY + "px"; }); // 监听鼠标移动事件，自动显示二级菜单 menuItem1.addEventListener("mouseover", function() { subMenu.style.display = "block"; }); // 监听鼠标移出事件，自动隐藏二级菜单 menuItem1.addEventListener("mouseout", function() { subMenu.style.display = "none"; }); ``` CSS部分： ``` #context-menu { position: absolute; z-index: 9999; background-color: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);