<!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>

最新文章

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

热门文章

  1. el表达式 多条件判断
  2. Knockout自定义绑定my97datepicker
  3. 创建安全的基于HTTP的api应用接口
  4. Hystrix的一个坑,queue中的run方法没有被执行?
  5. SQL Union作用
  6. 从一个Idea到产品需要经历哪些阶段?
  7. Ubuntu 10.04下如何查看分区的UUID
  8. 一个进程发起多个连接和gethostbyname等函数
  9. 文件描述符file descriptor与inode的相关知识
  10. STM32 usb_mem.c和usb_sil.c文件的分析