Ext.form.HtmlEditor 的表情扩展收藏

jaky821

浏览: 42746 次
性别:
来自: contry

最近访客更多访客>>

wangtong1976

chen63

bob1010

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT Gmail CSS C C++

/*
* 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的时候添加此内容

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/viperasi/archive/2008/08/06/2778036.aspx

分享到：