为PHPCMS的评论内容添加表情功能

发布日期：2024-12-04 14:30:55 ｜浏览次数： ｜来源：优化哥

最近在一个其他的网站项目中，有客户想为PHPCMS的网站添加评论表情功能，就是在用户发布评论的时候可以输入表情，评论回复都能发布带有表情的内容，这样能增加用的评论互动友好度，也算是一种提升网站细节的方法吧。今天，优化哥就把这个方法分享出来。

为PHPCMS的评论内容添加表情功能

首页我们需要在PHPCMS的全局函数自定义添加一个评论内容表情转换函数，/phpcms/libs/functions/extention.func.php。在这个文件我们可以自己定义我们想要实现的功能。下面我把这个转换函数点贴出来：

// 评论表情转换 {bqzh($text)}

// 评论表情转换 {bqzh($text)}

function bqzh($text) {

// 定义表情图片的公共路径

$emojiPath = '../statics/picxz/images/bq/';

// 定义表情符号映射

$emojis = [

':?:' => $emojiPath . 'icon_question.gif',

':razz:' => $emojiPath . 'icon_razz.gif',

':sad:' => $emojiPath . 'icon_sad.gif',

':evil:' => $emojiPath . 'icon_evil.gif',

':!:' => $emojiPath . 'icon_exclaim.gif',

':smile:' => $emojiPath . 'icon_smile.gif',

':oops:' => $emojiPath . 'icon_redface.gif',

':grin:' => $emojiPath . 'icon_biggrin.gif',

':eek:' => $emojiPath . 'icon_surprised.gif',

':shock:' => $emojiPath . 'icon_eek.gif',

':???:' => $emojiPath . 'icon_confused.gif',

':cool:' => $emojiPath . 'icon_cool.gif',

':lol:' => $emojiPath . 'icon_lol.gif',

':mad:' => $emojiPath . 'icon_mad.gif',

':twisted:' => $emojiPath . 'icon_twisted.gif',

':roll:' => $emojiPath . 'icon_rolleyes.gif',

':wink:' => $emojiPath . 'icon_wink.gif',

':idea:' => $emojiPath . 'icon_idea.gif',

':arrow:' => $emojiPath . 'icon_arrow.gif',

':neutral:' => $emojiPath . 'icon_neutral.gif',

':cry:' => $emojiPath . 'icon_cry.gif',

':mrgreen:' => $emojiPath . 'icon_mrgreen.gif',

];

$emojiPatterns = [];

$emojiReplacements = [];

foreach ($emojis as $code => $url) {

$emojiPatterns[] = '/' . preg_quote($code, '/') . '/';

$emojiReplacements[] = '<img src="' . htmlspecialchars($url) . '" alt="' . htmlspecialchars($code) . '" class="wp-smiley" style="height: 1em; max-height: 1em;" />';

}

return preg_replace($emojiPatterns, $emojiReplacements, $text);

}

这个方法的逻辑是在模板前端中，用户通过JS代码点击表情按钮弹出对于的表情符号，点击符号后自动输入到评论框内，用的时候把 {bqzh($r[content])} 替换掉原来的评论内容调用 {$r[content]}。这样以后自定义模板调用评论内容与表情，只需要用这个转换函数来替换就行了。如何在前端的评论位置，还需要添加JS代码用来输入表情。

内容模板中可以这样写：

JS代码：用来传入表情到评论框

function grin(obj) {

var val = document.getElementById('comment').value;

document.getElementById('comment').value = val + " " + obj + " ";

}

</script>

还需要显示表情样式：这样用户就能选择表情了

function grin(obj) {

var val = document.getElementById('comment').value;

document.getElementById('comment').value = val + " " + obj + " ";

}

</script>

</div>

这个方法只需要两处，添加自定义转换函数，模板中添加JS与样式代码就行了。能灵活的在想要的位置实现评论表情功能，而不需要修改评论模板的代码。

本文标签：PHPCMS 评论表情

为PHPCMS的评论内容添加表情功能

如果您有什么问题，欢迎咨询技术员

联系我们