效果圖

添加與編輯

image.png

列表

image.png

代碼實(shí)現(xiàn)

數(shù)據(jù)庫(kù)

對(duì)應(yīng)的表做字符集修改

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組件用于轉(zhuǎn)換emoji字符到圖片（比如轉(zhuǎn)換成html字符，emoji字符就成了img的標(biāo)簽了），安裝composer require "emojione/emojione"。

Emojione::toImage('emoji text')。

js

js用了emoji-picker。另外，如果你的項(xiàng)目是前后端分離的可能（我負(fù)責(zé)的有的項(xiàng)目不是前后端分離所以，沒(méi)研究這個(gè)庫(kù)了）用emoji-mart是不錯(cuò)的吧。

這個(gè)庫(kù)，使用說(shuō)明感覺(jué)不完善。我是看了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>
    已有字?jǐn)?shù)：<input id="have" size=5 value="0" disabled>
    剩余字?jǐn)?shù)：<input id="last" size=5 value="500" disabled>
</div>

初始化：聲明 并設(shè)置高度。

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 的方式就不說(shuō)了，綁定（currentItem.text）后就直接拿。其他的通過(guò)id獲取即可。其實(shí)emoji的字符都在textarea里，顯示的圖片，都是在一個(gè)可編輯的div里面。

點(diǎn)擊列表，或者再點(diǎn)擊添加輸入框時(shí)

 $(".emoji-wysiwyg-editor").empty() // 對(duì)上一次的清空
window.emojiPicker.appendUnicodeAsImageToElement($(".emoji-wysiwyg-editor"),item.text) /把emoji字符賦值給 .emoji-wysiwyg-editor 那個(gè)可編輯的div。這樣子才能展示處理。作者沒(méi)寫(xiě)，在issue看到的。
 $(".emoji-wysiwyg-editor").css("white-space", "pre-wrap") // 解決換行的問(wèn)題。