在可编辑div的光标下插入html
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的更多相关文章
- 可编辑div,将光标定位到文本之后
类似qq回复一样,某人评论之后,在对评论进行回复之后,将光标定位到文本之后: function set_focus() { el=document.getElementById('guestbook_ ...
- 可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字
近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...
- div 可编辑--获取光标位置插入元素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Language" ...
- 2017-02-20 可编辑div中如何在光标位置添加内容
之前做了一个可编辑div需要在里面插入内容,搜了好多代码,就这个能实现我的功能,记录一下,以备以后用 <!DOCTYPE HTML> <html> <head> & ...
- 可编辑DIV与移动端软键盘兼容性问题汇总
此文复现的所有兼容性问题均为以下情况: 1. 腾讯X5内核 2. 全屏webview 问题如下: 1. IOS12 中软键盘弹出导致页面顶部截断,并且无法恢复. 解决方法:添加交互事件,调用本地方法, ...
- js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 可编辑div中包含子元素时获取光标位置不准确的问题
前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...
- js之向div contenteditable光标位置添加字符
js之向div contenteditable光标位置添加字符 原理: 在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的. 当我们去点击一个输入框的时候,实际上它会产生 ...
- textarea光标处插入文字
(function($) { $.fn.extend({ //myField 对象元素 myValue 插入值 insertAtCursor: function(myField,myValue) { ...
随机推荐
- Cordova入门系列(二)分析第一个helloworld项目 转发 https://www.cnblogs.com/lishuxue/p/6015420.html
Cordova入门系列(二)分析第一个helloworld项目 版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了如何创建一个cordova android项目,这章我们介绍一下创建的 ...
- zabbix目录
1.Linux实战教学笔记49:Zabbix监控平台3.2.4(一)搭建部署与概述 2.Linux实战教学笔记50:Zabbix监控平台3.2.4(二)深入理解zabbix 3.Linux实战教学笔记 ...
- CF396C On Changing Tree
CF396C On Changing Tree 给定一棵以 \(1\) 为根的树,初始时所有点权为 \(0\) 有 \(m\) 次操作,分为两种 \(1\ u\ x\ k\) 表示给以 \(u\) 的 ...
- js中uuid不被识别
后台传了uuid值给前台,然后js报错 原因:反正就是js不认你这个字符串,他觉得你这是应该是数字,但是后面想了想,也不是数字啊,然后就不认了. 解决办法:告诉他,为夫这里是字符串.拼接html的时候 ...
- uniApp——v-for 动态class、动态style
:class="i.themColor" <view v-for="i in htmlJSON" class="column" :c ...
- scala的多种集合的使用(4)之列表List(ListBuffer)的操作
1.List列表的创建和添加元素 1)最常见的创建list的方式之一. scala> val list = 1 :: 2 :: 3 :: Nil list: List[Int] = List(1 ...
- Git操作记录
记录一些用过的操作 增加远程推送分支 git remote add orgin http://xxxxx.git 直接新建本地分支,将远程分支提取出来. git checkout -t origin/ ...
- MySql插入点数据
DROP PROCEDURE IF EXISTS pre;delimiter $$ CREATE PROCEDURE pre ()BEGIN DECLARE i INT DEFAULT 1 ;WHIL ...
- MySQL之字符集
看unicode编码区从1 - 126就属于传统utf8区,当然utf8mb4也兼容这个区,126行以下就是utf8mb4扩充区 1.utf8与utf8mb4(utf8 most bytes 4) M ...
- springdata 一对多配置