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>

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');
       }

}

</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 ...

随机推荐

解决RMI 客户端异常no security manager: RMI class loader disabled
解决方法: 客户端和服务端的Service包名改一致 ok!!
IOS版微信小视频导出方法
1.在电脑上连接手机,打开iTools 选择应用-应用-文件共享. 2.依次打开/Library/WechatPrivate/6e2809aac61608de6a6cc55d9570d25b/Sig ...
Android 英文文档下载地址
通过英文Android API学习Android技术是一个不错选择,当然养鸡的专业户要小心了,以下分享一些下载英文文档的链接(请使用迅雷下载): https://dl-ssl.google.com/a ...
一个简单的knockout.js 和easyui的绑定
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Basi ...
Spark GraphX 的数据可视化
概述 Spark GraphX 本身并不提供可视化的支持, 我们通过第三方库 GraphStream 和 Breeze 来实现这一目标详细代码下载:http://www.demodashi.com ...
openstack里面的Provider network 和 Tenant network 的区别
openstack里面的Provider network 和 Tenant network 的区别 openstack里面的网络相对复杂.经常有人对几个网络概念搞混淆,这里基本说明下 Openstac ...
jmeter ---常用字符串相关函数
主要的函数如下: 1.将字符串转为大写或小写: ${__lowercase(Hello,)} ${__uppercase(Hello,)}2.生成字符串: __RandomString函数 3.取 ...
Error_GL_KeyflexfieldDefinitionFactory.getStructureNumber无法找到应用产品
2014-07-12 BaoXinjian
Form_Form Builder的基本语法（概念）
2014-05-21 Created By BaoXinjian
Go TCP网路程序编写
client和server程序编写面向长连接的编程 http://files.cnblogs.com/files/yyx1-1/Go_TCP.7z

js在一个可编辑的div光标处插入图片或者文本（兼容ie，火狐等浏览器）

js在一个可编辑的div光标处插入图片或者文本（兼容ie，火狐等浏览器）的更多相关文章

随机推荐

热门专题