HarmonyOS鸿蒙NEXT中文本选择菜单代码案例

HarmonyOS鸿蒙NEXT中文本选择菜单代码案例

HarmonyOS Next应用开发案例（持续更新中……）

本案例完整代码，请访问：https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/selecttextmenu

本案例已上架 HarmonyOS NEXT 开源组件市场，如需获取或移植该案例，可安装此插件。开发者可使用插件获取鸿蒙组件，添加到业务代码中直接编译运行。

介绍

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

效果图预览

GIF动画

使用说明

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

实现思路

  1. 子组件 RichEditorComponent 使用富文本组件 RichEditor 实现文本编辑功能。
RichEditor({ controller: this.controller })
  // TODO: 知识点：富文本组件使用editMenuOptions方法配置选中菜单
  // onCreateMenu对象实现按钮新增
  // onMenuItemClick对象配置各按钮对应的方法
  .editMenuOptions({
     onCreateMenu: this.onCreatMenu, onMenuItemClick: this.onMenuItemClick
  }) // 在富文本组件渲染完成后修改文字大小等基础属性
  1. 使用 editMenuOptions 方法扩展文本选择菜单，并分别传入菜单选项 onCreateMenu 和点击按钮触发方法 onMenuItemClick。源码参考：RichEditorComponent。
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();
}
  1. 父组件 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: MenuItemId.of('search'),
    icon: $r("app.media.select_menu_search")
  },
  {
    content: $r('app.string.select_text_menu_translate_menu'),
    id: MenuItemId.of('translate'),
    icon: $r("app.media.select_menu_translate")
  },
  {
    content: $r('app.string.select_text_menu_share_menu'),
    id: MenuItemId.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                   // 视图层-文本编辑页面

模块依赖

参考资料


更多关于HarmonyOS鸿蒙NEXT中文本选择菜单代码案例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙NEXT中，文本选择菜单的实现通常涉及使用Text组件和相关的交互事件处理。以下是一个简单的代码案例，展示如何在鸿蒙NEXT中实现文本选择菜单：

import { Text, TextSelection, TextSelectionMenu } from '@ohos.etstext';

class TextSelectionExample extends ets.Component {
  private textRef: Text | null = null;

  componentDidMount() {
    if (this.textRef) {
      this.textRef.setOnTextSelectionChangeListener((selection: TextSelection) => {
        if (selection.getSelectedText()) {
          const menu = new TextSelectionMenu();
          menu.addItem('复制', () => {
            // 处理复制操作
          });
          menu.addItem('剪切', () => {
            // 处理剪切操作
          });
          menu.addItem('粘贴', () => {
            // 处理粘贴操作
          });
          menu.show();
        }
      });
    }
  }

  render() {
    return (
      <Text ref={(ref) => (this.textRef = ref)}>
        这是一个示例文本，长按可以选择文本。
      </Text>
    );
  }
}

在上述代码中，Text组件用于显示文本，TextSelection用于处理文本选择事件，TextSelectionMenu用于创建并显示文本选择菜单。当用户长按文本并选择部分内容时，会触发setOnTextSelectionChangeListener事件，随后显示包含“复制”、“剪切”和“粘贴”选项的菜单。

更多关于HarmonyOS鸿蒙NEXT中文本选择菜单代码案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙NEXT中，文本选择菜单可以通过Text组件和onSelect事件来实现。以下是一个简单的代码案例：

import { Text, Button, Prompt } from '@ohos/hap';

@Entry
@Component
struct TextSelectionExample {
  @State selectedText: string = '';

  build() {
    Column() {
      Text('这是一个示例文本，长按选择文本')
        .onSelect((event) => {
          this.selectedText = event.selectedText;
          Prompt.showToast({ message: `已选择文本: ${this.selectedText}` });
        })

      Button('显示选择文本')
        .onClick(() => {
          Prompt.showToast({ message: `你选择的文本是: ${this.selectedText}` });
        })
    }
  }
}

在这个案例中，Text组件允许用户长按选择文本，并通过onSelect事件获取选择的文本内容。选择后，点击按钮会显示已选择的文本。

回到顶部