var reg = /<img src="(.*?)" dataUrl="(.*?)">/ig;
var needHtml = html.replace(reg, '$2')
div编辑器上传图片:
<!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">
/**
* 自定义编辑器
* @param {Object} id 编辑区
* @param {Object} control 操作区
*/
function insertImg(id,control){
this.bigBox = document.getElementById(id);
this.handles = document.getElementById(control);
this.handle = this.handles.children[0];
this.gethtml = this.handles.children[1];
this.init();
}
insertImg.prototype = {
init:function(){
this.edit(); //编辑操作
this.getResult(); //编辑操作
},
pasteHandler:function() {
var that = this;
/**
* 监控粘贴(ctrl+v),粘贴过来的替换多余的html代码,只保留<br>
*/
setTimeout(function() {
var content = that.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>");
}
that.innerHTML = content;
}, 1)
},
_insertimg:function(str) {
/*
* 锁定编辑器中鼠标光标位置。
*/
var selection = window.getSelection ? window.getSelection() : document.selection;
var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
if(!window.getSelection) {
this.bigBox.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 {
this.bigBox.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)
}
},
enterkey:function() {
/*
* 监控按enter键和空格键,如果按了enter键,则取消原事件,用<BR/ >代替。
*/
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);
}
}
},
edit:function() {
//复制粘贴以及回车换行操作
this.bigBox.onkeydown = this.enterkey;
this.bigBox.onpaste = this.pasteHandler;
//插入图片
var that = this;
this.handle.onclick = function() {
that.bigBox.focus();
var img_url = "<img src='./img/l.jpg' dataUrl='./A'>";
that._insertimg(img_url);
}
},
getResult:function() {
//获取需要的结果
var that = this;
this.gethtml.onclick = function() {
$(that.bigBox).find('br').remove(); //去除br
var html = $.trim(that.bigBox.innerHTML);
//正则修改img为自己想要的格式
var reg = /<img src="(.*?)" dataUrl="(.*?)">/ig;
//需要提交的内容
var needHtml = html.replace(reg, '##@$2@##')
}
}
}
</script>
<style type="text/css">
.editbox {
width: 400px;
height: 200px;
border: 1px solid #000;
overflow-x: hidden;
overflow-y: auto;
outline: none;
}
.imgbox{
width: 100px;
}
.editbox img {
margin: 0 3px;
width: 100px;
display: inline;
}
</style>
</head>
<body>
<div id="testdiv" contenteditable="true" class="editbox">可以在任意文字后面插入图片或者文字哦!</div>
<div id="handle">
<a href="javascript:void(0)" class="imgbox">插入</a>
<div class="getText">
获取文本
</div>
</div>
<script type="text/javascript">
$(function() {
/**
* 初始化 insertImg
*/
var insertImgs = new insertImg('testdiv','handle');
})
</script>
</body>
</html>