更新记录

1.0.2（2025-12-17） 下载此版本

• 文档更新，完善示例工程

1.0.1（2025-12-17） 下载此版本

修复问题

• 插入表情时设置 readOnly 防止重复操作
• 使用 $nextTick 确保 DOM 更新后操作
• 修复使用setContents时onContent事件不生效的问题

1.0.0（2025-12-17） 下载此版本

1. 平台兼容性

支持：MP-BAIDU、APP-PLUS、MP-WEIXIN、H5

不同平台使用不同的 editor 上下文创建方式

2. 表情存储

• 最近使用表情使用 uni.setStorageSync 存储
• 最大存储数量：7个
• 存储键名：recently

3. 样式适配

• 组件使用 rpx 单位，支持响应式
• 可自定义 SCSS 变量调整样式
• 图片大小固定为 66rpx

4. 性能优化

• 插入表情时设置 readOnly 防止重复操作
• 使用 $nextTick 确保 DOM 更新后操作

平台兼容性

uni-app(4.0)

amlx-face-editor 插件文档

📋 插件简介

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

⚠️ 重要提示：

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

📦 安装与使用

1. 引入组件

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

2. 基本使用示例

<template>
    <view>
        <view slot="default" class="default">
            <!-- 表情输入框 -->
            <AmlxFaceEditor ref="faceTextarea" @onContent="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>
    </view>
</template>

<script>
    import AmlxFaceEditor from '@/components/amlx-face-editor/amlx-face-editor.vue';
    import AmlxFacePanel from '@/components/amlx-face-editor/amlx-face-panel.vue';
    import AmlxFaceRender from '@/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（图片路径）

🗂️ 文件结构

project/
├── components/
│   └── amlx-face-editor/
│       ├── amlx-face-editor.vue
│       ├── amlx-face-panel.vue
│       └── amlx-face-render.vue
└── static/
    ├── js/         
    │   ├── face.js      # 表情数据
    │   └── tools.js     # 工具函数（包含 deltaToText 转换）
    └── emoji/           # 表情图片资源

📄 许可证

本插件代码部分遵循 MIT 许可证。内置表情资源仅供演示，请勿商用。

🆘 技术支持

如遇到问题：

1. 检查 uni-app 版本兼容性
2. 确认表情资源路径正确
3. 查看控制台错误信息
4. 参考 uni-app editor 组件官方文档