js 指定位置插入html标签(可编辑div)
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)的更多相关文章
- 在一段字符串中的指定位置插入html标签,实现内容修改留痕
客户需求:实现内容修改留痕,并且鼠标移动到元素时,显示修改人和修改时间. (其实呢本人觉得这个如果是静态的页面,或者是后端拼接好的html,都很好实现,如果让前端动态实现就......) 前端实现的方 ...
- 如何在JS数组特定索引处指定位置插入元素?
如何在JS数组特定索引处指定位置插入元素? 需求: 将一个元素插入到现有数组的特定索引处.听起来很容易和常见,但需要一点时间来研究它. // 原来的数组var array = ["one&q ...
- 数组的操作。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 < ...
- PHP字符串指定位置插入字符串
1.substr_replace(string,replacement,start,length);需插入时设置length为0即可 string 必需.规定要检查的字符串. replacement ...
- java格式化字符串,在指定位置插入指定字符串,兼容中英文以及特殊字符,例如:换行,用于解决生成pdf换行问题等问题
本博客是自己在学习和工作途中的积累与总结,仅供自己参考,也欢迎大家转载,转载时请注明出处. http://www.cnblogs.com/king-xg/p/6370890.html 如果觉得对您有 ...
- 【PHP】在目标字符串指定位置插入字符串
PHP如何在指定位置插入相关字符串,例子:123456789变为1_23_456789插入"_"到指定的位置! (可以用作换行或者其他处理) 插入示例,具体思路在代码中有注释: & ...
- Java分享笔记:RandomAccessFile流 & 在文件指定位置插入内容
RandomAccessFile流:随机存取文件流,该类定义了一个记录指针,通过移动指针可以访问文件的任意位置,且对文件既可以读也可以写.使用该类的write方法对文件写入时,实际上是一种覆盖效果,即 ...
- 利用RandomAccessFile类在指定文件指定位置插入内容
package File; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; ...
- Java 替换word文档文字,指定位置插入图片
先说下 需要的依赖包 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ex ...
随机推荐
- swift学习笔记(七)自己主动引用计数
与Object-c一样,swift使用自己主动引用计数来跟踪并管理应用使用的内存.当实例不再被使用时,及retainCount=0时,会自己主动释放是理所占用的内存空间. 注:引用计数仅适用于类的实例 ...
- 提高duilib的richedit控制的一些特征
转载请注明原始出处.谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41208207 假设要使用透明异形窗口功能,首先要改进duilib库让他 ...
- 对java中classloader使用的一点理解(转)
先简单介绍下java的classloader,网上资料很多,就说点关键的. Java 中的类加载器大致可以分成两类,一类是系统提供的,另外一类则是由 Java 应用开发人员编写的.系统提供的类加载器主 ...
- 使用Django清理数据库中的数据
数据库,数据清洗 问题叙述性说明:在系统我用在,因为历史和由于各种原因,原因记录的数据内的数据库表,有一个问题,有反复和不完整的数据 解:首先.由于数据量还是挺大的,工的清理肯定不行, 然后,我就想写 ...
- acdream 1431 Sum vs Product
Sum vs Product Time Limit: 4000/2000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) Submi ...
- MySQL学习系列2--MySQL执行计划分析EXPLAIN
原文:MySQL学习系列2--MySQL执行计划分析EXPLAIN 1.Explain语法 EXPLAIN SELECT …… 变体: EXPLAIN EXTENDED SELECT …… 将执行 ...
- 使用Hadoop的MapReduce与HDFS处理数据
hadoop是一个分布式的基础架构,利用分布式实现高效的计算与储存,最核心的设计在于HDFS与MapReduce,HDFS提供了大量数据的存储,mapReduce提供了大量数据计算的实现,通过Java ...
- HDU 1877 另一个版本 A+B
另一个版本 A+B Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- 乐视TV2015校园招聘A第二个大的发行量(of中国Academy科学大学站)
标题叙述性说明:鉴于阵列A,尺寸n,数组元素1至n数字.但是一些数字多次出现.有些数字不出现.请设计算法和程序,统计数据不会出现什么.什么号码多次出现.在O(n)时间复杂度,O(1)在完成它的空间复杂 ...
- 准备战争“软测试”之DB基础知识
"数据库"东西这个陌生和数据,进入提高班,从第二年开始接触,的项目还是自考的学习加起来也有3遍了.这仅仅是一个開始,软考又要对数据库进行全面的分析,那么如今就让我们再一次剖析它吧! ...