js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在一个可编辑的div光标处插入图片或者文本</title>
</head>
<body>
<div style="width:500px; margin:20px auto; height:200px; border:1px solid red" contenteditable="true" id="reditor"></div>
<button id="contenteditable">插入图片</button>
</body>
</html>
<script>
window.onload=function(){
document.getElementById("contenteditable").onclick=function(){
Manager.insertImg();
};
}
var Manager = {
insertHtml:function(html,type){
var lastMemo=document.getElementById("memo"),lastEditor=document.getElementById("reditor");
type=type||'memo';
var control=type=='memo'?lastMemo:lastEditor;
if(!control)return;
control.focus();
var selection=window.getSelection?window.getSelection():document.selection,
range=selection.createRange?selection.createRange():selection.getRangeAt(0);
//判断浏览器是ie,但不是ie9以上
var browser = checkBrowser().split(":");
var IEbrowser = checkBrowser().split(":")[0];
var IEverson = Number(checkBrowser().split(":")[1]);
if(IEbrowser=="IE"&&IEverson<9){
range.pasteHTML(html);
}else{
var node=document.createElement('span');
node.innerHTML=html;
range.insertNode(node);
selection.addRange(range);
}
},
insertImg:function(){
var img="<img src='http://www.baidu.com/img/bdlogo.gif'/>";
this.insertHtml(img,'editor');
}
}
function checkBrowser()
{
var browserName=navigator.userAgent.toLowerCase();
//var ua = navigator.userAgent.toLowerCase();
var Sys = {};
var rtn = false;
if(/msie/i.test(browserName) && !/opera/.test(browserName)){
strBrowser = "IE: "+browserName.match(/msie ([\d.]+)/)[1];
rtn = true;
//return true;
}else if(/firefox/i.test(browserName)){
strBrowser = "Firefox: " + browserName.match(/firefox\/([\d.]+)/)[1];;
//return false;
}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
strBrowser = "Chrome: " + browserName.match(/chrome\/([\d.]+)/)[1];
//return false;
}else if(/opera/i.test(browserName)){
strBrowser = "Opera: " + browserName.match(/opera.([\d.]+)/)[1];
//return false;
}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
strBrowser = "Safari: ";
//return false;
}else{
strBrowser = "unKnow,未知浏览器 ";
//return false;
}
strBrowser = strBrowser ;
//alert(strBrowser)
return strBrowser;
}
</script>
js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)的更多相关文章
- 可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字
近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...
- js实现文本框文本域光标处插入图片文本的插件(并且光标在插入内容的内容后显示)
js: /******************************************* * * 插入光标处的插件 * @authors Du xin li * @update 2015 ...
- div 光标处插入内容
var Manager = { insertHtml: function(html, type) { var lastMemo = document.getElementById("memo ...
- 使用JS在textarea在光标处插入内容
// 在光标处插入字符串 // myField 文本框对象 // myValue 要插入的值 function insertAtCursor(myField, myValue) { //IE supp ...
- JQ在光标处插入文字
内容转载自网络这是一个JQ的扩展方法.在teatarea获得焦点时,往光标处插入文字,扩展代码如下 (function($){ $.fn.extend({ "insert":fun ...
- js在光标处插入内容
//场景一 简易的页面可以这样写var range = window.getSelection().getRangeAt(0);range.insertNode(document.createText ...
- kindeditor在光标处插入编辑器外的数据
页面 <div class="form-group clearfix"> <label class="control-label col-sm-3 co ...
- textarea光标处插入文字
(function($) { $.fn.extend({ //myField 对象元素 myValue 插入值 insertAtCursor: function(myField,myValue) { ...
- JS在可编辑的div中的光标位置插入内容或表情
<input type="button" value="插入字符" onclick="document.getElementById('test ...
随机推荐
- 用JavaScript 来创建 mac os x 程序这样是否好
在网上看到的文章: 用 JavaScript 编写 OS X 应用 (Tyler Gaw) 这个文章的内容是不错的. 可是思路呢? 我们假设想学一种方法或工具,这样做好吗? 我看了上面的代码.假设 ...
- ORACLE-SQL(一)
迁移时间:2017年6月1日10:02:43 CreateTime--2017年6月1日09:59:30Author:Marydon 一.SQL语句 (一)基础篇 1.1.1 where 子句 1 ...
- WEB客户端和服务器
# encoding=utf-8 #python 2.7.10 #xiaodeng #HTTP权威指南 #HTTP协议:超文本传输协议是在万维网上进行通信时所使用的协议方案. #WEB客户端和服务器: ...
- 金山PDF
金山是个很不错的软件公司,金山出PDF,纯粹是完善生态圈!毕竟没FoxitReader专业对PDF的处理上! 官网:芝麻开门 下载:http://wdl1.cache.wps.cn/wps/downl ...
- 原创:微信小程序调用【统一下单】、【支付】、【支付回调】api并处理请求
1.服务器端使用TP3.2处理(随便写在一个Controller里面) /* 小程序报名,生成订单 */ public function make_order(){ if(IS_POST){ $dat ...
- TCP/IP协议(转)
摘自:http://jpkc.nwpu.edu.cn/jp2006/rjjs/work/dzjc/rppt/chap08/08CH0005.HTM TCP/IP(Transmission Contro ...
- 如何用python轻松破解wifi密码( 源码 )
摘要: 我得说明下这个东西一点都不高端,甚至看起来有点糟糕.而且用的是单线程~,因为过几天要搬家了,于是.. 环境准备 python2.7 凑合的linux 差不多的无线网卡 pywifi模块 弱口令 ...
- 给你出道题:依次去掉离中心最远的M个点
给定一个数组a[N],里面包含N个向量.现在要求进行删点操作,删点原则如下: 1.求出N个向量的中心O1,删除离O1最远的那个点 2.求出N-1个向量的中心O2,删除O2最远的那个点 ...... 重 ...
- 【js】sort()
//为了实现排序,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串, //以确定如何排序.即使数组中的每一项都是数值,sort()方法比较的也是字符串, var v ...
- Oracle子查询相关内容(包含TOP-N查询和分页查询)
本节介绍Oracle子查询的相关内容: 实例用到的数据为oracle中scott用户下的emp员工表,dept部门表,数据如下: 一.子查询 1.概念:嵌入在一个查询中的另一个查询语句,也就是说一个查 ...