[分享]帝国CMS7.5在CK编辑器中加入表情包功能帝国cms

帝国论坛 → 帝国网站管理系统交流区 → 帝国CMS 7.5与8.0专版 → [分享]帝国CMS7.5在CK编辑器中加入表情包功能

【本版专题贴子】

ggqm520
用户头衔：进士

精华贴   ：0
发贴数   ：1227
经验值   ：5257
注册时间：2010-08-15

信息

搜索

好友

发送悄悄话

【精益求精－帝国网站管理系统7.5正式版开源发布】 [第 1 楼]

[分享]帝国CMS7.5在CK编辑器中加入表情包功能

这个表情图标在默认编辑器中原本是有的，但被精简了，可能是开发者不想因为图标地址而暴露后台管理地址吧，那也没事，那我们整合一个新浪微博的表情吧（一举两得又有表情插入又不用内置表情图片），下面的教程看上去麻烦其实非常简单，一定要看好每一步，有问题就在后面回复吧！下载及教程请移步：https://www.wenyunfang.com/zazhi/zhongwangjiaocheng/2064.html

效果图如下：

第一步找到CK编辑器的配置文件，以前端投稿为例。/e/data/ecmseditor/infoeditor/config.js，给config.toolbar_full这个里面增加表情插件名weiboemoji，比如小编的。
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', 'aiArticleGenerator', 'weiboemoji', 'multiImageUpload', 'weixin', 'Maximize' ] } 
接着在最后的插件配置那里继续增加表情插件名weiboemoji，比如小编的。
config.extraPlugins = 'etranfile,etranmedia,autoformat,ecleanalltext,einsertbr,einsertpage,einserttime,equotetext,aiArticleGenerator,weiboemoji,multiImageUpload,weixin'; 
接下来就简单了，找到/e/data/ecmseditor/infoeditor/plugins，该目录下面新建weiboemoji文件夹，其文件下写个plugin.js。比如小编的新浪微博插件的plugin.js代码如下：
CKEDITOR.plugins.add('weiboemoji', { 
init: function (editor) { 
var pluginName = 'weiboemoji'; 
window.ckWeiboEmojiCallbacks = window.ckWeiboEmojiCallbacks || {}; 
CKEDITOR.dialog.add('weiboEmojiDialog', function (editor) { //注册表情弹窗 
return { 
title: '微博表情', 
minWidth: '422px', 
minHeight: 300, 
contents: [{ 
id: 'emojiTab', 
label: '选择表情', 
elements: [{ 
type: 'html', 
id: 'emojiContainer', 
html: '<div id="cke_weibo_emoji_wrap" style="width:422px;height:300px;overflow-y:auto;text-align:center;line-height:0;font-size:0;margin-top:-15px;background:#f8f8f8;">加载表情中...</div>' 
}] 
}], 
onShow: function () { 
var dialog = this; 
var emojiWrap = document.getElementById('cke_weibo_emoji_wrap'); 
emojiWrap.innerHTML = '<div style="width:422px;padding:10px 0;font-size:12px;color:#999;">加载表情中...</div>'; 
getWeiboEmojis(function(emojis) { 
if (!emojis || emojis.length === 0) { 
emojiWrap.innerHTML = '<div style="width:422px;padding:10px 0;font-size:12px;color:#999;">表情加载失败，请刷新重试</div>'; 
return; 
} 
var html = '', columns = editor.config.weiboEmojiColumns || 10; 
for (var i = 0; i < emojis.length; i++) { 
var emoji = emojis[i]; 
if (i % columns === 0 && i > 0) html += '<br/>'; 
html += '<div style="display:inline-block;border:1px solid #eee;border-radius:2px;margin:0;padding:2px;cursor:pointer;background:#fff;width:40px;height:40px;box-sizing:border-box;" ' + 
'title="' + emoji.phrase + '" data-url="' + emoji.url + '">' + 
'<img src="' + emoji.url + '" style="width:100%;height:100%;border:0;object-fit:contain;"/>' + 
'</div>'; 
} 
emojiWrap.innerHTML = html; 
var items = emojiWrap.getElement***yTagName('div'); 
for (var j = 0; j < items.length; j++) { 
if (!items[j].dataset.url) continue; 
(function(item) { 
item.onclick = function() { 
var img = editor.document.createElement('img'); 
img.setAttribute('src', item.dataset.url); 
img.setAttribute('title', item.title); 
img.setAttribute('width', 32); 
img.setAttribute('height', 32); 
img.setAttribute('border', 0); 
editor.focus(); 
editor.insertElement(img); 
dialog.hide(); 
}; 
})(items[j]); 
} 
}); 
}, 
onOk: function () { this.hide(); }, 
onCancel: function () { this.hide(); } 
}; 
}); 
editor.addCommand(pluginName, { 
exec: function (editor) { 
editor.openDialog('weiboEmojiDialog'); 
} 
}); 
editor.ui.addButton('weiboemoji', { 
label: '微博表情', 
command: pluginName, 
icon: this.path + 'images/angel_smile.gif' 
}); 
function getWeiboEmojis(callback) { 
var callbackId = 'cb_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9); 
var fullCallbackName = 'window.ckWeiboEmojiCallbacks.' + callbackId; 
window.ckWeiboEmojiCallbacks[callbackId] = function(res) { 
var list = []; 
if (res?.code === 1 && Array.isArray(res.data)) { 
list = res.data.filter(emoji => emoji?.type === 'face' && emoji.url && emoji.phrase); 
} 
callback(list); 
delete window.ckWeiboEmojiCallbacks[callbackId]; 
removeScript('weibo_emoji_script_' + callbackId); 
}; 
var scriptId = 'weibo_emoji_script_' + callbackId; 
var url = 'https://api.weibo.com/2/emotions.json?source=1362404091&callback=' + fullCallbackName; 
var script = document.createElement('script'); 
script.id = scriptId; 
script.src = url; 
script.charset = 'utf-8'; 
var timeout = setTimeout(() => { 
delete window.ckWeiboEmojiCallbacks[callbackId]; 
removeScript(scriptId); 
callback([]); 
}, 8000); 
script.onerror = script.onload = function() { 
clearTimeout(timeout); 
setTimeout(() => removeScript(scriptId), 200); 
}; 
document.head.appendChild(script); 
function removeScript(id) { 
var el = document.getElementById(id); 
el && el.parentNode.removeChild(el); 
} 
} 
} 
}); 

实在动手能力太差的小伙伴那就直接下载压缩包，解压出来上传到/e/data/ecmseditor/infoeditor/plugins文件夹下面吧。特别提醒：第一步配置文件修改那是必须的。(此教程为例，前端编辑器与后端编辑器的各类插件都能轻松便捷制作，目前小编的CK编辑器增加AI生成文章功能，新浪微博表情，多图多文件直传到七牛云，微信公众号采集)

《帝国CMS7.5在CK编辑器中加入表情包功能》首发文韵坊，推荐你来看看，原文地址: https://www.wenyunfang.com/zazhi/zhongwangjiaocheng/2064.html

[该贴被修改 1 次，最后修改时间 2026-03-13 10:06:09 ]

基于帝国CMS的Ai即时通讯聊天室：https://www.wenyunfang.com/e/extend/chat/ 签名广告位出售中！！！！！