,可以通过以下步骤实现:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>捕获选定内容示例</title>
<style>
.contenteditable-div {
border: 1px solid #ccc;
padding: 10px;
min-height: 100px;
}
</style>
</head>
<body>
<div class="contenteditable-div" contenteditable="true">
这是一个可编辑的div元素。
</div>
<button id="bold-button">粗体</button>
<script>
document.getElementById('bold-button').addEventListener('click', function() {
var contenteditableDiv = document.querySelector('.contenteditable-div');
var selection = window.getSelection();
var selectedText = selection.toString().trim();
if (selectedText !== '') {
// 在这里可以对选定的内容进行处理,比如存储到变量或执行其他操作
console.log('选定的内容:', selectedText);
}
});
</script>
</body>
</html>
在上述示例中,当点击"粗体"按钮时,会捕获contenteditable div中当前选定的内容,并在控制台中打印出来。你可以根据需要修改处理选定内容的逻辑。
领取专属 10元无门槛券
手把手带您无忧上云