HarmonyOS 鸿蒙Next RichEditor 实现@某人 功能

HarmonyOS 鸿蒙Next RichEditor 实现@某人 功能

RichEditor 如何获取最终的输入内容，@多个人用addBuilderSpan实现后，getSpans获取到的是span信息里面输入的信息

2 回复

请参考demo是否符合您的要求：

[@Entry](/user/Entry)

[@Component](/user/Component)

struct Index {

  [@State](/user/State) data: string =

    '';

  controller: RichEditorController = new RichEditorController();

  options: RichEditorOptions = { controller: this.controller };

  build() {

    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {

      RichEditor(this.options)

        .onReady(() => {

          this.controller.addTextSpan(this.data, { style: { fontColor: Color.Orange, fontSize: 18 } })

        })

        .onIMEInputComplete((value: RichEditorTextSpanResult) => {

          console.log("value:" + value.value.toString().substring(value.offsetInSpan[0],value.offsetInSpan[1]))

        })

        .borderWidth(1)

        .borderColor(Color.Green)

        .width("100%")

        .height(400)

    }

  }

}

更多关于HarmonyOS 鸿蒙Next RichEditor 实现@某人 功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中实现Next RichEditor的“@某人”功能，通常涉及以下几个步骤：

  1. 文本解析：首先，需要在用户输入文本时实时解析内容，识别出“@”符号及其后的字符串，这通常通过正则表达式或字符串匹配算法完成。

  2. 用户匹配：解析出的字符串需与系统中的用户数据进行匹配，以确定“@”提及的具体用户。这通常涉及对数据库中用户信息的查询。

  3. UI渲染：匹配成功后，需要将提及的用户以特定格式（如高亮显示或添加头像）渲染在RichEditor中，以提升用户体验。

  4. 交互逻辑：还需实现点击“@”提及用户时的交互逻辑，如弹出用户详情页或执行其他自定义操作。

  5. 数据持久化：在编辑内容保存时，需确保“@”提及的用户信息以适当格式存储，以便后续加载和显示。

实现该功能时，需确保代码的高效性和稳定性，同时遵循HarmonyOS的开发规范和API文档。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部