pc富文本扩展小知识

合集 - 新领域(10)

1.依赖提供和注入2024-08-042.配置项模块2024-08-053.鸿蒙layoutWeight2024-08-254.状态state2024-08-275.样式及结构复用2024-09-016.scroll相关2024-09-017.鸿蒙数据驱动2024-09-018.自定义组件2024-09-019.prop父子通信数据单项流——谁的数据谁负责2024-09-01

10.pc富文本扩展小知识2024-10-17

收起

1.富文本里面， 是如何做到划词的
使用浏览器提供的 Selection 对象来获取和管理选择的范围。在鼠标移动过程中，不断更新 Selection 对象的范围。
document.addEventListener("mouseup", function () {
const selection = window.getSelection();
if (selection) {
const selectedText = selection.toString();
console.log("选中的文本: ", selectedText);
}
});
2.如何在划词选择的文本上添加右键菜单
监听鼠标右键事件 在文档或富文本区域上添加 contextmenu 事件的监听。
document.addEventListener("contextmenu", function (event) {
// 阻止默认的浏览器右键菜单
event.preventDefault();

// 在此处显示自定义右键菜单
showCustomMenu(event);
});
显示自定义右键菜单 创建一个自定义的菜单元素，并根据选择的文本设置菜单选项。
function showCustomMenu(event) {
const customMenu = document.createElement("div");
customMenu.style.position = "absolute";
customMenu.style.left = event.clientX + "px";
customMenu.style.top = event.clientY + "px";

// 添加菜单选项
const menuItem1 = document.createElement("div");
menuItem1.textContent = "复制";
menuItem1.addEventListener("click", function () {
// 处理复制操作
copySelectedText();
});
customMenu.appendChild(menuItem1);

// 可以添加更多的菜单选项

document.body.appendChild(customMenu);
}
处理菜单选项的操作 例如，实现复制选中文本的功能。
function copySelectedText() {
const selection = window.getSelection();
if (selection) {
const range = selection.getRangeAt(0);
const clipboardData = new ClipboardEvent("copy", {
clipboardData: { text: range.toString() },
bubbles: true,
}).clipboardData;
document.execCommand("copy", false, clipboardData);
}
}
隐藏右键菜单 当用户点击菜单之外的区域时，隐藏自定义右键菜单
document.addEventListener("click", function (event) {
const customMenu = document.querySelector(".custom-menu");
if (customMenu && !customMenu.contains(event.target)) {
customMenu.remove();
}
});