<!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. C#基础知识---Linq操作XML文件

    概述 Linq也就是Language Integrated Query的缩写,即语言集成查询,是微软在.Net 3.5中提出的一项新技术. Linq主要包含4个组件---Linq to Objects ...

  2. Jsoup类

    一.简介 Jsoup是一款HTML解析器,可以直接解析url地址,也可以解析html文本内容.也可通过DOM.CSS以及类似于jQuery的操作方法来取出和操作数据.其主要功能: 1.从url.字符串 ...

  3. spring的异常处理

    出自于:https://blog.csdn.net/he90227/article/details/46309297   ---- 利用Spring进行统一异常处理的两种方式. 原文:https:// ...

  4. Java 方法使用

    那么什么是方法呢? Java方法是语句的集合,它们在一起执行一个功能. 方法是解决一类问题的步骤的有序组合 方法包含于类或对象中 方法在程序中被创建,在其他地方被引用 方法的优点 1. 使程序变得更简 ...

  5. 输入npm install 报错node-sass@4.13.0 postinstall:`node scripts/build.js` Failed at the node-sass@4.13.0

    这个是因为sass安装时获取源的问题,先修改sass安装的源,再运行npm install就成功了 npm config set sass_binary_site=https://npm.taobao ...

  6. LeetCode入门指南 之 动态规划思想

    推荐学习labuladong大佬的动态规划系列文章:先弄明白什么是动态规划即可,不必一次看完.接着尝试自己做,没有思路了再回过头看相应的文章. 动态规划一般可以由 递归 + 备忘录 一步步转换而来,不 ...

  7. 国内Git官网下载windows版本慢的问题，推荐一个国内镜像

    话不多说了,给你们镜像地址: https://npm.taobao.org/mirrors/git-for-windows/ 不用谢.点右边打赏个一毛钱,告诉我你来过        !_!

  8. C# - 习题02_写出程序的输出结果a.Fun()

    时间:2017-08-23 整理:byzqy 题目:写出程序的输出结果: 文件:Program.cs 1 using System; 2 3 namespace Interview1 4 { 5 pu ...

  9. Blazor+Dapr+K8s微服务之基于WSL安装K8s集群并部署微服务

         前面文章已经演示过,将我们的示例微服务程序DaprTest1部署到k8s上并运行.当时用的k8s是Docker for desktop 自带的k8s,只要在Docker for deskto ...

  10. MySQL-存储引擎-MERGE

    MERGE存储引擎是一组Myisam表的组合,这些Myisam表必须结构完全相同,MERGE表本身并没有数据,对MERGE类型的表可以进行查询.更新.删除操作,这些操作实际上是对内部的Myisam表进 ...