可编辑DIV （contenteditable="true"） 在鼠标光标处插入图片或者文字
近期需开发一个DIV做的编辑器，插入表情图片可直接预览效果，仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码，自己整理了下。写出来只是和大家分享下，我自己也不大懂，经过努力，幸好搞定。
蛋疼的事情出来了，当编辑框失去焦点时候，再插入图片时候总是插入在最前面（谷歌和火狐，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-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV可编辑框鼠标光标处插入图片或者文字。</title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js
"></script>
<script type="text/javascript">
$(function(){
$(".imgbox img").click(function(){
$("#testdiv").focus();
var sy = $(".imgbox img").index(this) + 1;
var img_url = "<img src='faceimg/"+sy+".gif'>";
/*此处如果不是插入图片可这样：
var img_url = "插入测试的文字";
*/
_insertimg(img_url);
})
//注：如果要插入的是那种“快捷发言，快捷留言”里的文字，只需把那些文字都分别放在A标签里即可，然后img_url=a标签里面的内容。工作中的编辑器终于搞定！能插入图片和快捷发言和表情图片等。
})
//监控粘贴(ctrl+v),如果是粘贴过来的东东，则替换多余的html代码，只保留<br>
function pasteHandler(){
setTimeout(function(){
var content = document.getElementById("testdiv").innerHTML;
valiHTML=["br"];
content=content.replace(/_moz_dirty=""/gi, "").replace(/\[/g, "[[-").replace(/\]/g, "-]]").replace(/<\/ ?tr[^>]*>/gi, "[br]").replace(/<\/ ?td[^>]*>/gi, " ").replace(/<(ul|dl|ol)[^>]*>/gi, "[br]").replace(/<(li|dd)[^>]*>/gi, "[br]").replace(/<p [^>]*>/gi, "[br]").replace(new RegExp("<(/?(?:" + valiHTML.join("|") + ")[^>]*)>", "gi"), "[$1]").replace(new RegExp('<span([^>]*class="?at"?[^>]*)>', "gi"), "[span$1]").replace(/<[^>]*>/g, "").replace(/\[\[\-/g, "[").replace(/\-\]\]/g, "]").replace(new RegExp("\\[(/?(?:" + valiHTML.join("|") + "|img|span)[^\\]]*)\\]", "gi"), "<$1>");
if(!$.browser.mozilla){
content=content.replace(/\r?\n/gi, "<br>");
}
document.getElementById("testdiv").innerHTML=content;
},1)
}
//锁定编辑器中鼠标光标位置。。
function _insertimg(str){
var selection= window.getSelection ? window.getSelection() : document.selection;
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
if (!window.getSelection){
document.getElementById('testdiv').focus();
var selection= window.getSelection ? window.getSelection() : document.selection;
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
range.pasteHTML(str);
range.collapse(false);
range.select();
}else{
document.getElementById('testdiv').focus();
range.collapse(false);
var hasR = range.createContextualFragment(str);
var hasR_lastChild = hasR.lastChild;
while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
var e = hasR_lastChild;
hasR_lastChild = hasR_lastChild.previousSibling;
hasR.removeChild(e)
}
range.insertNode(hasR);
if (hasR_lastChild) {
range.setEndAfter(hasR_lastChild);
range.setStartAfter(hasR_lastChild)
}
selection.removeAllRanges();
selection.addRange(range)
}
}
//监控按enter键和空格键，如果按了enter键，则取消原事件，用<BR/ >代替。此处还等待修改！！！！！！如果后端能实现各个浏览器回车键产生的P，div, br的输出问题话就无需采用这段JS、
function enterkey(){
e = event.keyCode;
if (e==13||e==32) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
event.returnValue = false; // 取消此事件的默认操作
if(document.selection && document.selection.createRange){
var myRange = document.selection.createRange();
myRange.pasteHTML('<br />');
}else if(window.getSelection){
var selection = window.getSelection();
var range = window.getSelection().getRangeAt(0);
range.deleteContents();
var newP = document.createElement('br');
range.insertNode(newP);
}
//alert(document.getElementById("testdiv").innerHTML)
}
}
</script>
<style type="text/css">
.editbox{width:400px;height:200px;border:1px solid #000; overflow-x:hidden; overflow-y:auto; outline:none;}
.editbox img{ margin:0 3px; display:inline;}
</style>
</head>
<body>
<div id="testdiv" contenteditable="true" class="editbox" onkeydown="enterkey()" >可以在任意文字后面插入图片或者文字哦！<br /></div>
<div class="imgbox">
<img src="faceimg/1.gif">
<img src="faceimg/2.gif">
<img src="faceimg/3.gif">
<img src="faceimg/4.gif">
</div>
<script type="text/javascript">
//此处必须防止在最下端。
var edt = document.getElementById("testdiv");
if(edt.addEventListener){
edt.addEventListener("paste",pasteHandler,false);
}else{
edt.attachEvent("onpaste",pasteHandler);
}
</script>
</body>
</html>
转载地址:http://hi.baidu.com/louve01/item/efb14e1add258f6b3f87cedb
可编辑DIV （contenteditable="true"） 在鼠标光标处插入图片或者文字的更多相关文章
- js在一个可编辑的div光标处插入图片或者文本（兼容ie，火狐等浏览器）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现文本框文本域光标处插入图片文本的插件（并且光标在插入内容的内容后显示）
js: /******************************************* * * 插入光标处的插件 * @authors Du xin li * @update 2015 ...
- IOS中div contenteditable=true无法输入
在IOS中<div contenteditable="true"></div>中点击时可以弹出键盘但是无法输入.加一个样式-webkit-user-sele ...
- 开启html元素的编辑模式contenteditable="true"
开启html元素的编辑模式contenteditable="true"
- JQ在光标处插入文字
内容转载自网络这是一个JQ的扩展方法.在teatarea获得焦点时,往光标处插入文字,扩展代码如下 (function($){ $.fn.extend({ "insert":fun ...
- 使用JS在textarea在光标处插入内容
// 在光标处插入字符串 // myField 文本框对象 // myValue 要插入的值 function insertAtCursor(myField, myValue) { //IE supp ...
- 苹果手机IOS中div contenteditable=true 仿文本域无法输入编辑
问题: 在苹果手机IOS中 contenteditable="true" 做文本域输入,点击可以弹出键盘但是无法输入,安卓都正常. 经测试后,记得加一个样式 -webkit-use ...
- IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时，ios无法正常唤起输入法键盘
原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...
- kindeditor在光标处插入编辑器外的数据
页面 <div class="form-group clearfix"> <label class="control-label col-sm-3 co ...
随机推荐
- javascript的语法作用域你真的懂了吗
原文:javascript的语法作用域你真的懂了吗 有段时间没有更新了,思绪一下子有点转不过来.正应了一句古话“一天不读书,无人看得出:一周不读书,开始会爆粗:一月不读书,智商输给猪.”.再加上周五晚 ...
- POJ 1006 Biorhythms 中国的法律来解决剩余的正式
这个问题以前用模拟的方法来解决亚军,正如溶液是一个通用的解决方案. 这里使用数学方法:剩下的孙子法(当然,被称为中国剩余法).由于建议的孙子.所以也承认外国的孙子是数学家. 参考数论建议大家学习的专业 ...
- Java
递归算法
其基本思路是递归算法设计:对于一个复杂的问题,原问题分为几个子问题相似相对简单.继续下去,直到孩子可以简单地解决问题,这是导出复发,因此,有复发的原始问题已经解决. 关键是要抓住: (1)递归出口 ( ...
- Android微信道共用,没有反应
研究2日,寻找良好的比较完整的文章一天.发送链接:http://www.apkbus.com/android-138326-1-1.html 然而,按照上面的教程一步一步做.结果点击分享或无反应. 出 ...
- select查询原理
原文:select查询原理 我并非专业DBA,但做为B/S架构的开发人员,总是离不开数据库,一般开发员只会应用SQL的四条经典语句:select ,insert,delete,update.但是我从来 ...
- tomcat的webapps文件夹下放更新后的项目就訪问不了
昨天给同事更新完程序,同事说更新后的程序訪问不了.它曾经的程序叫tj52,更新后的程序叫webapp.也就是tomcat的文件夹有两个文件架,一个叫webapp,一个叫tj52.最后另外一同事给了解决 ...
- CocoaPods在使用中的几个问题
来源: http://blog.cocoapods.org/Repairing-Our-Broken-Specs-Repository/ 1. 当把CocoaPods生成的workspace移动到上层 ...
- cocos2d-x-lua基础系列教程三（lua面向对象）
lua 类 Lua 事实上不是面向对象语言 我们能够用table 模拟仿照面向对象编程 lua 中的this 类似的是self table 也具有生命周期 2,使用table 创建类 projed ...
- Django查询的琐碎记录
我的需求是这样的,获取指定用户的获“赞”总数. 用户 models.py class UserProfile(models.Model): user = models.OneToOneField(Us ...
- Node.js连接MySQL数据库及构造JSON的正确姿势
做一下整理,以前也很随意的引入包链接数据库,后来发现常常连接出问题,异常退出,后来使用在网上一个方法解决问题,网址由于书签丢失,抱歉不能引用了.再有就是简单的模块化下,使得目录合理点,再有就是说明一下 ...