更新记录

1.0.0（2025-10-31） 下载此版本

第一版

平台兼容性

uni-app(3.8.1)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ √ √ √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
√ √ √ √ √ √ √ √ √ √ √

富文本编辑器@用户功能

富文本编辑器@功能使用说明

功能概述

该组件是一个带有@用户功能的富文本编辑器，支持在编辑内容时插入@用户标记，通过弹窗选择用户并以图片形式插入到编辑器中。

主要功能点

  • 富文本编辑功能

  • @用户选择与插入

  • 自定义用户选择弹窗

  • 生成@用户的图片标记

组件结构说明

模板结构

  1. 富文本编辑器：核心编辑区域，支持自动高度调整，最大高度400px

  2. @按钮：触发用户选择弹窗

  3. Canvas画布：用于生成@用户的图片（隐藏显示）

  4. 用户选择弹窗：展示可选用户列表，支持选择操作

数据属性

属性名 类型 说明
editorCtx Object 富文本编辑器上下文
canvasCtx Object Canvas绘图上下文
cHeight Number Canvas画布高度
userNameMap Object 用户名映射表（id->name）
remarkAtList Array @用户列表
remarkContent String 备注内容
showUserSelector Boolean 控制用户选择器显示状态
userList Array 可选用户数据列表

方法说明

  1. onEditorReady：初始化富文本编辑器上下文

  2. handleEditorInput：处理编辑器输入事件

  3. atClick：打开用户选择弹窗

  4. closeUserSelector：关闭用户选择弹窗

  5. selectUser：选择用户并插入到编辑器

  6. createATImg：创建@用户的图片标记

使用流程

  1. 编辑内容：在富文本编辑器中输入需要的内容

  2. 插入@用户：

    • 点击编辑器旁的"@"按钮，打开用户选择弹窗

    • 在弹窗中选择需要@的用户

    • 选择后自动关闭弹窗，并在编辑器当前位置插入@用户标记（图片形式）

  3. 完成编辑：继续编辑其他内容或完成编辑

注意事项

  1. 组件依赖uni-app的富文本编辑器和Canvas组件

  2. 用户数据目前为模拟数据，实际使用时需替换为真实用户数据

  3. @标记以图片形式插入，需确保Canvas绘图功能正常

（注：文档部分内容可能由 AI 生成）

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。