更新记录

2.0.5（2026-01-07） 下载此版本

• 细节优化

2.0.4（2026-01-07） 下载此版本

• 细节优化

2.0.3（2026-01-07） 下载此版本

• 表情面板样式调整

平台兼容性

uni-app(3.6.15)

其他

amlx-face-editor 插件文档

📋 插件简介

这是一个基于 uni-app 内置组件 editor 开发的富文本输入框插件，包含表情输入框和表情面板功能。支持最近使用表情、所有表情展示、表情渲染和删除功能。

⚠️ 重要提示：

• 内置表情是从微信中提取的，作者无版权，仅作演示用途
• 商用请自行替换表情资源
• 因使用内置表情带来的版权问题由使用者自行承担

📦 安装与使用

1. 引入组件

将 amlx-face-editor 、 amlx-face-panel 和 amlx-face-render 组件导入到您的 uni-app 项目中。

2. 基本使用示例

<template>
    <view>
        <!-- 表情输入框 -->
        <AmlxFaceEditor ref="faceTextarea" placeholder="输入内容" @hasContent="hasContent = $event"></AmlxFaceEditor>
        <!-- 表情面板 -->
        <AmlxFacePanel :delActive="hasContent" @handleFace="handleFace" @delLastText="delLastText"></AmlxFacePanel>
        <!-- 发送按钮 -->
        <button @click="send">发送</button>
        <!-- 渲染表情内容 -->
        <view class="face-content">
            <AmlxFaceRender :data="text"></AmlxFaceRender>
        </view>
    </view>
</template>

<script>
    import AmlxFaceEditor from '@/uni_modules/amlx-face-editor/components/amlx-face-editor/amlx-face-editor.vue';
    import AmlxFacePanel from '@/uni_modules/amlx-face-editor/components/amlx-face-editor/amlx-face-panel.vue';
    import AmlxFaceRender from '@/uni_modules/amlx-face-editor/components/amlx-face-editor/amlx-face-render.vue';

    export default {
        components: {
            AmlxFaceEditor,
            AmlxFacePanel,
            AmlxFaceRender
        },
        data() {
            return {
                hasContent: false, // 输入框是否有内容
                text: ''
            };
        },
        methods: {
            handleFace(e) {
                this.$refs.faceTextarea.insertFace(e)
            },
            delLastText() {
                this.$refs.faceTextarea.removeLastNode()
            },
            async send() {
                let text = await this.$refs.faceTextarea.getContents()
                this.text = text
                uni.showToast({
                    icon: 'none',
                    title: `发送内容：${text}`
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .face-content{
        padding: 10rpx;
        margin: 30rpx 20rpx;
        height: 300rpx;
        background: #efefef;
        border-radius: 4px;

        // 渲染空白符 \n \b \r
        white-space: pre-wrap;
        word-break: break-all;
    }
</style>

🎯 组件参数说明

amlx-face-editor 组件

表情输入框组件，基于 uni-app 的 editor 组件封装。

Props 参数

Events 事件

Methods 方法

通过组件 ref 调用：

amlx-face-panel 组件

表情选择面板组件，包含最近使用表情和所有表情展示。

Props 参数

Events 事件

amlx-face-render 组件

表情渲染组件，表情输入组件（amlx-face-editor）的文本内容转换为可显示的表情。

Props 参数

🔧 表情数据配置

1. 表情数据源

表情数据位于 /static/js/face.js 文件中，格式如下：

export default {
  emojiList: [
    { key: '[微笑]', url: '/static/emoji/smile.png' },
    { key: '[可爱]', url: '/static/emoji/cute.png' },
    // ... 更多表情
  ]
}

2. 自定义表情

如需替换表情资源：

• 替换 face.js 中的表情数据
• 将表情图片放入对应路径
• 确保每个表情包含 key（文本标识）和 url（图片路径）

🗂️ 文件结构

amlx-face-editor/
├── components/
│   └── amlx-face-editor/
│       ├── amlx-face-editor.vue
│       ├── amlx-face-panel.vue
│       └── amlx-face-render.vue
└── static/
    ├── js/         
    │   ├── face.js      # 表情资源数据
    │   └── tools.js     # 工具函数
    └── emoji/           # 表情图片资源