一个简单编辑器

mmruy

于 2011-09-09 14:39:51 发布

阅读量1k

点赞数

文章标签： function border menu fckeditor div float

本文链接：https://blog.csdn.net/mmruy/article/details/6763661

版权

做一个聊天室的项目，聊天时要用到表情，还要能改变字体颜色，仅仅用textarea是无法做到的，所以想到用编辑器，现成的编辑器如fckeditor虽然功能强大，但显得“太重”，要统一风格改起来麻烦，于是决定自已写一个，参考了网上一些资料，基本达到要求，其代码如下：

一，index.html，这个是主页面，用了一个iframe

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE></TITLE>
<META http-equiv=content-type content="text/html; charset=gbk">
<SCRIPT>
/*----------------------------
   $Face Select$
----------------------------*/
function setMenuPosition(showid, offset) {
var showobj = $Obj(showid);
var menuobj = $Obj(showid + '_menu');
if(isUndefined(offset)) offset = 0;
if(showobj) {
   showobj.pos = fetchOffset(showobj);
   showobj.X = showobj.pos['left'];
   showobj.Y = showobj.pos['top'];
   showobj.w = showobj.offsetWidth;
   showobj.h = showobj.offsetHeight;
   menuobj.w = menuobj.offsetWidth;
   menuobj.h = menuobj.offsetHeight;
   if(offset != -1) {
    menuobj.style.left = (showobj.X + menuobj.w > document.body.clientWidth) && (showobj.X + showobj.w - menuobj.w >= 0) ? showobj.X + showobj.w - menuobj.w + 'px' : showobj.X + 'px';
    menuobj.style.top = offset == 1 ? showobj.Y + 'px' : (offset == 2 || ((showobj.Y + showobj.h + menuobj.h > document.documentElement.scrollTop + document.documentElement.clientHeight) && (showobj.Y - menuobj.h >= 0)) ? (showobj.Y - menuobj.h) + 'px' : showobj.Y + showobj.h + 'px');
   } else if(offset == -1) {
    menuobj.style.left = (document.body.clientWidth-menuobj.w)/2 + 'px';
    var divtop = document.documentElement.scrollTop + (document.documentElement.clientHeight-menuobj.h)/2;
    if(divtop > 100) divtop = divtop - 100;
    menuobj.style.top = divtop + 'px';
   }
   if(menuobj.style.clip && !is_opera) {
    menuobj.style.clip = 'rect(auto, auto, auto, auto)';
   }
}
}
function fetchOffset(obj) {
var left_offset = obj.offsetLeft;
var top_offset = obj.offsetTop;
while((obj = obj.offsetParent) != null) {
   left_offset += obj.offsetLeft;
   top_offset += obj.offsetTop;
}
return { 'left' : left_offset, 'top' : top_offset };
}
function $Obj(id) {
return document.getElementById(id);
}
function isUndefined(variable) {
return typeof variable == 'undefined' ? true : false;
}
function strlen(str) {
    var ie
return (ie && str.indexOf('\n') != -1) ? str.replace(/\r?\n/g, '_').length : str.length;
}
function insertContent(target, text) {
var obj = $Obj(target);
selection = document.selection;
if(!obj.hasfocus) {
   obj.focus();
}
if(!isUndefined(obj.selectionStart)) {
   var opn = obj.selectionStart + 0;
   obj.value = obj.value.substr(0, obj.selectionStart) + text + obj.value.substr(obj.selectionEnd);
} else if(selection && selection.createRange) {
   var sel = selection.createRange();
   sel.text = text;
   sel.moveStart('character', -strlen(text));
} else {
   obj.value += text;
}
}
//显示表情菜单
function showFace(showid, target) {
var div = $Obj('face_bg');
if(div) {
   div.parentNode.removeChild(div);
}
div = document.createElement('div');
div.id = 'face_bg';
div.style.position = 'absolute';
div.style.left = div.style.top = '0px';
div.style.width = '100%';
div.style.height = document.body.scrollHeight + 'px';
div.style.backgroundColor = '#000';
div.style.zIndex = 10000;
div.style.display = 'none';
div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=0,finishOpacity=100,style=0)';
div.style.opacity = 0;
div.onclick = function() {
   $Obj(showid+'_menu').style.display = 'none';
   $Obj('face_bg').style.display = 'none';
}
$Obj('face_show').appendChild(div);

