码迷,mamicode.com
首页 > Web开发 > 详细

html 富文本编辑器相关--输出选中文字和主动选择文字

时间:2017-04-13 21:04:43      阅读:745      评论:0      收藏:0      [点我收藏+]

标签:fse   htm   nbsp   text   meta   color   lan   get   closed   

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="app" contenteditable="true">
    <span id="content">12345675345</span>
    <p id="content2">12345675345</p>
</div>

<button id="btn">显示选中文字</button>
</body>
<script>
    selction = window.getSelection();
    const btn = document.querySelector(#btn);
    const app = document.querySelector(.app);
    const content = document.querySelector(#content);
    const content2 = document.querySelector(#content2);
    app.focus();
    btn.onclick = function () {
        let selction ,text;
        console.log(selction.toString());//输出选中文字
        alert(selction);
    }
    let range = selction.getRangeAt(0);
    range.setStart(selction.anchorNode,selction.anchorOffset);
    range.setEnd(selction.focusNode,selction.focusOffset+6);
    selction.removeAllRanges();
    selction.addRange(range);//主动添加选中文字
    console.log(selction);

</script>
</html>
View Code

 

html 富文本编辑器相关--输出选中文字和主动选择文字

标签:fse   htm   nbsp   text   meta   color   lan   get   closed   

原文地址:http://www.cnblogs.com/WhiteHorseIsNotHorse/p/6705875.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!