# 如何控制RichEditor组件的光标手柄、菜单项及文本选中的显示与隐藏

## 问题现象

在开发中使用RichEditor组件时，有以下经典场景：

* 场景一：如何实现单击RichEditor组件时没有光标，长按时光标手柄正常显示？
* 场景二：RichEditor组件通过bindSelectionMenu设置自定义选择菜单时，点击其中的菜单项，如何使菜单、手柄及文本选中效果消失？

## 背景知识

* [RichEditor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-richeditor)：支持图文混排和文本交互式编辑的组件。
* [caretColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-richeditor#caretcolor12)：设置输入框光标、手柄颜色。
* [closeSelectionMenu](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-richeditor#closeselectionmenu10)：关闭自定义选择菜单或系统默认选择菜单。
* [setSelection](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-richeditor#setselection11)：支持设置组件内的内容选中，选中部分背板高亮。

## 解决方案

* 针对场景一：给组件绑定手势事件，单击时将光标设置为透明色可实现光标消失效果，长按时再自定义手柄颜色。示例代码如下：

  ```ts
  @Entry
  @Component
  struct PageOne {
    editorController = new RichEditorController();
    // 状态变量：光标颜色，用于动态更新光标样式
    @State caretColor: string = '#00ff0000';

    build() {
      Column() {
        RichEditor({ controller: this.editorController })
          .id('RichEditor')
          .width('100%')
          .border({ width: 2, radius: 5 })
          .selectedBackgroundColor(Color.Blue) // 选中背景色
          .caretColor(this.caretColor) // 动态绑定光标颜色
          .onReady(() => {
            this.editorController.addTextSpan('组件设置了光标手柄颜色。', {
              style: {
                fontColor: Color.Black,
                fontSize: 15
              },
              gesture:
              {
                // 点击手势：切换光标颜色为透明色
                onClick: () => {
                  this.caretColor = '#00ff0000';
                },
                // 长按手势：切换光标颜色为蓝色
                onLongPress: () => {
                  this.caretColor = '#ff0055ff';
                }
              }
            });
            focusControl.requestFocus('RichEditor');
          });
      }
      .margin({ top: 20 })
    }
  }
  ```

  效果预览：

  ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f8/v3/hOQ9-1JaQCCMIszuw1PfZw/zh-cn_image_0000002658913887.png?HW-CC-KV=V1&HW-CC-Date=20261014T102235Z&HW-CC-Expire=31536000000&HW-CC-Sign=5B4CFEFC7F013D2F8D312CD086979C5B3822E4481AEA9A0AECDBFA3257CD2288 "点击放大")

* 针对场景二：可使用closeSelectionMenu实现点击菜单选项时菜单、手柄消失效果，可使用setSelection实现关闭文本选中效果。示例代码如下：

  ```ts
  @Entry
  @Component
  struct PageTwo {
    private richEditorController: RichEditorController = new RichEditorController();
    private richEditorOptions: RichEditorOptions = { controller: this.richEditorController };

    build() {
      Column() {
        RichEditor(this.richEditorOptions)
          .id('input_focus')
            // 绑定菜单
          .bindSelectionMenu(RichEditorSpanType.DEFAULT, this.SystemMenu,
            ResponseType.LongPress)
          .borderRadius(2)
          .border({ width: 2, radius: 5 })
          .constraintSize({
            minHeight: 34,
            maxHeight: 75
          })
          .padding({ left: 4, right: 4 })
          .onReady(() => {
            this.richEditorController.addTextSpan('点击菜单选项时使菜单、手柄及文本选中消失。', {
              style: {
                fontColor: Color.Black,
                fontSize: 15
              }
            });
            focusControl.requestFocus('RichEditor');
          });
      }
      .height('100%')
      .width('100%')
      .margin({ top: 20 })
    }

    @Builder
    SystemMenu() {
      Row() {
        Text('复制')
          .fontColor(Color.White)
          .fontSize(15)
          .height(30)
          .padding({ left: 20, right: 20 })
          .textAlign(TextAlign.Center)
          .onClick(() => {
            // 关闭自定义选择菜单或系统默认选择菜单。
            this.richEditorController.closeSelectionMenu();
            // 取消文本选中
            this.richEditorController.setSelection(0, 0);
          })
      }
      .width('auto')
      .height(30)
      .backgroundColor(Color.Black)
      .borderRadius(6)
      .padding({ top: 8, bottom: 8 })
    }
  }
  ```

  效果预览：

  ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c0/v3/DW2a5RQJSgy2Cy3_4Rfxnw/zh-cn_image_0000002658793943.png?HW-CC-KV=V1&HW-CC-Date=20261014T102235Z&HW-CC-Expire=31536000000&HW-CC-Sign=65BE51608B38A7D60F82DA7CB5E8BD28B719E4E2A1BDA4111BA26262A7E2697B "点击放大")