kindeditor自定义网络表情包

工作中遇到的需求，项目后台通过数据库管理表情包，实现新增和删除功能，同步到输入框中

记录一下，避免忘记

 

1. 找到kindeditor->plugins->emoticons
   
   建整个文件夹复制一份到当前目录，并且改名为emoticons2,并且将emoticons2目录下的emoticons.js也重命名为emoticons2.js
2. 将emoticons2.js中的代码修改如下：

   ---

   KindEditor.plugin('emoticons2', function(K) {
      var self = this, name = 'emoticons2',
         path = (self.emoticonsPath || self.pluginsPath + 'emoticons2/images/'),
           emoticonsPathList = self.emoticons2.emoticonsPathList,//必须传入的参数，服务器表情包文件名集合
         allowPreview = self.allowPreviewEmoticons === undefined ? true : self.allowPreviewEmoticons,
         currentPageNum = 1;
      self.clickToolbar(name, function() {
         var rows = (self.emoticons2.rows || 5),
            cols = (self.emoticons2.cols || 9),
            total = emoticonsPathList.length, startNum = 0,
            cells = rows * cols,//每页总记录数（表情的个数）
            pages = Math.ceil(total / cells),//页数
            colsHalf = Math.floor(cols / 2),
            wrapperDiv = K('<div class="ke-plugin-emoticons"></div>'),
            elements = [],
            menu = self.createMenu({
               name : name,
               beforeRemove : function() {
                  removeEvent();
               }
            });
         menu.div.append(wrapperDiv);
         var previewDiv, previewImg;
         if (allowPreview) {
            previewDiv = K('<div class="ke-preview"></div>').css('right', 0);
   //这里是开启预览显示的预览图
            previewImg = K('<img class="ke-preview-img" src="' + path + emoticonsPathList[startNum] + '" />');
            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 + emoticonsPathList[num]);
                  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) {
               //这里是最终将表情添加到富文本框中的方法，图片显示太大可以加style控制
               self.insertHtml('<img src="' + path + emoticonsPathList[num] + '" border="0" alt="" />').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('<span class="ke-img"></span>')
                     //.css('background-position', '-' + (24 * num) + 'px 0px')
                     //.css('background-image', 'url(' + path + 'static.gif)');
                           .css('background-size', '24px 24px')
                           .css('background-image', 'url(' + path + emoticonsPathList[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('<div class="ke-page"></div>');
            wrapperDiv.append(pageDiv);
            for (var pageNum = 1; pageNum <= pages; pageNum++) {
               if (currentPageNum !== pageNum) {
                  var a = K('<a href="javascript:;">[' + pageNum + ']</a>');
                  bindPageEvent(a, pageNum);
                  pageDiv.append(a);
                  elements.push(a);
               } else {
                  pageDiv.append(K('@[' + pageNum + ']'));
               }
               pageDiv.append(K('@&nbsp;'));
            }
         }
         createPageTable(currentPageNum);
      });
   });
   

   ---

3. 修改kindeditor->plugins->emoticons->themes->default下的default.css
   
   增加如下代码

   ---

   .ke-icon-emoticons2 {
      background-position: 0px -608px;
      width: 16px;
      height: 16px;
   }
   
   

   ---

4. 使用办法

   ---

   html输入框:
   <textarea id="editor_id" name="content" style="width:700px;height:300px;">
   &lt;strong&gt;HTML内容&lt;/strong&gt;
   </textarea>

   js引入：
   <script charset="utf-8" src="/editor/kindeditor/kindeditor-all-min.js"></script>
   <script charset="utf-8" src="/editor/kindeditor/lang/zh-CN.js"></script>
   <script charset="utf-8" src="/editor/kindeditor/themes/default/default.css"></script>
   <script>
   var editor,options,emoticonsPathList;
   emoticonsPathList=['img1.gif','img2.gif','img3.gif','img4.gif','img5.gif'];
   options = {
        items : [
           'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
           'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
           'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
           'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
           'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
           'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
           'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons2', 'baidumap', 'pagebreak',
           'anchor', 'link', 'unlink', '|', 'about'
        ],
        emoticonsPath:'http://localhost:8080/img/',//指定图片服务器地址
        emoticons2:{
           rows:5,
           cols:9,
           emoticonsPathList:emoticonsPathList
        }
   };
          editor = KindEditor.ready(function(K) {
                   window.editor = K.create('#editor_id',options);
           });
   </script>
   
   
   这个版本未经测试，只是做了一个记录，如有错误，请留言，我会及时改正的