先上傳一個圖片資源附件

/uploads/admin/default/20190509/6f060a34b2650cbecdef006caec377ae.zip

解壓之后放在編輯器這個路徑kindeditor/plugins/emoticons/

demo：kindeditor/plugins/emoticons/emoji/

來個縮略圖：

下面上傳zui?定制的kindeditor.js

/uploads/admin/default/20190509/875b231fd39f3c705621967fa85e73fb.zip

涉及修改的代碼片段：

搜索：ke-plugin-emoticons?快速定位? ? 都有注釋，我就不多說了有疑問留言

KindEditor.plugin('emoticons', function(K) {
    var self = this,
        name = 'emoticons',
        path = (self.emoticonsPath || self.pluginsPath + 'emoticons/emoji/'),//這里是表情的目錄
        allowPreview = self.allowPreviewEmoticons === undefined ? true : self.allowPreviewEmoticons,
        currentPageNum = 1;
    var emoji = 
["😁","😂","😃","😄","😅","😆","😇","😈","😉","😊","😋","😌","😍","😎","😏","😐","😑","😒","😓","😔","😕","😖","😗","😘","😙","😚","😛","😜","😝","😞","😟","😠","😡","😢","😣","😤","😥","😦","😧","😨","😩","😪","😫","😬","😭","😮","😯","😰","😱","😲","😳","😴","😵","😶","😷","😸","😹","😺","😻","😼","😽","😾","😿","🙀","🙁","🀄","🃏","🅰","🅱","🅾","🅿","🆎","🆑","🆒","🆓","🆔","🆕","🆖","🆗","🆘","🆙","🆚","🇦","🇧","🇨🇳","🇨","🇩🇪","🇩","🇪🇸","🇪","🇫🇷","🇫","🇬🇧","🇬","🇭","🇮🇹","🇮","🇯🇵","🇯","🇰🇷","🇰","🇱","🇲","🇳","🇴","🇵","🇶","🇷🇺","🇷","🇸","🇹","🇺🇸","🇺","🇻","🇼","🇽","🇾","🇿","🈁","🈂","🈚","🈯","🈲","🈳","🈴","🈵","🈶","🈷","🈸","🈹","🈺","🉐","🉑","🌀","🌁","🌂","🌃","🌄","🌅","🌆","🌇","🌈","🌉","🌊","🌋","🌌","🌍","🌎","🌏","🌐","🌑","🌒","🌓","🌔","🌕","🌖","🌗","🌘","🌙","🌚","🌛","🌜","🌝","🌞","🌟","🌠","🌰","🌱","🌲","🌳","🌴","🌵","🌷","🌸","🌹","🌺","🌻","🌼","🌽","🌾","🌿","🍀","🍁","🍂","🍃","🍄","🍅","🍆","🍇","🍈","🍉","🍊","🍋","🍌","🍍","🍎","🍏","🍐","🍑","🍒","🍓","🍔","🍕","🍖","🍗","🍘","🍙","🍚","🍛","🍜","🍝","🍞","🍟","🍠","🍡","🍢","🍣","🍤","🍥","🍦","🍧","🍨","🍩","🍪","🍫","🍬","🍭","🍮","🍯","🍰","🍱","🍲","🍳","🍴","🍵","🍶","🍷","🍸","🍹","🍺","🍻","🍼","🎀","🎁","🎂","🎃","🎄","🎅","🎆","🎇","🎈","🎉","🎊","🎋","🎌","🎍","🎎","🎏","🎐","🎑","🎒","🎓","🎠","🎡","🎢","🎣","🎤","🎥","🎦","🎧","🎨","🎩","🎪","🎫","🎬","🎭","🎮","🎯","🎰","🎱","🎲","🎳","🎴","🎵","🎶","🎷","🎸","🎹","🎺","🎻","🎼","🎽","🎾","🎿","🏀","🏁","🏂","🏃","🏄","🏆","🏇","🏈","🏉","🏊","🏠","🏡","🏢","🏣","🏤","🏥","🏦","🏧","🏨","🏩","🏪","🏫","🏬","🏭","🏮","🏯","🏰","🐀","🐁","🐂","🐃","🐄","🐅","🐆","🐇","🐈","🐉","🐊","🐋","🐌","🐍","🐎","🐏","🐐","🐑","🐒","🐓","🐔","🐕","🐖","🐗","🐘","🐙","🐚","🐛","🐜","🐝","🐞","🐟","🐠","🐡","🐢","🐣","🐤","🐥","🐦","🐧","🐨","🐩","🐪","🐫","🐬","🐭","🐮","🐯","🐰","🐱","🐲","🐳","🐴","🐵","🐶","🐷","🐸","🐹","🐺","🐻","🐼","🐽","🐾","👀","👂","👃","👄","👅","👆","👇","👈","👉","👊","👋","👌","👍","👎","👏","👐","👑","👒","👓","👔","👕","👖","👗","👘","👙","👚","👛","👜","👝","👞","👟","👠","👡","👢","👣","👤","👥","👦","👧","👨","👩","👪","👫","👬","👭","👮","👯","👰","👱","👲","👳","👴","👵","👶","👷","👸","👹","👺","👻","👼","👽","👾","👿","💀","💁","💂","💃","💄","💅","💆","💇","💈","💉","💊","💋","💌","💍","💎","💏","💐","💑","💒","💓","💔","💕","💖","💗","💘","💙","💚","💛","💜","💝","💞","💟","💠","💡","💢","💣","💤","💥","💦","💧","💨","💩","💪","💫","💬","💭","💮","💯","💰","💱","💲","💳","💴","💵","💶","💷","💸","💹","💺","💻","💼","💽","💾","💿","📀","📁","📂","📃","📄","📅","📆","📇","📈","📉","📊","📋","📌","📍","📎","📏","📐","📑","📒","📓","📔","📕","📖","📗","📘","📙","📚","📛","📜","📝","📞","📟","📠","📡","📢","📣","📤","📥","📦","📧","📨","📩","📪","📫","📬","📭","📮","📯","📰","📱","📲","📳","📴","📵","📶","📷","📹","📺","📻","📼","🔀","🔁","🔂","🔃","🔄","🔅","🔆","🔇","🔈","🔉","🔊","🔋","🔌","🔍","🔎","🔏","🔐","🔑","🔒","🔓","🔔","🔕","🔖","🔗","🔘","🔙","🔚","🔛","🔜","🔝","🔞","🔟","🔠","🔡","🔢","🔣","🔤","🔥","🔦","🔧","🔨","🔩","🔪","🔫","🔬","🔭","🔮","🔯","🔰","🔱","🔲","🔳","🔴","🔵","🔶","🔷","🔸","🔹","🔺","🔻","🔼","🔽","🕐","🕑","🕒","🕓","🕔","🕕","🕖","🕗","🕘","🕙","🕚","🕛","🕜","🕝","🕞","🕟","🕠","🕡","🕢","🕣","🕤","🕥","🕦","🕧","🗻","🗼","🗽","🗾","🗿","😀","🙂","🙅","🙆","🙇","🙈","🙉","🙊","🙋","🙌","🙍","🙎","🙏","🚀","🚁","🚂","🚃","🚄","🚅","🚆","🚇","🚈","🚉","🚊","🚋","🚌","🚍","🚎","🚏","🚐","🚑","🚒","🚓","🚔","🚕","🚖","🚗","🚘","🚙","🚚","🚛","🚜","🚝","🚞","🚟","🚠","🚡","🚢","🚣","🚤","🚥","🚦","🚧","🚨","🚩","🚪","🚫","🚬","🚭","🚮","🚯","🚰","🚱","🚲","🚳","🚴","🚵","🚶","🚷","🚸","🚹","🚺","🚻","🚼","🚽","🚾","🚿","🛀","🛁","🛂","🛃","🛄","🛅","‼","⁉","™","ℹ","↔","↕","↖","↗","↘","↙","↩","↪","#⃣","⌚","⌛","⏩","⏪","⏫","⏬","⏰","⏳","Ⓜ","▪","▫","▶","◀","◻","◼","◽","◾","☀","☁","☎","☑","☔","☕","☝","☺","♈","♉","♊","♋","♌","♍","♎","♏","♐","♑","♒","♓","♠","♣","♥","♦","♨","♻","♿","⚓","⚠","⚡","⚪","⚫","⚽","⚾","⛄","⛅","⛎","⛔","⛪","⛲","⛳","⛵","⛺","⛽","✂","✅","✈","✉","✊","✋","✌","✏","✒","✔","✖","✨","✳","✴","❄","❇","❌","❎","❓","❔","❕","❗","❤","➕","➖","➗","➡","➰","➿","⤴","⤵","⬅","⬆","⬇","⬛","⬜","⭐","⭕","0⃣","〰","〽","1⃣","2⃣","㊗","㊙","3⃣","4⃣","5⃣","6⃣","7⃣","8⃣","9⃣","©","®",""];
    self.clickToolbar(name, function() {
        var rows = 20,//每頁顯示多少行
            cols = 25,//每頁顯示多少列
            total = 872,//表情總共數(shù)量
            startNum = 0,//初始顯示第幾個表情
            cells = rows * cols,//每頁顯示的表情數(shù)量
            pages = Math.ceil(total / cells),//多少分頁
            colsHalf = Math.floor(cols / 2),
            wrapperDiv = K('
'),
            elements = [],
            menu = self.createMenu({
                name: name,
                beforeRemove: function() {
                    removeEvent();
                }
            });
        menu.div.append(wrapperDiv);
        var previewDiv, previewImg;
        if(allowPreview) {
            previewDiv = K('
').css('right', 0);
            previewImg = K('');//這里是初始顯示的表情
            wrapperDiv.append(previewDiv);
            previewDiv.append(previewImg);
        }
        
        function bindCellEvent(cell, j, num) {
            if(previewDiv) {
                cell.mouseover(function() {
                    if(j > colsHalf) {
                        previewDiv.css('left', 0);
                        previewDiv.css('right', '');
                    } else {
                        previewDiv.css('left', '');
                        previewDiv.css('right', 0);
                    }
                    previewImg.attr('src', path + num + '.png');
                    //console.log('這里是鼠標懸浮表情顯示大表情的地方');
                    K(this).addClass('ke-on');
                });
            } else {
                cell.mouseover(function() {
                    K(this).addClass('ke-on');
                });
            }
            cell.mouseout(function() {
                K(this).removeClass('ke-on');
            });
            cell.click(function(e) {
                //console.log('這里是吧表情插入到編輯器里面',emoji[num]);
                self.insertHtml(emoji[num]).hideMenu().focus();
                e.stop();
            });
        }

        function createEmoticonsTable(pageNum, parentDiv) {
            var table = document.createElement('table');
            parentDiv.append(table);
            if(previewDiv) {
                K(table).mouseover(function() {
                    previewDiv.show('block');
                });
                K(table).mouseout(function() {
                    previewDiv.hide();
                });
                elements.push(K(table));
            }
            table.className = 'ke-table';
            table.cellPadding = 0;
            table.cellSpacing = 0;
            table.border = 0;
            var num = (pageNum - 1) * cells + startNum;
            for(var i = 0; i < rows; i++) {
                var row = table.insertRow(i);
                for(var j = 0; j < cols; j++) {
                    var cell = K(row.insertCell(j));
                    cell.addClass('ke-cell');
                    bindCellEvent(cell, j, num);
                    var span = K('')
                        .css('background-position', '-' + (24 * num) + 'px 0px')
                        .css('background-image', 'url(' + path + 'static.gif)');
                    //console.log('這里是顯示表情列表的地方',num);
                    cell.append(span);
                    elements.push(cell);
                    num++;
                }
            }
            return table;
        }
        var table = createEmoticonsTable(currentPageNum, wrapperDiv);

        function removeEvent() {
            K.each(elements, function() {
                this.unbind();
            });
        }
        var pageDiv;

        function bindPageEvent(el, pageNum) {
            el.click(function(e) {
                removeEvent();
                table.parentNode.removeChild(table);
                pageDiv.remove();
                table = createEmoticonsTable(pageNum, wrapperDiv);
                createPageTable(pageNum);
                currentPageNum = pageNum;
                e.stop();
            });
        }

        function createPageTable(currentPageNum) {
            pageDiv = K('
');
            wrapperDiv.append(pageDiv);
            for(var pageNum = 1; pageNum <= pages; pageNum++) {
                if(currentPageNum !== pageNum) {
                    var a = K('[' + pageNum + ']');
                    bindPageEvent(a, pageNum);
                    pageDiv.append(a);
                    elements.push(a);
                } else {
                    pageDiv.append(K('@[' + pageNum + ']'));
                }
                pageDiv.append(K('@ '));
            }
        }
        createPageTable(currentPageNum);
    });
});