<!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，火狐等浏览器）的更多相关文章

  1. 可编辑DIV （contenteditable="true"） 在鼠标光标处插入图片或者文字

    近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...

  2. js实现文本框文本域光标处插入图片文本的插件（并且光标在插入内容的内容后显示）

    js: /******************************************* * * 插入光标处的插件 * @authors Du xin li * @update    2015 ...

  3. div 光标处插入内容

    var Manager = { insertHtml: function(html, type) { var lastMemo = document.getElementById("memo ...

  4. 使用JS在textarea在光标处插入内容

    // 在光标处插入字符串 // myField 文本框对象 // myValue 要插入的值 function insertAtCursor(myField, myValue) { //IE supp ...

  5. JQ在光标处插入文字

    内容转载自网络这是一个JQ的扩展方法.在teatarea获得焦点时,往光标处插入文字,扩展代码如下 (function($){ $.fn.extend({ "insert":fun ...

  6. js在光标处插入内容

    //场景一 简易的页面可以这样写var range = window.getSelection().getRangeAt(0);range.insertNode(document.createText ...

  7. kindeditor在光标处插入编辑器外的数据

    页面 <div class="form-group clearfix"> <label class="control-label col-sm-3 co ...

  8. textarea光标处插入文字

    (function($) { $.fn.extend({ //myField 对象元素 myValue 插入值 insertAtCursor: function(myField,myValue) { ...

  9. JS在可编辑的div中的光标位置插入内容或表情

    <input type="button" value="插入字符" onclick="document.getElementById('test ...

随机推荐

  1. javascript ActiveX 获取ip和MAC

    <HTML><HEAD><TITLE>WMI Scripting HTML</TITLE> <META http-equiv=Content-Ty ...

  2. 通过jaxws-ri创建webservice服务端和客户端

    1. 获得开发包 当然是到 SUN 的开发网站下载 JAX-WS RI,或者下载我的网盘备份 ,下载下来的只是一个jar包,参考官网上的方法在命令行调用:java -jar JAXWS2.1.2-20 ...

  3. Unity 添加自定义菜单（插件），添加功能

    网上介绍如何写这种插件的文章很多...但是对于新手来说,最基本的,怎么运行这个插件,都不知道...网上的文章都懒得说这个...   幸好,看了半天官方网站别的资料,突然就发现办法了...   这个不是 ...

  4. asp.net MVC在IIS7或7.5上的发布问题

    按照网上的做法,开启了ISAPI和CGI限制C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll 应用程序池也设置好了,可是就是 ...

  5. jQuery 源码学习笔记

    //检测 window 中新增的对象 //first var oldMap = {}; for(var i in window) { oldMap[i] = 1; } //second for(var ...

  6. Linux下安装load generator步骤及问题解决

    Linux下安装load generator步骤及问题解决 上一篇 / 下一篇  2014-08-06 18:33:00 / 个人分类:loadrunner相关 查看( 146 ) / 评论( 0 ) ...

  7. hibernate4无法保存数据

    hibernate4无法保存数据 author: hiu 以后都发文章我都备注一下作者了,hiu就是我了 红色字体更新日期:2014-07-08 初次使用hibernate4,使用getCurrent ...

  8. 关于android屏幕适配的问题（drawable-xxxxxxxx，dp，sp，px等等），偶尔看到了android源代码，关于dpi的区分的值

    上一篇博客说了一下.9.png图片http://blog.csdn.net/qq_23195583/article/details/46737419 当然,点九的是指的能够进行拉伸的.那么假设图片不能 ...

  9. 【laravel5.4】中jquery的post Ajax提交

    1.post的ajax需要提交csrf_token字段,进行安全过滤 <meta name="csrf-token" content="{{ csrf_token( ...

  10. jmeter --- 基于InfluxDB&Grafana的JMeter实时性能测试数据的监控和展示

    转自:https://blog.csdn.net/RickyOne_RR/article/details/50637839 本文主要讲述如何利用JMeter监听器Backend Listener,配合 ...