开发属于自己的在线编辑器--编辑器的界面

 刚刚更新完版本，今天抽点时间给大家写个教程，开发一个属于自己的编辑器，如果其中有错误，或者有更好的方法请大家提出

界面篇(编辑器的界面)

主要是对css的控制，我在写木子编辑器之前，也在其他论坛发过很多帖子，但是都没有正确的答复，今天把我所知道的分享出来，希望对还不知道的新手有点帮助

 

之前的版本编辑器是一张张的小图片，如果你有使用过其他的编辑器你会发现就是一张整图片(如上图所示)，但是这要怎么去分割呢，使用css 的 background-position 进行图片定位

先定义一个数值，根据图片的位置显示相应的内容
var editorbar = [
['font_size','字体大小','1'],
['bold','加粗','0'],
['italic','斜体','0'],
['underline','下划线','0'],
['justifyleft','内容居左','0'],
['justifycenter','内容居中','0'],
['justifyright','内容居右','0'],
['link','添加链接','1'],
['Unlink','删除链接-需要切换到所见即所得模式','0'],
['font_color','字体颜色','1'],
['upload_img','上传图片','1'],
['smiles','插入表情','1'],
['media','插入视频','1'],
['flash','插入flash','1'],
['table','插入表格','1'],
['removeformat','删除格式-需要切换到所见即所得模式','0'],
['help','使用帮助','1'],
['html','代码模式','0']
];

然后使用for循环出上面的数组，然后设置相应的CSS，就能出效果了
var str="";
for(i=0;i<editorbar.length;i++)
{
str += (editorbar[2] == '1') ?
'<span class ="mz_icon_inline" title="'+editorbar[1]+'">
<img src=\"'+mz_path+'icos/b.gif\" class="mz_icon_url mz_ico_'+editorbar[0]+ '" ></span>' :
'<span class ="mz_icon_inline" title="'+editorbar[1]+'">
<img src=\"'+mz_path+'icos/b.gif\" class="mz_icon_url mz_ico_'+editorbar[0]+ '"></span>';
}

关键的红色字体样式如下
.mz_icon_url { background-image:url(icos/editor.png); background-repeat: no-repeat; display:inline-block; font-size: 0; line-height: 0;}

载入editor.png 编辑器背景图

.mz_ico_font_size{ background-position: -0px 0px; width:30px; height: 23px; }
.mz_ico_bold{ background-position: -38px 0px; width:20px; height: 23px; }

进行图片定位

总结：最关键的就是在 background-position 这个属性

第二篇 开发属于自己的在线编辑器--编辑器的核心

 

原文地址：http://www.mzrui.com/forum.php?mod=viewthread&tid=156&fromuid=2