Ext.form.HtmlEditor 的 表情扩展

  1. /*
  2.  * IChat Emote Chooser v0.1
  3.  * IChat Emote Chooser -- EmoteChooser
  4.  * viperasi@gmail.com
  5.  * 根据Ext.ColorPalette修改
  6.  * 文件名:EmoteChooser.js
  7.  */
  8. Ext.EmoteChooser = function(config){
  9.     Ext.EmoteChooser.superclass.constructor.call(this, config);
  10.     this.addEvents(
  11.         'select'
  12.     );
  13.     if(this.handler){
  14.         this.on("select"this.handler, this.scope, true);
  15.     }
  16. };
  17. Ext.extend(Ext.EmoteChooser, Ext.Component, {
  18.     itemCls : "emote-chooser",
  19.     value : null,
  20.     clickEvent:'click',
  21.     ctype: "Ext.EmoteChooser",
  22.     allowReselect : false,
  23.     emotes : [//表情列表 
  24.         "001","002","003","004","005","006","007","008","009","010","011",
  25.         "012","013","014","015","016","017","018","019","020","021","022",
  26.         "023","024","025","026","027","028","029","030","031","032","033",
  27.         "034","035","036","037","038","039","040","041","042","043",
  28.         "044","045","046","047","048","049","050","051","052","053","054",
  29.         "055","056","057","058","059","060"
  30.     ],
  31.     onRender : function(container, position){
  32.         var t = this.tpl || new Ext.XTemplate(
  33.             '<tpl for="."><a href="#" class="emote-{.}" hidefocus="on"><em><img src="images/emote/emote_{.}.gif" unselectable="on" /></em></a></tpl>'
  34.         );//套用模板,图片路径需自己修改 
  35.         var el = document.createElement("div");
  36.         el.className = this.itemCls;
  37.         t.overwrite(el, this.emotes);
  38.         container.dom.insertBefore(el, position);
  39.         this.el = Ext.get(el);
  40.         this.el.on(this.clickEvent, this.handleClick,  this, {delegate: "a"});
  41.         if(this.clickEvent != 'click'){
  42.             this.el.on('click', Ext.emptyFn,  this, {delegate: "a", preventDefault:true});
  43.         }
  44.     },
  45.     afterRender : function(){
  46.         Ext.EmoteChooser.superclass.afterRender.call(this);
  47.         if(this.value){
  48.             var s = this.value;
  49.             this.value = null;
  50.             this.select(s);
  51.         }
  52.     },
  53.     handleClick : function(e, t){
  54.         e.preventDefault();
  55.         if(!this.disabled){
  56.             var c = t.className.match(/(?:^|/s)emote-(.{3})(?:/s|$)/)[1];
  57.             this.select(c.toUpperCase());
  58.         }
  59.     },
  60.     select : function(emote){
  61.         //emote = emote.replace("#", ""); 
  62.         if(emote != this.value || this.allowReselect){
  63.             var el = this.el;
  64.             if(this.value){
  65.                 el.child("a.emote-"+this.value).removeClass("emote-chooser-sel");
  66.             }
  67.             el.child("a.emote-"+emote).addClass("emote-chooser-sel");
  68.             this.value = emote;
  69.             this.fireEvent("select"this, emote);
  70.         }
  71.     }
  72. });
  73. Ext.reg('emotechooser', Ext.EmoteChooser);
  74. /*
  75.  * IChat Emote Chooser v0.1
  76.  * IChat Emote Chooser -- EmoteItem
  77.  * viperasi@gmail.com
  78.  * 根据Ext.menu.ColorItem修改
  79.  * 文件名:EmoteItem.js
  80.  */
  81. Ext.menu.EmoteItem = function(config){
  82.     Ext.menu.EmoteItem.superclass.constructor.call(thisnew Ext.EmoteChooser(config), config);
  83.     this.chooser = this.component;
  84.     this.relayEvents(this.chooser, ["select"]);
  85.     if(this.selectHandler){
  86.         this.on('select'this.selectHandler, this.scope);
  87.     }
  88. };
  89. Ext.extend(Ext.menu.EmoteItem, Ext.menu.Adapter);
  90. /*
  91.  * IChat Emote Chooser v0.1
  92.  * IChat Emote Chooser -- EmoteMenu
  93.  * viperasi@gmail.com
  94.  * 根据Ext.menu.ColorMenu修改
  95.  * 文件名:EmoteMenu.js
  96.  */
  97.  Ext.menu.EmoteMenu = function(config){
  98.     Ext.menu.EmoteMenu.superclass.constructor.call(this, config);
  99.     this.plain = true;
  100.     var ci = new Ext.menu.EmoteItem(config);
  101.     this.add(ci);
  102.     this.chooser = ci.chooser;
  103.     this.relayEvents(ci, ["select"]);
  104. };
  105. Ext.extend(Ext.menu.EmoteMenu, Ext.menu.Menu);
  106. /*
  107.  *调用示例
  108.  *
  109.  */
  110. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  111. <html xmlns="http://www.w3.org/1999/xhtml">
  112.     <head>
  113.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  114.         <title>emote_chooser</title>
  115.         <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
  116.         <script type="text/javascript" src="js/ext-base.js"></script>
  117.         <script type="text/javascript" src="js/ext-all.js"></script>
  118.         
  119.         <script type="text/javascript" src="js/EmoteChooser.js"></script>
  120.         <script type="text/javascript" src="js/EmoteItem.js"></script>
  121.         <script type="text/javascript" src="js/EmoteMenu.js"></script>
  122.         <style type="text/css"><!--css样式,必须存在,可写入ext-all.css -->
  123.             .emote-chooser{width:150px;height:92px;cursor:pointer;}
  124.             .emote-chooser a{border:1px solid #fff;float:left;padding:2px;text-decoration:none;-moz-outline:0 none;outline:0 none;cursor:pointer;}
  125.             .emote-chooser a:hover,.emote-chooser a.emote-chooser-sel{border:1px solid #8BB8F3;background:#deecfd;}
  126.             .emote-chooser em{display:block;border:1px solid #ACA899;}
  127.             .emote-chooser em img{cursor:pointer;display:block;height:20px;line-height:10px;width:20px;}
  128.         </style>
  129.         <script language="javascript">
  130.             Ext.onReady(function(){
  131.             
  132.                 var emoteMenu = new Ext.menu.EmoteMenu({
  133.                     allowReselect: true,
  134.                     focus: Ext.emptyFn,
  135.                     plain:true,
  136.                     selectHandler: function(cm, emote){
  137.                         Ext.example.msg('Emote Selected''You choose {0}.', emote);
  138.                     },
  139.                     scope: this,
  140.                     clickEvent:'mousedown'
  141.                 });
  142.             
  143.                 var tb = new Ext.Toolbar();
  144.                 tb.render('toolbar');
  145.             
  146.                 tb.add({
  147.                         text:'emote',
  148.                         iconCls: 'bmenu',  // <-- icon 
  149.                         menu: emoteMenu  // assign menu by instance 
  150.                     });
  151.             
  152.             });
  153.         </script>
  154.     </head>
  155.   
  156.     <body>
  157.         <div id="container">
  158.             <div id="toolbar"></div>
  159.         </div>
  160.     </body>
  161. </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的时候 添加此内容

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值