<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Language" content="zh-cn" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DIV可编辑框鼠标光标处插入图片或者文字。</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    </script>
    <style type="text/css">
        .editbox {
            width: 400px;
            height: 200px;
            border: 1px solid #000;
            overflow-x: hidden;
            overflow-y: auto;
            outline: none;
        }
    </style>
</head>
<!-- onmousedown="return false" -->
<body>
    <div id="testdiv" contenteditable="true" class="editbox">可以在任意文字后面插入图片或者文字哦！<br /></div>
    <select type="text" id="ipt">
        <option value="haha"></option>
        <option value="hhh"></option>
    </select>
    <input type="button" value="点击插入" id='clc'>
    <script type="text/javascript">
        $(function () {
            $("#clc").click(function () {
                $("#testdiv").focus();
                // var sy = $(".imgbox img").index(this) + 1;
                var val = document.getElementById('ipt').value;
                var img_url = "<span class='cs' contenteditable='false'>" + val + "</span>";
                /*此处如果不是插入图片可这样：
                var img_url = "插入测试的文字";
                */
                _insertimg(img_url);
            })
            //注：如果要插入的是那种“快捷发言，快捷留言”里的文字，只需把那些文字都分别放在A标签里即可，然后img_url=a标签里面的内容。工作中的编辑器终于搞定！能插入图片和快捷发言和表情图片等。
        })
        //锁定编辑器中鼠标光标位置。。
        function _insertimg(str) {
            var selection = window.getSelection ? window.getSelection() : document.selection;
            var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            if (!window.getSelection) {
                document.getElementById('testdiv').focus();
                var selection = window.getSelection ? window.getSelection() : document.selection;
                var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
                range.pasteHTML(str);
                range.collapse(false);
                range.select();
                $('.cs').click(function (e) {
                    console.log(e);
                    $(this).remove();
                })
            } else {
                document.getElementById('testdiv').focus();
                range.collapse(false);
                var hasR = range.createContextualFragment(str);
                var hasR_lastChild = hasR.lastChild;
                while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild
                    .previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
                    var e = hasR_lastChild;
                    hasR_lastChild = hasR_lastChild.previousSibling;
                    hasR.removeChild(e)
                } 
                range.insertNode(hasR);
                if (hasR_lastChild) {
                    range.setEndAfter(hasR_lastChild);
                    range.setStartAfter(hasR_lastChild)
                }
                selection.removeAllRanges();
                selection.addRange(range)
                $('.cs').dblclick(function (e) {
                    console.log(e,new Date());
                    $(this).remove();
                })
            }
        }
    </script>
</body>
</html>

div 可编辑--获取光标位置插入元素的更多相关文章

  1. 【转】怎么给javascript + div编辑框光标位置插入表情文字等？

    最近刚好碰到这个问题,虽然离提出问题已经过了半年了,本着前人栽树后人乘凉的精神,还是回答一下.效果: &amp;amp;amp;lt;img src="https://pic2.zh ...

  2. 可编辑div中包含子元素时获取光标位置不准确的问题

    前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...

  3. 2017-02-20 可编辑div中如何在光标位置添加内容

    之前做了一个可编辑div需要在里面插入内容,搜了好多代码,就这个能实现我的功能,记录一下,以备以后用 <!DOCTYPE HTML> <html> <head> & ...

  4. Android EditText获取光标位置并插入字符删除字符

    1.获取光标位置 int index = editText.getSelectionStart(); 2.在光标处插入字符 int index = editText.getSelectionStart ...

  5. js获取光标位置并插入内容

    先来几个网上找的参考资源,我爱互联网,互联网使我变得更加强大. https://blog.csdn.net/mafan121/article/details/78519348 详细篇,该作者很用心的解 ...

  6. js 在光标位置插入内容

    原文:https://blog.csdn.net/smartsmile2012/article/details/53642082 createDocumentFragment()用法: https:/ ...

  7. android EditText获取光标位置并安插字符删除字符

    android EditText获取光标位置并插入字符删除字符1.获取光标位置int index = editText.getSelectionStart(); 2.在光标处插入字符int index ...

  8. textarea在光标位置插入文字

    最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...

  9. js获取光标位置

    js获取光标位置   var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */ ...

随机推荐

  1. webGis概念

    参考:https://blog.csdn.net/qq_36375770/article/details/80077533 参考:https://blog.csdn.net/BuquTianya/ar ...

  2. C# lock的语法糖原理--《.net core 底层入门》之自旋锁，互斥锁，混合锁，读写锁

    在多线程环境中,多个线程可能会同时访问同一个资源,为了避免访问发生冲突,可以根据访问的复杂程度采取不同的措施 原子操作适用于简单的单个操作,无锁算法适用于相对简单的一连串操作,而线程锁适用于复杂的一连 ...

  3. WPF 获取主线程

    WPF线程获取UI线程   WPF中只能是UI线程才可以改变UI控件相关,当采用多线程工作时,可用以下代码获取 UI线程进行操作: App.Current.Dispatcher.Invoke((Act ...

  4. Scrapy启动spider出错

    python 3.7 里,async变成了关键字,所以报错. 解决方法:1回退python3.6版本. 2找到报错的那个py文件,比如manhole.py,将函数参数async改个名字(比如改成asy ...

  5. Java异常与异常处理

    异常体系结构 1.所有异常都继承于Throwable类,其下有两大子类: (1)Error类:错误,一般编程人员不太接触,如虚拟机错误.线程死锁.硬伤:使程序崩溃 (2)Exception类:异常,编 ...

  6. 不同的 count 用法

    不同的 count 用法效率:在 select count(?) from t 这样的查询语句里面, count(*).count(主键 id).count(字段) 和 count(1) 等不同用法的 ...

  7. jQuery中的子（后代）元素过滤选择器（四、六）：nth-child()、first-child、last-child、only-child

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  8. 虚拟dom？diff算法？key？Vue原理的核心三问？打包教你搞定。

    为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,如下图所示: 所有浏览器的引擎工作流程都差不多,如上图大致分5步: ...

  9. 神舟G7-CT7NK 安装tensorflow-gpu

    参考https://www.cnblogs.com/xbit/p/9768238.html 直接安装,运行keras mnist数字识别报错: Could not create cudnn handl ...

  10. GO的GC辣鸡回收（一）

    用户程序通过内存分配器(Allocator)在堆上申请内存,而垃圾收集器(Collector)负责回收堆上的内存空间,内存分配器和垃圾收集器共同管理程序中的堆内存空间. 基本概念 垃圾分类 语义垃圾: ...