消息编辑组件

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

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

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

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

组件用法

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

javascript

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

defineCustomElements()

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

属性列表

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

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

组件样式

提示

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

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

JavaScript

<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>