js写入指定html,js 指定位置插入html标签（可编辑div）

demo效果如下：

html代码部分如下：

js获取编辑框游标的位置

#Div1, #Div2

{

width: 500px;

height: 100px;

border: solid 1px black;

}

插入字符

dasdsadasdasdasddasdasdasdasdsadsa

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

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

insertHtmlAtCaret('');

})

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);

}

}

在一段字符串中的指定位置插入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文档文字，指定位置插入图片

先说下 需要的依赖包 org.apache.poipoi-ex ...

随机推荐

85. Maximal Rectangle

85. Maximal Rectangle Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle c ...

java beans

There are N little kids sitting in a circle, each of them are carrying some java beans in their hand ...

ACM: NBUT 1646 Internet of Lights and Switches - 二进制+map+vector

NBUT 1646 Internet of Lights and Switches Time Limit:5000MS     Memory Limit:65535KB     64bit IO Fo ...

PHP filesystem attack vectors

http://www.ush.it/2009/02/08/php-filesystem-attack-vectors/ On Apr 07, 2008 I spoke with Kuza55 and ...

Nagios-配置版

1  概念(简介) Nagios是插件式的结构,它本身没有任何监控功能,所有的监控都是通过插件进行的,因此其是高度模块化和富于弹性的.Nagios监控的对象可分为两类:主机和服务.主机通常指的是物理主 ...

读《MacTalk&;#183;人生元编程》及Mac经常使用软件

引子 池建强的Blog:http://www.cnblogs.com/chijianqiang/ 用了1年多的黑苹果,是用Windows的思维用UI.用Linux的思维用Shell,折腾的是联想E49 ...

python之路 - 基础2

1.导入模块 import 模块名 form 模块名 import 模块中的函数 可以将模块放入同级目录中,也可以将模块放入site-packages目录中 import sys print (sys ...

AngularJS vs. jQuery，看看谁更胜一筹

http://www.apjs.net/ http://docs.angularjs.cn/api/ng/function 本文由PHP100中文网编译,转载请看文末的转载要求,谢谢合作!除非特别声明 ...

Cisco 的基本配置实例之五----交换机的路由功能与DHCP 功能

5.配置交换机的路由功能 说明:只有在三层交换机上才有路由功能,其他的二层接入交换机要想在不同的vlan之间传送数据需要通过trunk口到核心交换机上进行完路由交换后才可以. TEST(config) ...

GitHub https链接中输入账户和密码

/********************************************************************** * GitHub https链接中输入账户和密码 * 说 ...