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. bzoj2006 [NOI2010]超级钢琴 (及其拓展)

    bzoj2006 [NOI2010]超级钢琴 给定一个序列,求长度在 \([L,\ R]\) 之间的区间和的前 \(k\) 大之和 \(n\leq5\times10^5,\ k\leq2\times1 ...

  2. 一脸懵逼学习Storm---(一个开源的分布式实时计算系统)

    Storm的官方网址:http://storm.apache.org/index.html 1:什么是Storm? Storm是一个开源的分布式实时计算系统,可以简单.可靠的处理大量的数据流.被称作“ ...

  3. Linux SHELL中sh和bash的区别

    什么是SHELL? shell的中文意思就是贝壳,其实比较类似于我们内核的壳.简而言之就是只要能够操作应用程序的接口都能够称为SHELL.狭义的shell指的是命令行方面的软件,广义的SHELL则包括 ...

  4. 前端开发 JavaScript 规范文档

    一,规范目的 为提高团队协作效率,便于前端后期优化维护,输出高质量的文档. 二.基本准则 符合web标准,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序, 尽可能的减小服务器负载,保 ...

  5. phpcms不能批量更新栏目页和内容页

    需要给网站根目录更加users用户的写入权限.

  6. 安装Rocky版OpenStack 1控制节点+1计算节点环境部署脚本

    在上一篇文章中叙述了具体的安装部署过程,在这里把相应的部署脚本写出来,供大家参考: 一.执行部署的setup.sh脚本: #!/bin/bash ########################### ...

  7. (七)jdk8学习心得之join方法

    七.join方法 1. 作用:将list或者数组按照连接符进行连接,返回一个字符串. 2. 使用方法 1) String.join(“连接符”,数组对象或者list对象) 2) 首先转换成stream ...

  8. Spring Boot 2.x 编写 RESTful API (五) 单元测试

    用Spring Boot编写RESTful API 学习笔记 概念 驱动模块 被测模块 桩模块 替代尚未开发完毕的子模块 替代对环境依赖较大的子模块 (例如数据访问层) 示例 测试 Service @ ...

  9. Leetcode 4.28 Tree Easy

    1. 101. Symmetric Tree 用递归. class Solution { public boolean isSymmetric(TreeNode root) { if( root == ...

  10. cas-5.3.x接入REST登录认证,移动端登录解决方案

    一.部署cas-server及cas-sample-java-webapp 1.克隆cas-overlay-template项目并切换到5.3分支 git clone git@github.com:a ...