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

时间：2022-12-14 20:04:40

近期需开发一个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, "&nbsp;&nbsp;").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"） 在鼠标光标处插入图片或者文字的更多相关文章

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  3. IOS中div contenteditable&equals;true无法输入

    在IOS中<div contenteditable="true"></div>中点击时可以弹出键盘但是无法输入.加一个样式-webkit-user-sele ...

  4. 开启html元素的编辑模式contenteditable&equals;"true"

    开启html元素的编辑模式contenteditable="true"

  5. JQ在光标处插入文字

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

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

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

  7. 苹果手机IOS中div contenteditable&equals;true 仿文本域无法输入编辑

    问题: 在苹果手机IOS中 contenteditable="true" 做文本域输入,点击可以弹出键盘但是无法输入,安卓都正常. 经测试后,记得加一个样式 -webkit-use ...

  8. IOS中div contenteditable&equals;true无法输入 fastclick&period;js在点击一个可输入的div时，ios无法正常唤起输入法键盘

    原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...

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

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

随机推荐

  1. webpack使用tree shaking的问题。及关于UglifyJs不支持ES6的解决方案。

    webpack: plugins:[ new webpack.optimize.UglifyJsPlugin({ compress:{warning:true} }) ] 是的,一些dead code ...

  2. function的prototype

    prototype只有function才有的属性. var a = function() { this.age = 12; this.name = "haha"; }; a.pro ...

  3. HDU 1540 &sol; POJ 2892 Tunnel Warfare &lpar;单点更新，区间合并，求包含某点的最大连续个数&rpar;

    题意:一条线上有n个点,D x是破坏这个点,Q x是表示查询x所在的最长的连续的点的个数,R是恢复上一次破坏的点. 思路:这题的关键是查询. 将被毁的村庄看成空位,当查询某个点的时候,如果我们知道它左 ...

  4. 一款兼容pc 移动端的tab切换

    利用touchslider.js插件来制作的tab切换,可任意修改很方便~~~ 样式: <style> .box-163css{ width:100%; position:relative ...

  5. Color Cube – 国产的优秀配色取色工具

    官方下载地址:http://fancynode.dbankcloud.com/ColorCube2.0.1ForWin.rar 比如今天所要介绍的 Color Cube (配色神器) 就属于“功大于过 ...

  6. git 域名配置

    在Godaddy购买的域名: 查找DNSpod解析域名,没什么难度,就是添加一条记录,保存而已,记得在添加域名到DNSpod之后,复制两个NS地址到godaddy的域名服务器下: Git项目根目录下创 ...

  7. 第三章——分类（Classification）

    3.1 MNIST 本章介绍分类,使用MNIST数据集.该数据集包含七万个手写数字图片.使用Scikit-Learn函数即可下载该数据集: >>> from sklearn.data ...

  8. Office 2016 for Mac 64位16&period;14&period;1&lpar;180613&rpar;安装包&amp&semi;激活

    注意,本页面是属于Mac操作系统使用的Office,如需Windows版的Office请点击下面的传送门. Windows版Office:https://www.itpwd.com/12.html 激 ...

  9. RxJava 详解——简洁的异步操作（二）

    上次说的两个例子,事件的发出和消费都是在同一个线程的.如果只用上面的方法,实现出来的只是一个同步的观察者模式.观察者模式本身的目的就是异步机制,因此异步对于 RxJava 是至关重要的.而要实现异步, ...

  10. Lodop如何设置预览后导出带背景的图，打印不带背景图

    Lodop中的ADD_PRINT_SETUP_BKIMG,可以加载上背景图,该背景图在预览的时候可以显示也可以不显示,打印可以打印出来也可以不打印出来.一般套打,都是不打印背景图的,比如一些快递的快递 ...

相关文章