function pasteHtmlAtCaret(html, selectPastedContent) {
//参数1为要插入的html
//参数2为boolean 是否选中插入的html 默认为false
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents(); // Range.createContextualFragment() would be useful here but is
// only relatively recently standardized and is not supported in
// some browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
var firstNode = frag.firstChild;
range.insertNode(frag); // Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
if (selectPastedContent) {
range.setStartBefore(firstNode);
} else {
range.collapse(true);
}
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if ( (sel = document.selection) && sel.type != "Control") {
// IE < 9
var originalRange = sel.createRange();
originalRange.collapse(true);
sel.createRange().pasteHTML(html);
if (selectPastedContent) {
range = sel.createRange();
range.setEndPoint("StartToStart", originalRange);
range.select();
}
}
}

在可编辑div的光标下插入html的更多相关文章

  1. 可编辑div,将光标定位到文本之后

    类似qq回复一样,某人评论之后,在对评论进行回复之后,将光标定位到文本之后: function set_focus() { el=document.getElementById('guestbook_ ...

  2. 可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字

    近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...

  3. div 可编辑--获取光标位置插入元素

    <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Language" ...

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

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

  5. 可编辑DIV与移动端软键盘兼容性问题汇总

    此文复现的所有兼容性问题均为以下情况: 1. 腾讯X5内核 2. 全屏webview 问题如下: 1. IOS12 中软键盘弹出导致页面顶部截断,并且无法恢复. 解决方法:添加交互事件,调用本地方法, ...

  6. js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)

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

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

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

  8. js之向div contenteditable光标位置添加字符

    js之向div contenteditable光标位置添加字符  原理: 在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的. 当我们去点击一个输入框的时候,实际上它会产生 ...

  9. textarea光标处插入文字

    (function($) { $.fn.extend({ //myField 对象元素 myValue 插入值 insertAtCursor: function(myField,myValue) { ...

随机推荐

  1. ansible_playbook 一键搭建集群架构

    目录 基础优化 SSH.Ansible,批量管理服务项目 剧本开始-----.10分钟左右 mail.yaml base.yaml rsync.yaml nfs.yaml web.yaml tweb. ...

  2. 解决Jenkins运行robot framework selenium脚本不打开浏览器的问题

    1.总结就是,不能使用msi安装的jenkins,最好使用tomcat下的war包方式的jenkins 参考连接https://www.cnblogs.com/hotpsy/p/6907233.htm ...

  3. js实现分段上传文件

    使用js实现分段上传文件,本文使用了FileReader对象,可参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 1)获取文 ...

  4. 译注(2): How to Write a 21st Century Proof

    原文:Computer Scientist Tells Mathematicians How To Write Proofs 对比一下下面两个证明哪个更好? 版本一: "A square a ...

  5. nginx的概念与几种负载均衡算法

    Nginx的背景 Nginx和Apache一样都是一种WEB服务器.基于REST架构风格,以URI(Uniform Resources Identifier,统一资源描述符)或URL(Uniform ...

  6. AI佳作解读系列(四)——数据增强篇

    前言 在深度学习的应用过程中,数据的重要性不言而喻.继上篇介绍了数据合成(个人认为其在某种程度上可被看成一种数据增强方法)这个主题后,本篇聚焦于数据增强来介绍几篇杰作! (1)NanoNets : H ...

  7. Oracle计算两天两个日期间相差的天数

    Oracle计算两天两个日期间相差的天数: select to_date('19930411','yyyymmdd')-to_date('19890507','yyyymmdd') from dual ...

  8. DELPHI中build和compile有什么区别?

    Build编译全部与工程相关联的文件,可包括版本信息及工程中的预编译变量等:Compile只重新编译更改过的相关单元及文件,调试是Compile就可以了,若是发布,则Build为好 BUILD  =C ...

  9. ZooKeeper连接并创建节点以及实现分布式锁操作节点排序输出最小节点Demo

    class LockThread implements Runnable { private DistributedLock lock; public LockThread(int threadId, ...

  10. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...