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

介绍

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

效果图预览

使用说明

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

实现思路

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

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

2. 使用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();
    }

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

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习知识点，请移步前往小编：https://gitee.com/MNxiaona/733GH/blob/master/jianshu