【入门到精通】鸿蒙next应用开发：文本选择菜单实现案例

炫酷盖茨猫先生

于 2025-04-30 14:39:20 发布

阅读量615

点赞数 13

分类专栏：鸿蒙5.0开发 ArkUI框架 ArkTS组件文章标签： harmonyos 华为 ArkTS ArkUI android 鸿蒙系统前端

本文链接：https://blog.csdn.net/m0_73088370/article/details/147632515

版权

鸿蒙5.0开发同时被 3 个专栏收录

819 篇文章

订阅专栏

ArkTS组件

600 篇文章

订阅专栏

ArkUI框架

447 篇文章

订阅专栏

往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

介绍

本案例拓展富文本组件文字选择菜单选项，通过富文本组件editMenuOptions属性添加自定义选择菜单，在编辑文字时选择更多选项打开额外菜单栏。

效果图预览

使用说明

进入主页后输入文字，长按选择文字后自动打开编辑菜单。
点击更多打开自定义拓展菜单。

实现思路

子组件RichEditorComponent使用富文本组件RichEditor实现文本编辑功能。

RichEditor({ controller: this.controller })
  // TODO: 知识点：富文本组件使用editMenuOptions方法配置选中菜单
  // onCreateMenu对象实现按钮新增
  // onMenuItemClick对象配置各按钮对应的方法
  .editMenuOptions({
     onCreateMenu: this.onCreatMenu, onMenuItemClick: this.onMenuItemClick
  })// 在富文本组件渲染完成后修改文字大小等基础属性

使用editMenuOptions方法扩展文本选择菜单，并分别传入菜单选项onCreateMenu和点击按钮触发方法onMenuItemClick。

initMenuOptions() {
  this.onCreatMenu = (textMenuItems: Array<TextMenuItem>) => {
    if (this.menuItemsContent) {
      // 循环遍历新增选项数组，传入RichEditor组件中
      this.menuItemsContent.forEach((value) => {
        textMenuItems.push(value);
      })
    }
    return textMenuItems;
  }
  this.onMenuItemClick = (textMenuItems: TextMenuItem, textRange: TextRange) => {
    // 传递当前选中的文本信息
    this.selectText = this.controller.getSpans({ start: textRange.start, end: textRange.end });
    // 传递当前选中的选项
    this.selectMenu = textMenuItems.content.toString();
    return true;
  }
  return false;
}
aboutToAppear(): void {
  this.initMenuOptions();
}

父组件SelectTextMenu传入选项对象，传入需要新增的菜单选项，并在点击选项后获取到当前选项和当前选中的文本信息。

@Watch('selectMenuChange') @State selectMenu: string = ''; // 当前选中的按钮选项
@State selectText: Array<RichEditorTextSpanResult | RichEditorImageSpanResult> = []; // 当前选中的文本内容
// 将按钮对象TextMenuItem传入子组件
menuItemsContent: Array<TextMenuItem> = [
  {
    content: $r('app.string.select_text_menu_search_menu'),
    id: TextMenuItemId.of('search'),
    icon: $r("app.media.select_menu_search")
  },
  {
    content: $r('app.string.select_text_menu_translate_menu'),
    id: TextMenuItemId.of('translate'),
    icon: $r("app.media.select_menu_translate")
  },
  {
    content: $r('app.string.select_text_menu_share_menu'),
    id: TextMenuItemId.of('share'),
    icon: $r("app.media.select_menu_share")
  },
];

// 监听到选中按钮发生改变时触发相应方法 
selectMenuChange() {
  promptAction.showToast({
    message: $r('app.string.select_text_menu_tips')
  });
}

高性能知识点

不涉及

工程结构&模块类型

selecttextmenu                                    // har类型
|---component 
|   |---RichEditorComponent.ets                   // 富文本组件  
|---model
|   |---SelectMenuOption.ets                      // 富文本定义类
|---view
|   |---SelectTextMenu.ets                        // 视图层-文本编辑页面