以下是 带表情kindEditor编辑器特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>带表情kindEditor编辑器</title>
<style>
form {
margin: 0;
}
h3{
text-align:center;
}
textarea {
display: block;
}
form .ke-container {
margin: 0 auto;
}
</style>
<link href="themes/default/default.css" rel="stylesheet" />
<script src="js/kindeditor-min.js"></script>
<script src="js/emoticons.js"></script>
<script src="js/zh_CN.js"></script>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
resizeType : 1,
allowPreviewEmoticons : false,
allowImageUpload : false,
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link']
});
});
</script>
</head>
<body>
<h3>KindEditor更改默认的表情图片</h3>
<form>
<textarea name="content" style="width:700px;height:200px;visibility:hidden;">KindEditor</textarea>
</form>
</body>
</html>JS代码(emoticons.js):
/******************************************************************************** @author panderman <panderman@163.com>* @site http://www.xunwee.com/* @licence http://www.kindsoft.net/license.php*******************************************************************************/
KindEditor.plugin('emoticons',function (K){
var self = this,name = 'emoticons',path = (self.emoticonsPath || self.pluginsPath + '../../images/'),allowPreview = self.allowPreviewEmoticons === undefined ? true:self.allowPreviewEmoticons;
self.clickToolbar(name,function (){
var elements = [],menu = self.createMenu({
name:name}
),html = '<div class="ke-plugin-emoticons">\ <link rel="stylesheet" type="text/css" href="' + path + 'emoticon.css" />\ <div id="tabPanel" class="neweditor-tab">\ <div id="tabMenu" class="neweditor-tab-h">\ <div>精选</div>\ <div >兔斯基</div>\ <div >绿豆蛙</div>\ <div >BOBO</div>\ <div >baby猫</div>\ <div >泡泡</div>\ <div >有啊</div>\ </div>\ <div id="tabContent" class="neweditor-tab-b">\ <div id="tab0"></div>\ <div id="tab1"></div>\ <div id="tab2"></div>\ <div id="tab3"></div>\ <div id="tab4"></div>\ <div id="tab5"></div>\ <div id="tab6"></div>\ </div>\ </div>\ <div id="tabIconReview"><img id="faceReview" class="review" src="' + path + '0.gif" /></div></div>\ </div>';
menu.div.append(K(html));
function removeEvent(){
K.each(elements,function (){
this.unbind();
}
);
}
/*******************************************表情方法开始******************************************************/
function initImgBox(box,str,len){
if (box.length) return;
var tmpStr = "",i = 1;
for (;
i <= len;
i++){
tmpStr = str;
if (i < 10) tmpStr = tmpStr + '0';
tmpStr = tmpStr + i + '.gif';
box.push(tmpStr);
}
}
function $G(id){
return document.getElementById(id)}
function InsertSmiley(url){
var obj ={
src:editor.options.emotionLocalization ? editor.options.UEDITOR_HOME_URL + "dialogs/emotion/" + url:url}
;
obj.data_ue_src = obj.src;
editor.execCommand('insertimage',obj);
dialog.popup.hide();
}
function over(td,srcPath,posFlag){
td.style.backgroundColor = "#ACCD3C";
$G('faceReview').style.backgroundImage = "url(" + srcPath + ")";
if (posFlag == 1) $G("tabIconReview").className = "show";
$G("tabIconReview").style.display = 'block';
}
function bindCellEvent(td){
//表情绑定事件 td.mouseover(function (){
var obj = K(this);
var sUrl = obj.attr("sUrl"),posFlag = obj.attr("posflag");
obj.css({
"background-color":"#ACCD3C"}
);
$G('faceReview').style.backgroundImage = "url(" + sUrl + ")";
if (posFlag == "1") $G("tabIconReview").className = "show";
$G("tabIconReview").style.display = 'block';
}
);
td.mouseout(function (){
var obj = K(this);
obj.css({
"background-color":"#FFFFFF"}
);
var tabIconRevew = $G("tabIconReview");
tabIconRevew.className = "";
tabIconRevew.style.display = 'none';
}
);
td.click(function (e){
self.insertHtml('<img src="' + K(this).attr("realUrl") + '" border="0" alt="" />').hideMenu().focus();
}
);
}
var emotion ={
}
;
emotion.SmileyPath = path;
emotion.SmileyBox ={
tab0:[],tab1:[],tab2:[],tab3:[],tab4:[],tab5:[],tab6:[]}
;
emotion.SmileyInfor ={
tab0:[],tab1:[],tab2:[],tab3:[],tab4:[],tab5:[],tab6:[]}
;
var faceBox = emotion.SmileyBox;
var inforBox = emotion.SmileyInfor;
var sBasePath = emotion.SmileyPath;
initImgBox(faceBox['tab0'],'j_00',30);
initImgBox(faceBox['tab1'],'t_00',40);
initImgBox(faceBox['tab2'],'l_00',52);
initImgBox(faceBox['tab3'],'b_00',63);
initImgBox(faceBox['tab4'],'bc_00',20);
initImgBox(faceBox['tab5'],'f_00',50);
initImgBox(faceBox['tab6'],'y_00',40);
inforBox['tab0'] = [];
inforBox['tab1'] = ['Kiss','Love','Yeah','啊！','背扭','顶','抖胸','88','汗','瞌睡','鲁拉','拍砖','揉脸','生日快乐','摊手','睡觉','瘫坐','无聊','星星闪','旋转','也不行','郁闷','正Music','抓墙','撞墙至死','歪头','戳眼','飘过','互相拍砖','砍死你','扔桌子','少林寺','什么？','转头','我爱牛奶','我踢','摇晃','晕厥','在笼子里','震荡'];
inforBox['tab2'] = ['大笑','瀑布汗~','惊讶','臭美','傻笑','抛媚眼','发怒','我错了','money','气愤','挑逗','吻','怒','胜利','委屈','受伤','说啥呢？','闭嘴','不','逗你玩儿','飞吻','眩晕','魔法','我来了','睡了','我打','闭嘴','打','打晕了','刷牙','爆揍','炸弹','倒立','刮胡子','邪恶的笑','不要不要','爱恋中','放大仔细看','偷窥','超高兴','晕','松口气','我跑','享受','修养','哭','汗','啊~','热烈欢迎','打酱油','俯卧撑','?'];
inforBox['tab3'] = ['HI','KISS','不说','不要','扯花','大心','顶','大惊','飞吻','鬼脸','害羞','口水','狂哭','来','泪眼','流泪','生气','吐舌','喜欢','旋转','再见','抓狂','汗','鄙视','拜','吐血','嘘','打人','蹦跳','变脸','扯肉','吃To','吃花','吹泡泡糖','大变身','飞天舞','回眸','可怜','猛抽','泡泡','苹果','亲','','骚舞','烧香','睡','套娃娃','捅捅','舞倒','西红柿','爱慕','摇','摇摆','杂耍','招财','被殴','被球闷','大惊','理想','欧打','呕吐','碎','吐痰'];
inforBox['tab4'] = ['发财了','吃西瓜','套牢','害羞','庆祝','我来了','敲打','晕了','胜利','臭美','被打了','贪吃','迎接','酷','顶','幸运','爱心','躲','送花','选择'];
inforBox['tab5'] = ['微笑','亲吻','调皮','惊讶','耍酷','发火','害羞','汗水','大哭','得意','鄙视','困','夸奖','晕倒','疑问','媒婆','狂吐','青蛙','发愁','亲吻','','爱心','心碎','玫瑰','礼物','哭','奸笑','可爱','得意','呲牙','暴汗','楚楚可怜','困','哭','生气','惊讶','口水','彩虹','夜空','太阳','钱钱','灯泡','咖啡','蛋糕','音乐','爱','胜利','赞','鄙视','OK'];
inforBox['tab6'] = ['男兜','女兜','开心','乖乖','偷笑','大笑','抽泣','大哭','无奈','滴汗','叹气','狂晕','委屈','超赞','??','疑问','飞吻','天使','撒花','生气','被砸','口水','泪奔','吓傻','吐舌头','点头','随意吐','旋转','困困','鄙视','狂顶','篮球','再见','欢迎光临','恭喜发财','稍等','我在线','恕不议价','库房有货','货在路上'];
//大对象 FaceHandler ={
imageFolders:{
tab0:'jx2/',tab1:'tsj/',tab2:'ldw/',tab3:'bobo/',tab4:'babycat/',tab5:'face/',tab6:'youa/'}
,imageWidth:{
tab0:35,tab1:35,tab2:35,tab3:35,tab4:35,tab5:35,tab6:35}
,imageCols:{
tab0:11,tab1:11,tab2:11,tab3:11,tab4:11,tab5:11,tab6:11}
,imageColWidth:{
tab0:3,tab1:3,tab2:3,tab3:3,tab4:3,tab5:3,tab6:3}
,imageCss:{
tab0:'jd',tab1:'tsj',tab2:'ldw',tab3:'bb',tab4:'cat',tab5:'pp',tab6:'youa'}
,imageCssOffset:{
tab0:35,tab1:35,tab2:35,tab3:35,tab4:35,tab5:25,tab6:35}
,tabExist:[0,0,0,0,0,0,0]}
;
function switchTab(index){
if (FaceHandler.tabExist[index] == 0){
FaceHandler.tabExist[index] = 1;
createTab('tab' + index);
}
//获取呈现元素句柄数组 var tabMenu = $G("tabMenu").getElementsByTagName("div"),tabContent = $G("tabContent").getElementsByTagName("div"),i = 0,L = tabMenu.length;
//隐藏所有呈现元素 for (;
i < L;
i++){
tabMenu[i].className = "";
tabContent[i].style.display = "none";
}
//显示对应呈现元素 tabMenu[index].className = "on";
tabContent[index].style.display = "block";
}
function createTab(tabName){
var faceVersion = "?v=1.1",//版本号 tab = $G(tabName),//获取将要生成的Div句柄 imagePath = sBasePath + FaceHandler.imageFolders[tabName],//获取显示表情和预览表情的路径 imageColsNum = FaceHandler.imageCols[tabName],//每行显示的表情个数 positionLine = imageColsNum / 2,//中间数 iWidth = iHeight = FaceHandler.imageWidth[tabName],//图片长宽 iColWidth = FaceHandler.imageColWidth[tabName],//表格剩余空间的显示比例 tableCss = FaceHandler.imageCss[tabName],cssOffset = FaceHandler.imageCssOffset[tabName],textHTML = ['<table class="smileytable" cellpadding="1" cellspacing="0" align="center" style="border-collapse:collapse;
" border="1" bordercolor="#BAC498" width="100%">'],i = 0,imgNum = faceBox[tabName].length,imgColNum = FaceHandler.imageCols[tabName],faceImage,sUrl,realUrl,posflag,offset,infor;
for (;
i < imgNum;
){
textHTML.push('<tr>');
for (var j = 0;
j < imgColNum;
j++,i++){
faceImage = faceBox[tabName][i];
if (faceImage){
sUrl = imagePath + faceImage + faceVersion;
realUrl = imagePath + faceImage;
posflag = j < positionLine ? 0:1;
offset = cssOffset * i * (-1) - 1;
infor = inforBox[tabName][i];
textHTML.push('<td class="' + tableCss + '" sUrl="' + sUrl + '" posflag="' + posflag + '" realUrl="' + realUrl.replace(/'/g,"\\'") + '" border="1" width="' + iColWidth + '%" style="border-collapse:collapse;
" align="center" bgcolor="#FFFFFF">');
textHTML.push('<span style="display:block;
">');
textHTML.push('<img style="background-position:left ' + offset + 'px;
" title="' + infor + '" src="' + sBasePath + '0.gif" width="' + iWidth + '" height="' + iHeight + '"></img>');
textHTML.push('</span>');
}
else{
textHTML.push('<td width="' + iColWidth + '%" bgcolor="#FFFFFF">');
}
textHTML.push('</td>');
}
textHTML.push('</tr>');
}
textHTML.push('</table>');
textHTML = textHTML.join("");
tab.innerHTML = textHTML;
K("td[class='" + tableCss + "']").each(function (){
//表情绑定事件 bindCellEvent(K(this));
}
);
}
//初始显示第一个表情目录 switchTab(0);
K("div#tabMenu>div").each(function (index){
//标签切换绑定事件 K(this).click(function (){
switchTab(index);
}
);
}
);
/**********************************************表情方法结束*****************************************************/
}
);
}
);
JS代码(zh_CN.js):
/******************************************************************************** KindEditor - WYSIWYG HTML Editor for Internet* Copyright (C) 2006-2011 kindsoft.net** @author Roddy <luolonghao@gmail.com>* @site http://www.kindsoft.net/* @licence http://www.kindsoft.net/license.php*******************************************************************************/
KindEditor.lang({
source:'HTML代码',preview:'预览',undo:'后退(Ctrl+Z)',redo:'前进(Ctrl+Y)',cut:'剪切(Ctrl+X)',copy:'复制(Ctrl+C)',paste:'粘贴(Ctrl+V)',plainpaste:'粘贴为无格式文本',wordpaste:'从Word粘贴',selectall:'全选(Ctrl+A)',justifyleft:'左对齐',justifycenter:'居中',justifyright:'右对齐',justifyfull:'两端对齐',insertorderedlist:'编号',insertunorderedlist:'项目符号',indent:'增加缩进',outdent:'减少缩进',subscript:'下标',superscript:'上标',formatblock:'段落',fontname:'字体',fontsize:'文字大小',forecolor:'文字颜色',hilitecolor:'文字背景',bold:'粗体(Ctrl+B)',italic:'斜体(Ctrl+I)',underline:'下划线(Ctrl+U)',strikethrough:'删除线',removeformat:'删除格式',image:'图片',multiimage:'批量图片上传',flash:'Flash',media:'视音频',table:'表格',tablecell:'单元格',hr:'插入横线',emoticons:'插入表情',link:'超级链接',unlink:'取消超级链接',fullscreen:'全屏显示',about:'关于',print:'打印(Ctrl+P)',filemanager:'文件空间',code:'插入程序代码',map:'Google地图',baidumap:'百度地图',lineheight:'行距',clearhtml:'清理HTML代码',pagebreak:'插入分页符',quickformat:'一键排版',insertfile:'插入文件',template:'插入模板',anchor:'锚点',yes:'确定',no:'取消',close:'关闭',editImage:'图片属性',deleteImage:'删除图片',editFlash:'Flash属性',deleteFlash:'删除Flash',editMedia:'视音频属性',deleteMedia:'删除视音频',editLink:'超级链接属性',deleteLink:'取消超级链接',editAnchor:'锚点属性',deleteAnchor:'删除锚点',tableprop:'表格属性',tablecellprop:'单元格属性',tableinsert:'插入表格',tabledelete:'删除表格',tablecolinsertleft:'左侧插入列',tablecolinsertright:'右侧插入列',tablerowinsertabove:'上方插入行',tablerowinsertbelow:'下方插入行',tablerowmerge:'向下合并单元格',tablecolmerge:'向右合并单元格',tablerowsplit:'拆分行',tablecolsplit:'拆分列',tablecoldelete:'删除列',tablerowdelete:'删除行',noColor:'无颜色',pleaseSelectFile:'请选择文件。',invalidImg:"请输入有效的URL地址。\n只允许jpg,gif,bmp,png格式。",invalidMedia:"请输入有效的URL地址。\n只允许swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb格式。",invalidWidth:"宽度必须为数字。",invalidHeight:"高度必须为数字。",invalidBorder:"边框必须为数字。",invalidUrl:"请输入有效的URL地址。",invalidRows:'行数为必选项，只允许输入大于0的数字。',invalidCols:'列数为必选项，只允许输入大于0的数字。',invalidPadding:'边距必须为数字。',invalidSpacing:'间距必须为数字。',invalidJson:'服务器发生故障。',uploadSuccess:'上传成功。',cutError:'您的浏览器安全设置不允许使用剪切操作，请使用快捷键(Ctrl+X)来完成。',copyError:'您的浏览器安全设置不允许使用复制操作，请使用快捷键(Ctrl+C)来完成。',pasteError:'您的浏览器安全设置不允许使用粘贴操作，请使用快捷键(Ctrl+V)来完成。',ajaxLoading:'加载中，请稍候 ...',uploadLoading:'上传中，请稍候 ...',uploadError:'上传错误','plainpaste.comment':'请使用快捷键(Ctrl+V)把内容粘贴到下面的方框里。','wordpaste.comment':'请使用快捷键(Ctrl+V)把内容粘贴到下面的方框里。','code.pleaseInput':'请输入程序代码。','link.url':'URL','link.linkType':'打开类型','link.newWindow':'新窗口','link.selfWindow':'当前窗口','flash.url':'URL','flash.width':'宽度','flash.height':'高度','flash.upload':'上传','flash.viewServer':'文件空间','media.url':'URL','media.width':'宽度','media.height':'高度','media.autostart':'自动播放','media.upload':'上传','media.viewServer':'文件空间','image.remoteImage':'网络图片','image.localImage':'本地上传','image.remoteUrl':'图片地址','image.localUrl':'上传文件','image.size':'图片大小','image.width':'宽','image.height':'高','image.resetSize':'重置大小','image.align':'对齐方式','image.defaultAlign':'默认方式','image.leftAlign':'左对齐','image.rightAlign':'右对齐','image.imgTitle':'图片说明','image.upload':'浏览...','image.viewServer':'图片空间','multiimage.uploadDesc':'允许用户同时上传<%=uploadLimit%>张图片，单张图片容量不超过<%=sizeLimit%>','multiimage.startUpload':'开始上传','multiimage.clearAll':'全部清空','multiimage.insertAll':'全部插入','multiimage.queueLimitExceeded':'文件数量超过限制。','multiimage.fileExceedsSizeLimit':'文件大小超过限制。','multiimage.zeroByteFile':'无法上传空文件。','multiimage.invalidFiletype':'文件类型不正确。','multiimage.unknownError':'发生异常，无法上传。','multiimage.pending':'等待上传','multiimage.uploadError':'上传失败','filemanager.emptyFolder':'空文件夹','filemanager.moveup':'移到上一级文件夹','filemanager.viewType':'显示方式：','filemanager.viewImage':'缩略图','filemanager.listImage':'详细信息','filemanager.orderType':'排序方式：','filemanager.fileName':'名称','filemanager.fileSize':'大小','filemanager.fileType':'类型','insertfile.url':'URL','insertfile.title':'文件说明','insertfile.upload':'上传','insertfile.viewServer':'文件空间','table.cells':'单元格数','table.rows':'行数','table.cols':'列数','table.size':'大小','table.width':'宽度','table.height':'高度','table.percent':'%','table.px':'px','table.space':'边距间距','table.padding':'边距','table.spacing':'间距','table.align':'对齐方式','table.textAlign':'水平对齐','table.verticalAlign':'垂直对齐','table.alignDefault':'默认','table.alignLeft':'左对齐','table.alignCenter':'居中','table.alignRight':'右对齐','table.alignTop':'顶部','table.alignMiddle':'中部','table.alignBottom':'底部','table.alignBaseline':'基线','table.border':'边框','table.borderWidth':'边框','table.borderColor':'颜色','table.backgroundColor':'背景颜色','map.address':'地址:','map.search':'搜索','baidumap.address':'地址:','baidumap.search':'搜索','baidumap.insertDynamicMap':'插入动态地图','anchor.name':'锚点名称','formatblock.formatBlock':{
h1:'标题 1',h2:'标题 2',h3:'标题 3',h4:'标题 4',p:'正 文'}
,'fontname.fontName':{
'SimSun':'宋体','NSimSun':'新宋体','FangSong_GB2312':'仿宋_GB2312','KaiTi_GB2312':'楷体_GB2312','SimHei':'黑体','Microsoft YaHei':'微软雅黑','Arial':'Arial','Arial Black':'Arial Black','Times New Roman':'Times New Roman','Courier New':'Courier New','Tahoma':'Tahoma','Verdana':'Verdana'}
,'lineheight.lineHeight':[{
'1':'单倍行距'}
,{
'1.5':'1.5倍行距'}
,{
'2':'2倍行距'}
,{
'2.5':'2.5倍行距'}
,{
'3':'3倍行距'}
],'template.selectTemplate':'可选模板','template.replaceContent':'替换当前内容','template.fileList':{
'1.html':'图片和文字','2.html':'表格','3.html':'项目编号'}
}
,'zh_CN');
CSS代码(default.css):
/* common */
.ke-inline-block{display:-moz-inline-stack;display:inline-block;vertical-align:middle;zoom:1;*display:inline;}
.ke-clearfix{zoom:1;}
.ke-clearfix:after{content:".";display:block;clear:both;font-size:0;height:0;line-height:0;visibility:hidden;}
.ke-shadow{box-shadow:1px 1px 3px #A0A0A0;-moz-box-shadow:1px 1px 3px #A0A0A0;-webkit-box-shadow:1px 1px 3px #A0A0A0;filter:progid:DXImageTransform.Microsoft.Shadow(color='#A0A0A0',Direction=135,Strength=3);background-color:#F0F0EE;}
.ke-menu a,.ke-menu a:hover,.ke-dialog a,.ke-dialog a:hover{color:#337FE5;text-decoration:none;}
/* icons */
.ke-icon-source{background-position:0px 0px;width:16px;height:16px;}
.ke-icon-preview{background-position:0px -16px;width:16px;height:16px;}
.ke-icon-print{background-position:0px -32px;width:16px;height:16px;}
.ke-icon-undo{background-position:0px -48px;width:16px;height:16px;}
.ke-icon-redo{background-position:0px -64px;width:16px;height:16px;}
.ke-icon-cut{background-position:0px -80px;width:16px;height:16px;}
.ke-icon-copy{background-position:0px -96px;width:16px;height:16px;}
.ke-icon-paste{background-position:0px -112px;width:16px;height:16px;}
.ke-icon-selectall{background-position:0px -128px;width:16px;height:16px;}
.ke-icon-justifyleft{background-position:0px -144px;width:16px;height:16px;}
.ke-icon-justifycenter{background-position:0px -160px;width:16px;height:16px;}
.ke-icon-justifyright{background-position:0px -176px;width:16px;height:16px;}
.ke-icon-justifyfull{background-position:0px -192px;width:16px;height:16px;}
.ke-icon-insertorderedlist{background-position:0px -208px;width:16px;height:16px;}
.ke-icon-insertunorderedlist{background-position:0px -224px;width:16px;height:16px;}
.ke-icon-indent{background-position:0px -240px;width:16px;height:16px;}
.ke-icon-outdent{background-position:0px -256px;width:16px;height:16px;}
.ke-icon-subscript{background-position:0px -272px;width:16px;height:16px;}
.ke-icon-superscript{background-position:0px -288px;width:16px;height:16px;}
.ke-icon-date{background-position:0px -304px;width:25px;height:16px;}
.ke-icon-time{background-position:0px -320px;width:25px;height:16px;}
.ke-icon-formatblock{background-position:0px -336px;width:25px;height:16px;}
.ke-icon-fontname{background-position:0px -352px;width:21px;height:16px;}
.ke-icon-fontsize{background-position:0px -368px;width:23px;height:16px;}
.ke-icon-forecolor{background-position:0px -384px;width:20px;height:16px;}
.ke-icon-hilitecolor{background-position:0px -400px;width:23px;height:16px;}
.ke-icon-bold{background-position:0px -416px;width:16px;height:16px;}
.ke-icon-italic{background-position:0px -432px;width:16px;height:16px;}
.ke-icon-underline{background-position:0px -448px;width:16px;height:16px;}
.ke-icon-strikethrough{background-position:0px -464px;width:16px;height:16px;}
.ke-icon-removeformat{background-position:0px -480px;width:16px;height:16px;}
.ke-icon-image{background-position:0px -496px;width:16px;height:16px;}
.ke-icon-flash{background-position:0px -512px;width:16px;height:16px;}
.ke-icon-media{background-position:0px -528px;width:16px;height:16px;}
.ke-icon-div{background-position:0px -544px;width:16px;height:16px;}
.ke-icon-formula{background-position:0px -576px;width:16px;height:16px;}
.ke-icon-hr{background-position:0px -592px;width:16px;height:16px;}
.ke-icon-emoticons{background-position:0px -608px;width:16px;height:16px;}
.ke-icon-link{background-position:0px -624px;width:16px;height:16px;}
.ke-icon-unlink{background-position:0px -640px;width:16px;height:16px;}
.ke-icon-fullscreen{background-position:0px -656px;width:16px;height:16px;}
.ke-icon-about{background-position:0px -672px;width:16px;height:16px;}
.ke-icon-plainpaste{background-position:0px -704px;width:16px;height:16px;}
.ke-icon-wordpaste{background-position:0px -720px;width:16px;height:16px;}
.ke-icon-table{background-position:0px -784px;width:16px;height:16px;}
.ke-icon-tablemenu{background-position:0px -768px;width:16px;height:16px;}
.ke-icon-tableinsert{background-position:0px -784px;width:16px;height:16px;}
.ke-icon-tabledelete{background-position:0px -800px;width:16px;height:16px;}
.ke-icon-tablecolinsertleft{background-position:0px -816px;width:16px;height:16px;}
.ke-icon-tablecolinsertright{background-position:0px -832px;width:16px;height:16px;}
.ke-icon-tablerowinsertabove{background-position:0px -848px;width:16px;height:16px;}
.ke-icon-tablerowinsertbelow{background-position:0px -864px;width:16px;height:16px;}
.ke-icon-tablecoldelete{background-position:0px -880px;width:16px;height:16px;}
.ke-icon-tablerowdelete{background-position:0px -896px;width:16px;height:16px;}
.ke-icon-tablecellprop{background-position:0px -912px;width:16px;height:16px;}
.ke-icon-tableprop{background-position:0px -928px;width:16px;height:16px;}
.ke-icon-checked{background-position:0px -944px;width:16px;height:16px;}
.ke-icon-code{background-position:0px -960px;width:16px;height:16px;}
.ke-icon-map{background-position:0px -976px;width:16px;height:16px;}
.ke-icon-baidumap{background-position:0px -976px;width:16px;height:16px;}
.ke-icon-lineheight{background-position:0px -992px;width:16px;height:16px;}
.ke-icon-clearhtml{background-position:0px -1008px;width:16px;height:16px;}
.ke-icon-pagebreak{background-position:0px -1024px;width:16px;height:16px;}
.ke-icon-insertfile{background-position:0px -1040px;width:16px;height:16px;}
.ke-icon-quickformat{background-position:0px -1056px;width:16px;height:16px;}
.ke-icon-template{background-position:0px -1072px;width:16px;height:16px;}
.ke-icon-tablecellsplit{background-position:0px -1088px;width:16px;height:16px;}
.ke-icon-tablerowmerge{background-position:0px -1104px;width:16px;height:16px;}
.ke-icon-tablerowsplit{background-position:0px -1120px;width:16px;height:16px;}
.ke-icon-tablecolmerge{background-position:0px -1136px;width:16px;height:16px;}
.ke-icon-tablecolsplit{background-position:0px -1152px;width:16px;height:16px;}
.ke-icon-anchor{background-position:0px -1168px;width:16px;height:16px;}
.ke-icon-search{background-position:0px -1184px;width:16px;height:16px;}
.ke-icon-new{background-position:0px -1200px;width:16px;height:16px;}
.ke-icon-specialchar{background-position:0px -1216px;width:16px;height:16px;}
.ke-icon-multiimage{background-position:0px -1232px;width:16px;height:16px;}
/* container */
.ke-container{display:block;border:1px solid #CCCCCC;background-color:#FFF;overflow:hidden;margin:0;padding:0;}
/* toolbar */
.ke-toolbar{border-bottom:1px solid #CCC;background-color:#F0F0EE;padding:2px 5px;text-align:left;overflow:hidden;zoom:1;}
.ke-toolbar-icon{background-repeat:no-repeat;font-size:0;line-height:0;overflow:hidden;display:block;}
.ke-toolbar-icon-url{background-image:url(default.png);}
.ke-toolbar .ke-outline{border:1px solid #F0F0EE;margin:1px;padding:1px 2px;font-size:0;line-height:0;overflow:hidden;cursor:pointer;display:block;float:left;}
.ke-toolbar .ke-on{border:1px solid #5690D2;}
.ke-toolbar .ke-selected{border:1px solid #5690D2;background-color:#E9EFF6;}
.ke-toolbar .ke-disabled{cursor:default;}
.ke-toolbar .ke-separator{height:16px;margin:2px 3px;border-left:1px solid #A0A0A0;border-right:1px solid #FFFFFF;border-top:0;border-bottom:0;width:0;font-size:0;line-height:0;overflow:hidden;display:block;float:left;}
.ke-toolbar .ke-hr{overflow:hidden;height:1px;clear:both;}
/* edit */
.ke-edit{padding:0;}
.ke-edit-iframe,.ke-edit-textarea{border:0;margin:0;padding:0;overflow:auto;}
.ke-edit-textarea{font:12px/1.5 "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace;color:#000;overflow:auto;resize:none;}
.ke-edit-textarea:focus{outline:none;}
/* statusbar */
.ke-statusbar{position:relative;background-color:#F0F0EE;border-top:1px solid #CCCCCC;font-size:0;line-height:0;*height:12px;overflow:hidden;text-align:center;cursor:s-resize;}
.ke-statusbar-center-icon{background-position:-0px -754px;width:15px;height:11px;background-image:url(default.png);}
.ke-statusbar-right-icon{position:absolute;right:0;bottom:0;cursor:se-resize;background-position:-5px -741px;width:11px;height:11px;background-image:url(default.png);}
/* menu */
.ke-menu{border:1px solid #A0A0A0;background-color:#F1F1F1;color:#222222;padding:2px;font-family:"sans serif",tahoma,verdana,helvetica;font-size:12px;text-align:left;overflow:hidden;}
.ke-menu-item{border:1px solid #F1F1F1;background-color:#F1F1F1;color:#222222;height:24px;overflow:hidden;cursor:pointer;}
.ke-menu-item-on{border:1px solid #5690D2;background-color:#E9EFF6;}
.ke-menu-item-left{width:27px;text-align:center;overflow:hidden;}
.ke-menu-item-center{width:0;height:24px;border-left:1px solid #E3E3E3;border-right:1px solid #FFFFFF;border-top:0;border-bottom:0;}
.ke-menu-item-center-on{border-left:1px solid #E9EFF6;border-right:1px solid #E9EFF6;}
.ke-menu-item-right{border:0;padding:0 0 0 5px;line-height:24px;text-align:left;overflow:hidden;}
.ke-menu-separator{margin:2px 0;height:0;overflow:hidden;border-top:1px solid #CCCCCC;border-bottom:1px solid #FFFFFF;border-left:0;border-right:0;}
/* colorpicker */
.ke-colorpicker{border:1px solid #A0A0A0;background-color:#F1F1F1;color:#222222;padding:2px;}
.ke-colorpicker-table{border:0;margin:0;padding:0;border-collapse:separate;}
.ke-colorpicker-cell{font-size:0;line-height:0;border:1px solid #F0F0EE;cursor:pointer;margin:3px;padding:0;}
.ke-colorpicker-cell-top{font-family:"sans serif",tahoma,verdana,helvetica;font-size:12px;line-height:24px;border:1px solid #F0F0EE;cursor:pointer;margin:0;padding:0;text-align:center;}
.ke-colorpicker-cell-on{border:1px solid #5690D2;}
.ke-colorpicker-cell-selected{border:1px solid #2446AB;}
.ke-colorpicker-cell-color{width:14px;height:14px;margin:3px;padding:0;border:0;}
/* dialog */
.ke-dialog{position:absolute;margin:0;padding:0;}
.ke-dialog .ke-header{width:100%;margin-bottom:10px;}
.ke-dialog .ke-header .ke-left{float:left;}
.ke-dialog .ke-header .ke-right{float:right;}
.ke-dialog .ke-header label{margin-right:0;cursor:pointer;font-weight:normal;display:inline;vertical-align:top;}
.ke-dialog-content{background-color:#FFF;width:100%;height:100%;color:#333;border:1px solid #A0A0A0;}
.ke-dialog-shadow{position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;box-shadow:3px 3px 7px #999;-moz-box-shadow:3px 3px 7px #999;-webkit-box-shadow:3px 3px 7px #999;filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3',MakeShadow='true',ShadowOpacity='0.4');background-color:#F0F0EE;}
.ke-dialog-header{border:0;margin:0;padding:0 10px;background:url(background.png) repeat scroll 0 0 #F0F0EE;border-bottom:1px solid #CFCFCF;height:24px;font:12px/24px "sans serif",tahoma,verdana,helvetica;text-align:left;color:#222;cursor:move;}
.ke-dialog-icon-close{display:block;background:url(default.png) no-repeat scroll 0px -688px;width:16px;height:16px;position:absolute;right:6px;top:6px;cursor:pointer;}
.ke-dialog-body{font:12px/1.5 "sans serif",tahoma,verdana,helvetica;text-align:left;overflow:hidden;width:100%;}
.ke-dialog-body textarea{display:block;overflow:auto;padding:0;resize:none;}
.ke-dialog-body textarea:focus,.ke-dialog-body input:focus,.ke-dialog-body select:focus{outline:none;}
.ke-dialog-body label{margin-right:10px;cursor:pointer;display:-moz-inline-stack;display:inline-block;vertical-align:middle;zoom:1;*display:inline;}
.ke-dialog-body img{display:-moz-inline-stack;display:inline-block;vertical-align:middle;zoom:1;*display:inline;}
.ke-dialog-body select{display:-moz-inline-stack;display:inline-block;vertical-align:middle;zoom:1;*display:inline;width:auto;}
.ke-dialog-body .ke-textarea{display:block;width:408px;height:260px;font-family:"sans serif",tahoma,verdana,helvetica;font-size:12px;border-color:#848484 #E0E0E0 #E0E0E0 #848484;border-style:solid;border-width:1px;}
.ke-dialog-body .ke-form{margin:0;padding:0;}
.ke-dialog-loading{position:absolute;top:0;left:1px;z-index:1;text-align:center;}
.ke-dialog-loading-content{background:url("../common/loading.gif") no-repeat;color:#666;font-size:14px;font-weight:bold;height:31px;line-height:31px;padding-left:36px;}
.ke-dialog-row{margin-bottom:10px;}
.ke-dialog-footer{font:12px/1 "sans serif",tahoma,verdana,helvetica;text-align:right;padding:0 0 5px 0;background-color:#FFF;width:100%;}
.ke-dialog-preview,.ke-dialog-yes{margin:5px;}
.ke-dialog-no{margin:5px 10px 5px 5px;}
.ke-dialog-mask{background-color:#FFF;filter:alpha(opacity=50);opacity:0.5;}
.ke-button-common{background:url(background.png) no-repeat scroll 0 -25px transparent;cursor:pointer;height:23px;line-height:23px;overflow:visible;display:inline-block;vertical-align:top;cursor:pointer;}
.ke-button-outer{background-position:0 -25px;padding:0;position:relative;display:-moz-inline-stack;display:inline-block;vertical-align:middle;zoom:1;*display:inline;}
.ke-button{background-position:right -25px;padding:0 12px;margin:0;font-family:"sans serif",tahoma,verdana,helvetica;border:0 none;color:#333;font-size:12px;left:2px;text-decoration:none;}
/* inputbox */
.ke-input-text{background-color:#FFFFFF;font-family:"sans serif",tahoma,verdana,helvetica;font-size:12px;line-height:17px;height:17px;padding:2px 4px;border-color:#848484 #E0E0E0 #E0E0E0 #848484;border-style:solid;border-width:1px;display:-moz-inline-stack;display:inline-block;vertical-align:middle;zoom:1;*display:inline;}
.ke-input-number{width:50px;}
.ke-input-color{border:1px solid #A0A0A0;background-color:#FFFFFF;font-size:12px;width:60px;height:20px;line-height:20px;padding-left:5px;overflow:hidden;cursor:pointer;display:-moz-inline-stack;display:inline-block;vertical-align:middle;zoom:1;*display:inline;}
.ke-upload-button{position:relative;}
.ke-upload-area{position:relative;overflow:hidden;margin:0;padding:0;}
.ke-upload-area .ke-upload-file{position:absolute;top:0;right:0;height:25px;padding:0;margin:0;z-index:811212;border:0 none;opacity:0;filter:alpha(opacity=0);}
/* tabs */
.ke-tabs{font:12px/1 "sans serif",tahoma,verdana,helvetica;border-bottom:1px solid #A0A0A0;padding-left:5px;margin-bottom:20px;}
.ke-tabs-ul{list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;}
.ke-tabs-li{position:relative;border:1px solid #A0A0A0;background-color:#F0F0EE;margin:0 2px -1px 0;padding:0 20px;float:left;line-height:25px;text-align:center;color:#555555;cursor:pointer;}
.ke-tabs-li-selected{background-color:#FFF;border-bottom:1px solid #FFF;color:#000;cursor:default;}
.ke-tabs-li-on{background-color:#FFF;color:#000;}
/* progressbar */
.ke-progressbar{position:relative;margin:0;padding:0;}
.ke-progressbar-bar{border:1px solid #6FA5DB;width:80px;height:5px;margin:10px 10px 0 10px;padding:0;}
.ke-progressbar-bar-inner{width:0;height:5px;background-color:#6FA5DB;overflow:hidden;margin:0;padding:0;}
.ke-progressbar-percent{position:absolute;top:0;left:40%;display:none;}
/* swfupload */
.ke-swfupload-top{position:relative;margin-bottom:10px;_width:608px;}
.ke-swfupload-button{height:23px;line-height:23px;}
.ke-swfupload-desc{padding:0 10px;height:23px;line-height:23px;}
.ke-swfupload-startupload{position:absolute;top:0;right:0;}
.ke-swfupload-body{overflow:scroll;background-color:#FFFFFF;border-color:#848484 #E0E0E0 #E0E0E0 #848484;border-style:solid;border-width:1px;width:auto;height:370px;padding:5px;}
.ke-swfupload-body .ke-item{width:100px;margin:5px;}
.ke-swfupload-body .ke-photo{position:relative;border:1px solid #DDDDDD;background-color:#FFFFFF;padding:10px;}
.ke-swfupload-body .ke-delete{display:block;background:url(default.png) no-repeat scroll 0px -688px;width:16px;height:16px;position:absolute;right:0;top:0;cursor:pointer;}
.ke-swfupload-body .ke-status{position:absolute;left:0;bottom:5px;width:100px;height:17px;}
.ke-swfupload-body .ke-message{width:100px;text-align:center;overflow:hidden;height:17px;}
.ke-swfupload-body .ke-error{color:red;}
.ke-swfupload-body .ke-name{width:100px;text-align:center;overflow:hidden;height:16px;}
.ke-swfupload-body .ke-on{border:1px solid #5690D2;background-color:#E9EFF6;}
/* emoticons */
.ke-plugin-emoticons{position:relative;}
.ke-plugin-emoticons .ke-preview{position:absolute;text-align:center;margin:2px;padding:10px;top:0;border:1px solid #A0A0A0;background-color:#FFFFFF;display:none;}
.ke-plugin-emoticons .ke-preview-img{border:0;margin:0;padding:0;}
.ke-plugin-emoticons .ke-table{border:0;margin:0;padding:0;border-collapse:separate;}
.ke-plugin-emoticons .ke-cell{margin:0;padding:1px;border:1px solid #F0F0EE;cursor:pointer;}
.ke-plugin-emoticons .ke-on{border:1px solid #5690D2;background-color:#E9EFF6;}
.ke-plugin-emoticons .ke-img{display:block;background-repeat:no-repeat;overflow:hidden;margin:2px;width:24px;height:24px;margin:0;padding:0;border:0;}
.ke-plugin-emoticons .ke-page{text-align:right;margin:5px;padding:0;border:0;font:12px/1 "sans serif",tahoma,verdana,helvetica;color:#333;text-decoration:none;}
.ke-plugin-plainpaste-textarea,.ke-plugin-wordpaste-iframe{display:block;width:408px;height:260px;font-family:"sans serif",tahoma,verdana,helvetica;font-size:12px;border-color:#848484 #E0E0E0 #E0E0E0 #848484;border-style:solid;border-width:1px;}
/* filemanager */
.ke-plugin-filemanager-header{width:100%;margin-bottom:10px;}
.ke-plugin-filemanager-header .ke-left{float:left;}
.ke-plugin-filemanager-header .ke-right{float:right;}
.ke-plugin-filemanager-body{overflow:scroll;background-color:#FFFFFF;border-color:#848484 #E0E0E0 #E0E0E0 #848484;border-style:solid;border-width:1px;width:auto;height:370px;padding:5px;}
.ke-plugin-filemanager-body .ke-item{width:100px;margin:5px;}
.ke-plugin-filemanager-body .ke-photo{border:1px solid #DDDDDD;background-color:#FFFFFF;padding:10px;}
.ke-plugin-filemanager-body .ke-name{width:100px;text-align:center;overflow:hidden;height:16px;}
.ke-plugin-filemanager-body .ke-on{border:1px solid #5690D2;background-color:#E9EFF6;}
.ke-plugin-filemanager-body .ke-table{width:95%;border:0;margin:0;padding:0;border-collapse:separate;}
.ke-plugin-filemanager-body .ke-table .ke-cell{margin:0;padding:0;border:0;}
.ke-plugin-filemanager-body .ke-table .ke-name{width:55%;text-align:left;}
.ke-plugin-filemanager-body .ke-table .ke-size{width:15%;text-align:left;}
.ke-plugin-filemanager-body .ke-table .ke-datetime{width:30%;text-align:center;}
分享到QQ
分享到微博
微信扫一扫