if($Obj(showid + '_menu') != null) {
   $Obj(showid+'_menu').style.display = '';
} else {
   var faceDiv = document.createElement("div");
   faceDiv.id = showid+'_menu';
   faceDiv.className = 'facebox';
   faceDiv.style.position = 'absolute';
   var faceul = document.createElement("ul");
   for(i=1; i<22; i++) {
    var faceli = document.createElement("li");
    faceli.innerHTML = '<img src="image/face/'+i+'.gif" οnclick="insertFace(\''+showid+'\','+i+', \''+ target +'\')" style="cursor:pointer; position:relative;" />';
    faceul.appendChild(faceli);
   }
   faceDiv.appendChild(faceul);
   $Obj('face_show').appendChild(faceDiv)
}
//定位菜单
setMenuPosition(showid, 0);
div.style.display = '';
}
//插入表情
function insertFace(showid, id, target) {
var faceText = '<img src="image/face/'+id+'.gif">';
var faceText = '<img src="image/face/'+id+'.gif">';
var f = window.frames["htmlEditor"];
f.say(faceText);
$Obj(showid+'_menu').style.display = 'none';
$Obj('face_bg').style.display = 'none';
}

function textCounter(obj, showid, maxlimit) {
var len = strLen(obj.value);
var showobj = $Obj(showid);
if(len > maxlimit) {
   obj.value = getStrbylen(obj.value, maxlimit);
   showobj.innerHTML = '0';
} else {
   showobj.innerHTML = maxlimit - len;
}
if(maxlimit - len > 0) {
   showobj.parentNode.style.color = "";
} else {
   showobj.parentNode.style.color = "red";
}

}
function getStrbylen(str, len) {
var num = 0;
var strlen = 0;
var newstr = "";
var obj_value_arr = str.split("");
for(var i = 0; i < obj_value_arr.length; i ++) {
   if(i < len && num + byteLength(obj_value_arr[i]) <= len) {
    num += byteLength(obj_value_arr[i]);
    strlen = i + 1;
   }
}
if(str.length > strlen) {
   newstr = str.substr(0, strlen);
} else {
   newstr = str;
}
return newstr;
}
function byteLength (sStr) {
aMatch = sStr.match(/[^\x00-\x80]/g);
return (sStr.length + (! aMatch ? 0 : aMatch.length));
}
function strLen(str) {
var charset = document.charset;
var len = 0;
for(var i = 0; i < str.length; i++) {
   len += str.charCodeAt(i) < 0 || str.charCodeAt(i) > 255 ? (charset == "utf-8" ? 3 : 2) : 1;
}
return len;
}

//以下颜色选择器

