【轻知识】phper：后台文字编辑支持emoji

效果图

添加与编辑

image.png

列表

image.png

代码实现

数据库

对应的表做字符集修改

alter table `spread`.`yan_spread_content` CHARSET=utf8mb4;

alter table `spread`.`yan_spread_content` CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

框架（我用的laravel框架）中连接字符集也做更改

 'charset' => 'utf8',
'collation' => 'utf8_unicode_ci',

改成

'charset' => 'utf8mb4',
 'collation' => 'utf8mb4_unicode_ci',

php

php用了emojione/emojione组件用于转换emoji字符到图片（比如转换成html字符，emoji字符就成了img的标签了），安装composer require "emojione/emojione"。

Emojione::toImage('emoji text')。

js

js用了emoji-picker。另外，如果你的项目是前后端分离的可能（我负责的有的项目不是前后端分离所以，没研究这个库了）用emoji-mart是不错的吧。

这个库，使用说明感觉不完善。我是看了issue才使用顺利的。

html

<div class="col-sm-9">
    <div class="lead emoji-picker-container">
        <textarea id="content" class="form-control textarea-control" rows="3" maxlength=500 placeholder="emoji" data-emojiable="true" name="text"   v-model="currentItem.text"   @input="call()"></textarea>

    </div>
    已有字数：<input id="have" size=5 value="0" disabled>
    剩余字数：<input id="last" size=5 value="500" disabled>
</div>

初始化：声明 并设置高度。

window.emojiPicker = new EmojiPicker({
            emojiable_selector: '[data-emojiable=true]',
            assetsPath: '/js/Lib/emoji-picker/img/',
            popupButtonClasses: 'fa fa-smile-o'
});
window.emojiPicker.discover();
$("[data-emojiable=true]").css("height", 100)

获取emoji字符

vue 的方式就不说了，绑定（currentItem.text）后就直接拿。其他的通过id获取即可。其实emoji的字符都在textarea里，显示的图片，都是在一个可编辑的div里面。

点击列表，或者再点击添加输入框时

 $(".emoji-wysiwyg-editor").empty() // 对上一次的清空
window.emojiPicker.appendUnicodeAsImageToElement($(".emoji-wysiwyg-editor"),item.text) /把emoji字符赋值给 .emoji-wysiwyg-editor 那个可编辑的div。这样子才能展示处理。作者没写，在issue看到的。
 $(".emoji-wysiwyg-editor").css("white-space", "pre-wrap") // 解决换行的问题。