首页 > 代码库 > html 富文本编辑器相关--常用selection range api

html 富文本编辑器相关--常用selection range api

 

selection.setPosition(container,5);  设置光标位置--到尾端
selection.setPosition(container,0);  设置光标位置--到首端

container 为 编辑容器dom,5 为编辑器子元素的长度,
技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #app{            width:300px;            height:100px;            border: 1px solid red;        }        img{            width: 20px;        }    </style></head><body><!--<div contenteditable="true" id="app">    <img src=http://www.mamicode.com/"a.jpg" alt=""> 123</div>--><div contenteditable="true" id="app">   11<img src=http://www.mamicode.com/"a.jpg" alt=""><img src=http://www.mamicode.com/"a.jpg" alt=""> 00 <span class="sp">123</span></div></body><script>    let app = document.querySelector(#app);    app.focus();    let selection = getSelection();    selection.setPosition(app,5);</script></html>
View Code

 

html 富文本编辑器相关--常用selection range api