先上传一个图片资源附件

/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,//表情总共数量
            startNum = 0,//初始显示第几个表情
            cells = rows * cols,//每页显示的表情数量
            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); }); });