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

清疚 2022-01-09 08:07 148阅读 0赞

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

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

container 为 编辑容器dom，5 为编辑器子元素的长度，

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!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">
       11<img src="a.jpg" alt=""><img src="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>

转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6705396.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220109/4209179fd01c4999a7323f1a9098156e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，148人围观）

还没有评论，来说两句吧...

相关阅读

相关富文本编辑器wangEditor

目录下载引入基本使用说明 wangEditor是一个轻量级的富文本编辑器，相比KindE

向右看齐/ 2022年12月11日 06:25/ 0 赞/ 743 阅读

相关 layui 富文本编辑器

html部分 <textarea id="demo" lay-verify="content" name="explain" class="layui-textare

忘是亡心i/ 2022年11月05日 06:30/ 0 赞/ 463 阅读

相关 layui富文本编辑器

国内外有许多优秀、强大的HTML编辑器，但普遍都有一个共性：异常地臃肿、UI陈旧，随着Layui的发布，将重新为富文本做一些新的定义。LayEdit遵循极简的设计风格，无论是U

「爱情、让人受尽委屈。」/ 2022年10月16日 00:51/ 0 赞/ 270 阅读

相关 html5富文本编辑器图片,漂亮的富文本编辑器WYSIWYG

![5aaaddac4dbb2307489796843d65bb62.png][] ![94a6dc5feabd4193c6b752bf51a273a1.png][] 插件

柔光的暖阳◎/ 2022年10月06日 07:57/ 0 赞/ 341 阅读

相关 HTML 富文本编辑器插件 CKEditor

CKEditor 首页： [http://ckeditor.com/][http_ckeditor.com] 一、使用 1、将ckeditor整个文件夹放到网

﹏ヽ暗。殇╰゛Y/ 2022年06月15日 00:14/ 0 赞/ 426 阅读

相关 HTML富文本编辑器wangEditor的使用

文章目录官网项目结构源码全屏插件 CSS JS 效果

叁歲伎倆/ 2022年04月03日 05:45/ 0 赞/ 492 阅读

相关富文本编辑器

（1）[UEditor][] （2）[kindEditor][] （3）[summernote][] 另本篇文章有更多富文本编辑器推荐： [https://www

你的名字/ 2022年03月19日 05:52/ 0 赞/ 451 阅读

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

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

清疚/ 2022年01月09日 08:07/ 0 赞/ 149 阅读

相关富文本编辑器summerNote

载入富文本： $('.summernote').summernote({ height: 220, tabsize: 2, lang: 'zh

客官°小女子只卖身不卖艺/ 2021年12月22日 14:25/ 0 赞/ 422 阅读

相关 KindEditor富文本编辑器

KindEditor简单使用 KindEditor 引入相关JS 简单使用 KindEditor KindEditor是一套开源的HTML可视化

水深无声/ 2021年10月06日 02:50/ 0 赞/ 532 阅读