Ext.form.HtmlEditor 的表情扩展

最新推荐文章于 2017-11-14 01:38:00 发布

viperasi

最新推荐文章于 2017-11-14 01:38:00 发布

阅读量2.8k

点赞数

分类专栏： JavaScript 文章标签： function stylesheet border javascript menu class

本文链接：https://blog.csdn.net/viperasi/article/details/2778036

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

/*
* IChat Emote Chooser v0.1
* IChat Emote Chooser -- EmoteChooser
* viperasi@gmail.com
* 根据Ext.ColorPalette修改
* 文件名:EmoteChooser.js
*/
Ext.EmoteChooser = function(config){
Ext.EmoteChooser.superclass.constructor.call(this, config);
this.addEvents(
'select'
);
if(this.handler){
this.on("select", this.handler, this.scope, true);
}
};
Ext.extend(Ext.EmoteChooser, Ext.Component, {
itemCls : "emote-chooser",
value : null,
clickEvent:'click',
ctype: "Ext.EmoteChooser",
allowReselect : false,
emotes : [//表情列表
"001","002","003","004","005","006","007","008","009","010","011",
"012","013","014","015","016","017","018","019","020","021","022",
"023","024","025","026","027","028","029","030","031","032","033",
"034","035","036","037","038","039","040","041","042","043",
"044","045","046","047","048","049","050","051","052","053","054",
"055","056","057","058","059","060"
],
onRender : function(container, position){
var t = this.tpl || new Ext.XTemplate(
'<tpl for="."><a href="#" class="emote-{.}" hidefocus="on"><em><img src="images/emote/emote_{.}.gif" unselectable="on" /></em></a></tpl>'
);//套用模板，图片路径需自己修改
var el = document.createElement("div");
el.className = this.itemCls;
t.overwrite(el, this.emotes);
container.dom.insertBefore(el, position);
this.el = Ext.get(el);
this.el.on(this.clickEvent, this.handleClick, this, {delegate: "a"});
if(this.clickEvent != 'click'){
this.el.on('click', Ext.emptyFn, this, {delegate: "a", preventDefault:true});
}
},
afterRender : function(){
Ext.EmoteChooser.superclass.afterRender.call(this);
if(this.value){
var s = this.value;
this.value = null;
this.select(s);
}
},
handleClick : function(e, t){
e.preventDefault();
if(!this.disabled){
var c = t.className.match(/(?:^|/s)emote-(.{3})(?:/s|$)/)[1];
this.select(c.toUpperCase());
}
},
select : function(emote){
//emote = emote.replace("#", "");
if(emote != this.value || this.allowReselect){
var el = this.el;
if(this.value){
el.child("a.emote-"+this.value).removeClass("emote-chooser-sel");
}
el.child("a.emote-"+emote).addClass("emote-chooser-sel");
this.value = emote;
this.fireEvent("select", this, emote);
}
}
});
Ext.reg('emotechooser', Ext.EmoteChooser);
/*
* IChat Emote Chooser v0.1
* IChat Emote Chooser -- EmoteItem
* viperasi@gmail.com
* 根据Ext.menu.ColorItem修改
* 文件名：EmoteItem.js
*/
Ext.menu.EmoteItem = function(config){
Ext.menu.EmoteItem.superclass.constructor.call(this, new Ext.EmoteChooser(config), config);
this.chooser = this.component;
this.relayEvents(this.chooser, ["select"]);
if(this.selectHandler){
this.on('select', this.selectHandler, this.scope);
}
};
Ext.extend(Ext.menu.EmoteItem, Ext.menu.Adapter);
/*
* IChat Emote Chooser v0.1
* IChat Emote Chooser -- EmoteMenu
* viperasi@gmail.com
* 根据Ext.menu.ColorMenu修改
* 文件名：EmoteMenu.js
*/
Ext.menu.EmoteMenu = function(config){
Ext.menu.EmoteMenu.superclass.constructor.call(this, config);
this.plain = true;
var ci = new Ext.menu.EmoteItem(config);
this.add(ci);
this.chooser = ci.chooser;
this.relayEvents(ci, ["select"]);
};
Ext.extend(Ext.menu.EmoteMenu, Ext.menu.Menu);
/*
*调用示例
*
*/
<!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=utf-8" />
<title>emote_chooser</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/EmoteChooser.js"></script>
<script type="text/javascript" src="js/EmoteItem.js"></script>
<script type="text/javascript" src="js/EmoteMenu.js"></script>
<style type="text/css">
.emote-chooser{width:150px;height:92px;cursor:pointer;}
.emote-chooser a{border:1px solid #fff;float:left;padding:2px;text-decoration:none;-moz-outline:0 none;outline:0 none;cursor:pointer;}
.emote-chooser a:hover,.emote-chooser a.emote-chooser-sel{border:1px solid #8BB8F3;background:#deecfd;}
.emote-chooser em{display:block;border:1px solid #ACA899;}
.emote-chooser em img{cursor:pointer;display:block;height:20px;line-height:10px;width:20px;}
</style>
<script language="javascript">
Ext.onReady(function(){
var emoteMenu = new Ext.menu.EmoteMenu({
allowReselect: true,
focus: Ext.emptyFn,
plain:true,
selectHandler: function(cm, emote){
Ext.example.msg('Emote Selected', 'You choose {0}.', emote);
},
scope: this,
clickEvent:'mousedown'
});
var tb = new Ext.Toolbar();
tb.render('toolbar');
tb.add({
text:'emote',
iconCls: 'bmenu', // <-- icon
menu: emoteMenu // assign menu by instance
});
});
</script>
</head>
<body>
<div id="container">
<div id="toolbar"></div>
</div>
</body>
</html>

附上 HtmlEditor的添加示例：

var editor = new Ext.form.HtmlEditor({

//内容略

});

editor.getToolbar().add('-', {
tooltip : '选择表情',
iconCls : 'temote',
menu : new Ext.menu.EmoteMenu({
allowReselect : true,
focus : Ext.emptyFn,
plain : true,
selectHandler : function(cm, emote) {
var emimg = "<img src='images/emote/emote_"
+ emote + ".gif' />";
editor.insertAtCursor(emimg);
},
scope : this,
clickEvent : 'mousedown'
})
})；

此代码不全，请在form 或者 win 被show 或者 render的时候添加此内容

viperasi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Ext.form.HtmlEditor 的表情扩展

/* * IChat Emote Chooser v0.1 * IChat Emote Chooser -- EmoteChooser * viperasi@gmail.com * 根据Ext.ColorPalette修改 * 文件名:EmoteChooser.js */Ext.EmoteChooser = function(config){ Ext.
复制链接

扫一扫