鸿蒙开发实战案例：文本选择菜单案例

原创

小帅聊鸿蒙

发布于 2025-03-03 20:33:13

370

文章被收录于专栏：鸿蒙开发笔记鸿蒙开发笔记

介绍

本案例拓展富文本组件文字选择菜单选项，通过富文本组件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();
    }

DD一下：`欢迎大家关注公众号<程序猿百晓生>，可以了解到一下知识点。`

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

父组件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                        // 视图层-文本编辑页面