demo效果如下：

html代码部分如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>js获取编辑框游标的位置</title>

    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>

    <style type="text/css">

        #Div1, #Div2

        {

            width: 500px;

            height: 100px;

            border: solid 1px black;

        }

    </style>

</head>

<body>

<button type="button" id="ddddd" >

    插入字符

</button>

<div contentEditable="true" style="height:50px; border:2px solid red;" id="test">

dasdsadasdasdasd<img src="http://www.cnblogs.com/images/xml.gif" alt="订阅">dasdasdasdasdsadsa

</div>

</body>

</html>

<script>

$('#ddddd').click(function(){

    document.getElementById('test').focus();

    insertHtmlAtCaret('<img src="http://www.cnblogs.com/images/xml.gif" />');

})

function insertHtmlAtCaret(html) {

    var sel, range;

    if (window.getSelection) {

        sel = window.getSelection();

        if (sel.getRangeAt && sel.rangeCount) {

                range = sel.getRangeAt(0);

                range.deleteContents();

                var el = document.createElement("div");

                el.innerHTML = html;

                var frag = document.createDocumentFragment(), node, lastNode;

                while ( (node = el.firstChild) ) {

                lastNode = frag.appendChild(node);

            }

            range.insertNode(frag);

            if (lastNode) {

                range = range.cloneRange();

                range.setStartAfter(lastNode);

                range.collapse(true);

                sel.removeAllRanges();

                sel.addRange(range);

            }

        }

    } else if (document.selection && document.selection.type != "Control") {

        // IE < 9

        document.selection.createRange().pasteHTML(html);

    }

}

</script>

js 指定位置插入html标签（可编辑div）的更多相关文章

  1. 在一段字符串中的指定位置插入html标签，实现内容修改留痕

    客户需求:实现内容修改留痕,并且鼠标移动到元素时,显示修改人和修改时间. (其实呢本人觉得这个如果是静态的页面,或者是后端拼接好的html,都很好实现,如果让前端动态实现就......) 前端实现的方 ...

  2. 如何在JS数组特定索引处指定位置插入元素？

    如何在JS数组特定索引处指定位置插入元素? 需求: 将一个元素插入到现有数组的特定索引处.听起来很容易和常见,但需要一点时间来研究它. // 原来的数组var array = ["one&q ...

  3. 数组的操作。1，JS数组去重。2，把数组中存在的某个值，全部找出来。3在JS数组指定位置插入元素。。。

    1,数组去重 let arr = [1,2,3,4,5,6,1,2,3,'a','b','a']; let temp = []; // 作为存储新数组使用 for(let i = 0; i < ...

  4. PHP字符串指定位置插入字符串

    1.substr_replace(string,replacement,start,length);需插入时设置length为0即可 string 必需.规定要检查的字符串. replacement ...

  5. java格式化字符串，在指定位置插入指定字符串，兼容中英文以及特殊字符，例如:换行,用于解决生成pdf换行问题等问题

    本博客是自己在学习和工作途中的积累与总结,仅供自己参考,也欢迎大家转载,转载时请注明出处.  http://www.cnblogs.com/king-xg/p/6370890.html 如果觉得对您有 ...

  6. 【PHP】在目标字符串指定位置插入字符串

    PHP如何在指定位置插入相关字符串,例子:123456789变为1_23_456789插入"_"到指定的位置! (可以用作换行或者其他处理) 插入示例,具体思路在代码中有注释: & ...

  7. Java分享笔记：RandomAccessFile流 & 在文件指定位置插入内容

    RandomAccessFile流:随机存取文件流,该类定义了一个记录指针,通过移动指针可以访问文件的任意位置,且对文件既可以读也可以写.使用该类的write方法对文件写入时,实际上是一种覆盖效果,即 ...

  8. 利用RandomAccessFile类在指定文件指定位置插入内容

    package File; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; ...

  9. Java 替换word文档文字，指定位置插入图片

    先说下 需要的依赖包 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ex ...

随机推荐

  1. java_访问权限修饰符

    java的访问权限修饰符有四种,根据权限由大到小的顺序为:public,protected,包访问权限(默认,没有修饰符),private. 根据修饰的东西不同,详细介绍如下: 1.修饰类的话分为两种 ...

  2. 《Java并发编程实战》第二章 线程安全 札记

    一个.什么是线程安全 编写线程安全的代码 其核心是管理国事访问的操作. 共享,可变的状态的訪问 - 前者表示多个线程訪问, 后者声明周期内发生改变. 线程安全性 核心概念是正确性.某个类的行为与其规范 ...

  3. JAVA深入研究——Method的Invoke方法（转）

    在写代码的时候,发现Method可以调用子类的对象,但子类即使是改写了的Method,方法名一样,去调用父类的对象也会报错,虽然这是很符合多态的现象,也符合java的动态绑定规范,但还是想弄懂java ...

  4. cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第六步---炮台&amp;点击炮台加入英雄&amp;英雄升级

    /* 说明: **1.本次游戏实例是<cocos2d-x游戏开发之旅>上的最后一个游戏,这里用3.0重写并做下笔记 **2.我也问过木头本人啦,他说:随便写,第一别全然照搬代码:第二能够说 ...

  5. Android采用Volley具体的例子展示完整的异步加载数据(一)

    MainActivity例如下列: package cc.cn; import java.util.HashMap; import org.json.JSONObject; import androi ...

  6. AngularJS html5Mode 使用 SVG Marker失效

    接上一篇文章: 问题: 解决了html5Mode的路由问题之后,今天突然发现一个奇怪的问题:项目中使用SVG所画的箭头全都不见了?反复测试之后发现Chrome和Firefox有问题,而IE却可以显示, ...

  7. scala 101

    * scala 安装: 下载可以执行的文件. 注意版本.  spark 0.8.0 对应的scala 为2.9.3 * scala 编译: 和java 很像: 1,  直接编译脚本: scalac H ...

  8. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  9. android在单身的对象和一些数据的问题被释放

    正式接触android我们一直在开发了一段时间,该项目的第一个版本最终会很快结束. 当有它自己的测试.拥有android后台.同一时候打开了几个应用之后又一次切回到自己的app.发现报错了.经过排查, ...

  10. Android设计模式（五岁以下儿童）－－简单工厂模式

    1.面试的时候问这个问题: 在ListView 的item小程序.很多不同的显示风格.或者是,为了更好地维护,不同的样式,应该怎么做? 我一下就想到的是工厂的模式,利用project,编写ViewFa ...