跳到主要内容

消息编辑组件

消息编辑组件 message-editor 负责编辑发送消息的内容。客户端应用程序必须连接到融云服务器,才可以发送消息显示会话列表。

输入框中的内容会由 IMKit SDK 直接发送,不支持外部获取。目前支持发送的消息类型包括:

  • 文本消息
  • 引用消息
  • 图片消息
  • 文件消息
  • @ 消息(输入 @ 符号,会弹出群成员列表,选中 @ 成员即可)

未列出的消息类型(详见消息类型概述)均不支持通过 IMKit 的输入框发送。

组件用法

导入 IMKit 时,请通过 IMKit 的 defineCustomElements() 统一引入所有组件。Vue 项目需要添加过滤自定义组件配置,详见导入 SDK

import * as RongIMLib from '@rongcloud/imlib-next'
// imkit 为核心模块
import { defineCustomElements, imkit } from '@rongcloud/imkit'

defineCustomElements()

按上述方式引入组件后,您可以直接使用 message-editor

属性列表

下面列出了 message-editor 组件的属性。

属性名称类型描述
base-sizestring设置字体图标和发送按钮文字大小(并非输入框输入文字大小)。接受以 px 为单位的数字或百分比(根据父级 font-size 百分比),例如 18px、62.5%。默认值:16px。

组件样式

提示

如不设置 div 样式,会导致消息编辑组件展示位置异常。

使用 message-editor 组件时,必须将组件包裹在 div 元素,并通过 div 的样式控制组件的宽高等样式。

<template>
<div class="chat-massage-editor">
<message-editor ref="messageEditor" base-size="10px"></message-editor>
</div>
</template>

<style scoped>
.chat-massage-editor {
height: 220px;
}
</style>