实例介绍
【实例截图】
原图
插入图片后
【核心代码】锁定编辑器中鼠标光标位置。。
<!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://code.jquery.com/jquery-1.10.2.min.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='bq/" 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;max-width:100px;} </style> <style type="text/css"> .imgbox img{max-width:100px;}; </style> </head> <body> <div id="testdiv" contenteditable="true" class="editbox" onkeydown="enterkey()" >可以在任意文字后面插入图片或者文字哦!<br /></div> <div class="imgbox"> <img src="bq/1.gif"> <img src="bq/2.gif"> <img src="bq/3.gif"> <img src="bq/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>
小贴士
感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论