<!-- 
var ColorHex=new Array('00','33','66','99','CC','FF') 
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF') 
var current=null 
function initcolor(evt) 
{ 
var colorTable='' 
for (i=0;i<2;i++) 
{ 
for (j=0;j<6;j++) 
{ 
colorTable=colorTable+'<tr height=15>' 
colorTable=colorTable+'<td width=15 style="background-color:#000000">' 
if (i==0){ 
colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'" οnclick="doclick(this.style.backgroundColor)">'} 
else{ 
colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+SpColorHex[j]+'" οnclick="doclick(this.style.backgroundColor)">'} 
colorTable=colorTable+'<td width=15 style="background-color:#000000">' 
for (k=0;k<3;k++) 
{ 
for (l=0;l<6;l++) 
{ 
colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'" οnclick="doclick(this.style.backgroundColor)">' 
} 
} 
} 
} 
colorTable='<table border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse;width:337px;" bordercolor="000000">' 
+'<tr height=20><td colspan=21 bgcolor=#ffffff style="font:12px tahoma;padding-left:2px;">' 
+'<span style="float:left;color:#999999;"></span>' 
+'<span style="float:right;padding-right:3px;cursor:pointer;" οnclick="colorclose()">×关闭</span>' 
+'</td></table>' 
+'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:pointer;">' 
+colorTable+'</table>'; 
document.getElementById("colorpane").innerHTML=colorTable; 
var current_x = document.getElementById("inputcolor").offsetLeft; 
var current_y = document.getElementById("inputcolor").offsetTop; 
//alert(current_x + "-" + current_y) 
document.getElementById("colorpane").style.left = current_x + "px"; 
document.getElementById("colorpane").style.top = current_y + "px"; 
} 
function doclick(obj){ 
colorclose();
alert(obj); 
var f = window.frames["htmlEditor"];
f.setcolor(obj);
} 
function colorclose(){ 
document.getElementById("colorpane").style.display = "none"; 
//alert("ok"); 
} 
function coloropen(){ 
document.getElementById("colorpane").style.display = ""; 
} 
window.onload = initcolor; 


</SCRIPT>
<script type="text/javascript">
function takechild(){
var f = window.frames["htmlEditor"];
f.send();
}
</script>
<style>
*{padding:0;margin:0}
body{text-align:center}
.all{margin:150px auto;text-align:left;width:440px;}
ul{list-style:none}
.facebox {BORDER: #ccc 1px solid; PADDING:2px;Z-INDEX: 100000; BACKGROUND: #fff;WIDTH: 250px; }
.facebox UL LI {FLOAT: left; OVERFLOW: hidden; WIDTH: 25px; HEIGHT: 25px}
.face {MARGIN: 0px 1px; VERTICAL-ALIGN: middle}
#doingface{display:block;width:34px; height:24px;float:left;background:#ccc url(image/facelist.gif);cursor:pointer}
#inputcolor{display:block;width:34px; height:24px;float:left;background:#acb url(image/facelist.gif);cursor:pointer}

.button{COLOR: #000;BORDER: #7b9ebd 1px solid; PADDING:2px 4px;FONT-SIZE: 14px;cursor:pointer;FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); }
</style>

<BODY><center>
<DIV id=face_show></DIV>
<div class=all>
<form method=post>
<span id=doingface οnclick="showFace(this.id, 'message');">表情</span>
<span id=inputcolor οnclick="coloropen(event)">颜色</span>
<br>



<iframe id="htmlEditor" src="edit.html"  width="438px"  height="72px" name="htmlEditor">


</iframe>
</div>
<br>



<button type="button" onClick="takechild();">发布</button>
</form>
</div>
<div id="colorpane" style="position:absolute;z-index:999;display:none;"></div> 
</center></BODY></HTML>

二、edit.html

<!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>无标题文档</title>
<style>
*{padding:0;margin:0}
body{text-align:left;font-size:12px;white-space : sWrap }
.all{margin:150px auto;text-align:left;width:440px;}
ul{list-style:none}
.facebox {BORDER: #ccc 1px solid; PADDING:2px;Z-INDEX: 100000; BACKGROUND: #fff;WIDTH: 250px; }
.facebox UL LI {FLOAT: left; OVERFLOW: hidden; WIDTH: 25px; HEIGHT: 25px}
.face {MARGIN: 0px 1px; VERTICAL-ALIGN: middle}
#doingface{display:block;width:34px; height:24px;float:left;background:#ccc url(image/facelist.gif);cursor:pointer}
.button{COLOR: #000;BORDER: #7b9ebd 1px solid; PADDING:2px 4px;FONT-SIZE: 14px;cursor:pointer;FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); }
</style>
<script type="text/javascript">
document.designMode = "on"; 
function say(i){
var a = document.body.innerHTML;
document.body.innerHTML = a + i;
}

function setcolor(obj){
  document.getElementById("mybody").style.color = obj;
}

function send(){
 alert(document.body.innerHTML);
}
</script>
</head>

<body id = "mybody">

  
</body>
</html>