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>
最新文章
- python模块(六)
- Linux Crontab 安装使用详细说明
- 看懂UML类图
- 如何隐藏UITableView中的一项
- python---time和datetime
- jQuery fullPage.js 全屏滚动
- 循序渐进Python3(七) --1-- 面向对象
- 常见算法是js实现汇总(转载)
- 关于Qt的事件循环以及QEventLoop的简单使用
- 十佳AngularJS框架
- Magento Api 记录
- Windows Phone8开发工具包简述(转载)
- MVC View返回list列表
- 关于ASP.NET WebForm与ASP.NET MVC的比较
- 由 “无法使用从远程表选择的&#160;lob&#160;定位符” 错误而引导出来的一系列问题解决方案
- NetBeans运行项目报错
- 最新Java技术
- C#图像显示实现拖拽、锚点缩放功能【转】
- 基础总结(03)-- css有趣的特性
- 【原创】Linux基础之命令行浏览器links