ckeditor 表情包自定义

定制CKEditor的表情

.cke_dialog_contents_body {
    overflow:auto;
    max-height: 500px;
}

.cke_dialog_contents_body * {
    max-height: 500px;
}

添加以上css到对应html dom里来解决溢出

/*
 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.dialog.add("smiley",function(f){
    for(var e=f.config
        ,a=f.lang.smiley
        ,h=e.smiley_images
        ,g=e.smiley_columns||8
        ,k
        ,m=function(l){
            var c=l.data.getTarget(),b=c.getName();
            if("a"==b)c=c.getChild(0);
            else if("img"!=b)return;
            var b=c.getAttribute("cke_src")
            ,a=c.getAttribute("title")
            ,c=f.document.createElement("img",{
                attributes:{
                    src:b,
                    "data-cke-saved-src":b,
                    title:a,
                    alt:a,
                    c.$.width,
                    height:c.$.height
                }
            });
            f.insertElement(c);
            k.hide();
            l.data.preventDefault()
        }
        ,q=CKEDITOR.tools.addFunction(function(a,c){
            a=new CKEDITOR.dom.event(a);
            c=new CKEDITOR.dom.element(c);
            var b;
            b=a.getKeystroke();
            var d="rtl"==f.lang.dir;
            switch(b){
                case 38:
                if(b=c.getParent().getParent().getPrevious())
                    b=b.getChild([c.getParent().getIndex(),0]),b.focus();
                a.preventDefault();
                break;
                case 40:
                (b=c.getParent().getParent().getNext())&&(b=b.getChild([c.getParent().getIndex(),0]))&&b.focus();
                a.preventDefault();
                break;
                case 32:
                m({data:a});
                a.preventDefault();
                break;
                case d?37:39:
                if(b=c.getParent().getNext())
                    b=b.getChild(0),b.focus(),a.preventDefault(!0);
                else if(b=c.getParent().getParent().getNext())
                    (b=b.getChild([0,0]))&&b.focus(),a.preventDefault(!0);
                break;
                case d?39:37:
                if(b=c.getParent().getPrevious())
                    b=b.getChild(0),b.focus(),a.preventDefault(!0);
                else if(b=c.getParent().getParent().getPrevious())
                    b=b.getLast().getChild(0),b.focus(),a.preventDefault(!0)}}),
                    d=CKEDITOR.tools.getNextId()+"_smiley_emtions_label",
                    d=[
                        'x3cdivx3ex3cspan idx3d"'+d+'" classx3d"cke_voice_label"x3e'+a.options+"x3c/spanx3e",'x3ctable rolex3d"listbox" aria-labelledbyx3d"'+
                        d+'" stylex3d"100%;height:100%;border-collapse:separate;" cellspacingx3d"2" cellpaddingx3d"2"',
                        CKEDITOR.env.ie&&CKEDITOR.env.quirks?' stylex3d"position:absolute;"':"",
                        "x3ex3ctbodyx3e"
                    ],
                    n=h.length,
                    a=0;
                    a<n;
                    a++){
                        0===a%g&&d.push('x3ctr rolex3d"presentation"x3e');
                        var p="cke_smile_label_"+a+"_"+CKEDITOR.tools.getNextNumber();
                        d.push('x3ctd classx3d"cke_dark_background cke_centered" stylex3d"vertical-align: middle;" rolex3d"presentation"x3ex3ca hrefx3d"javascript:void(0)" rolex3d"option"',
                        ' aria-posinsetx3d"'+(a+1)+'"',
                        ' aria-setsizex3d"'+n+'"',
                        ' aria-labelledbyx3d"'+p+'"',
                        ' classx3d"cke_smile cke_hand" tabindexx3d"-1" onkeydownx3d"CKEDITOR.tools.callFunction( ',
                        q,
                        ', event, this );"x3e','x3cimg classx3d"cke_hand" titlex3d"',
                        e.smiley_descriptions[a],
                        '" cke_srcx3d"',
                        CKEDITOR.tools.htmlEncode(e.smiley_path+h[a]),
                        '" altx3d"',e.smiley_descriptions[a],
                        '"',
                        ' srcx3d"',
                        CKEDITOR.tools.htmlEncode(e.smiley_path+h[a]),
                        '"',
                        CKEDITOR.env.ie?" onloadx3d"this.setAttribute('width', 2); this.removeAttribute('width');" ":"",
                        'x3ex3cspan idx3d"'+p+'" classx3d"cke_voice_label"x3e'+e.smiley_descriptions[a]+"x3c/spanx3ex3c/ax3e",
                        "x3c/tdx3e");
                        a%g==g-1&&d.push("x3c/trx3e")
                }
                if(a<g-1){
                    for(;a<g-1;a++)
                        d.push("x3ctdx3ex3c/tdx3e");
                        d.push("x3c/trx3e")
                    }
                    d.push("x3c/tbodyx3ex3c/tablex3ex3c/divx3e");
                    e={
                        type:"html",
                        id:"smileySelector",
                        html:d.join(""),
                        onLoad:function(a){
                            k=a.sender
                        },
                        focus:function(){
                            var a=this;setTimeout(function(){
                                a.getElement().getElementsByTag("a").getItem(0).focus()
                            },0)
                        },
                        onClick:m,
                        style:" 100%; border-collapse: separate;"
                    };
                return {
                    title:f.lang.smiley.title,
                    minWidth:270,
                    minHeight:120,
                    contents:[
                        {id:"tab1",label:"",title:"",expand:!0,padding:0,elements:[e]}
                    ],
                    buttons:[
                        CKEDITOR.dialog.cancelButton
                    ]
                }
            });

c=f.document.createElement("img",{
                attributes:{
                    src:b,
                    "data-cke-saved-src":b,
                    title:a,
                    alt:a,
                    c.$.width,
                    height:c.$.height
                }
            });
            f.insertElement(c);

这一段是添加表情到编辑器的代码，如果不想设置width和height可以直接去掉

CKEDITOR.dom.document

 

                return {
                    title:f.lang.smiley.title,
                    minWidth:270,
                    minHeight:120,
                    contents:[
                        {id:"tab1",label:"",title:"",expand:!0,padding:0,elements:[e]}
                    ],
                    buttons:[
                        CKEDITOR.dialog.cancelButton
                    ]
                }

这一段是表情选择对话框配置，官方文档：

CKEDITOR.dialog.definition