预览截图:
demo详细代码:https://gitee.com/mosmos_admin/wxemoji
页面引入js:emoji-parser.esm.js
// 表情组件
const emojiParser = require("../components/emoji/emoji-parser.esm");
数据初始化:
data: {// 获取表情emojis:emojiParser.getEmojis({ size: 30 }),// 输入内容text:"",// 光标位置textCursor:0,// 用于显示的内容textEle:"",},
onLoad() {// 设置显示结果的表情大小emojiParser.configParseEmoji({ size: 30 })},
页面展示:
<view style="width:100%;height:100%;"><view style="padding:0 20px;"><textarea value="{{text}}" bindinput="inputText" bindfocus="textFocus" bindblur="textBlur" placeholder="输入测试"></textarea></view><view style="padding:0 20px;height:200px;overflow:scroll;"><block wx:for="{{emojis}}" wx:key="index"><view class="emotion_item" data-name="{{item.cn}}" bindtap="textInsertEmoji"><view class="icon_emotion" style="{{item.style}}"></view></view></block></view><view style="padding:20px;">显示结果:<rich-text nodes="{{'<div style=\"white-space: pre-line;\">'+ textEle +'</div>'}}"></rich-text></view></view>