// 选择容器元素
const box = document.queryselector('.box');
// 监听选择事件
document.addEventListener('mouseup', (e) => {
// 如果选择不在box内部,清除选择
if (!box.contains(e.target)) {
window.getSelection().removeAllRanges();
}
});
// 监听键盘事件,以防用户使用键盘进行选择
document.addEventListener('keyup', (e) => {
// 检查是否有文本被选中
const selection = window.getSelection();
if (!box.contains(selection.anchorNode)) {
selection.removeAllRanges();
}
});
在自己手写富文本编辑器时通常会用到这一点
//通过vue3绑定编辑器dom
const editorRef = ref()
//选中的文本
const text = ref('')
//选择器
const selection = ref({})
//位置信息
const range = ref(null)
//选中的文本所在节点
const node = ref(null)
const getContext = ()=>{
selection.value = window.getSelection()
if(selection.value.isCollapsed) return
if(selection.value.rangeCount <= 0) return
text.value = selection.value.toString()
range.value = selection.value.getRangeAt(0)
//父节点
const element = range.value.commonAncestorContainer;
/*过滤不是元素节点情况
contains用于判断某个dom节点是否为另一个节点的子元素。
用法示例:parentNode.contains(childNode)
当前语句意为:当选中内容为dom且处于编辑器区域中时,获取被选中的文本所在的dom节点,
并将之存入变量,如果不是dom节点那么将它的父元素存入变量。如果选中的内容超出了
编辑器区域直接存入null,这样就可以起到限制getSelection()作用范围的效果。有兴趣的可以
看看我写的简易版富文本编辑器,目前正在编码中后续测试无BUG后会贴出地址。
*/
if (element.nodeType === Node.ELEMENT_NODE && editorRef.value.contains(element)) {
node.value = element
} else if(editorRef.value.contains(element.parentElement)){
node.value = element.parentElement
}else{
node.value = null
}
}