如何控制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)：支持设置组件内的内容选中，选中部分背板高亮。

#### 解决方案

*   针对场景一：给组件绑定手势事件，单击时将光标设置为透明色可实现光标消失效果，长按时再自定义手柄颜色。示例代码如下：
    
    @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=20260709T134026Z&HW-CC-Expire=86400&HW-CC-Sign=6764A3D5667A49FEB150CCC7BCE80833AD7028028F01D67ED54B6F1CE385091E "点击放大")
    

*   针对场景二：可使用closeSelectionMenu实现点击菜单选项时菜单、手柄消失效果，可使用setSelection实现关闭文本选中效果。示例代码如下：
    
    @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=20260709T134026Z&HW-CC-Expire=86400&HW-CC-Sign=E6CBB80EE1DA03930477F3BB190E6642FEBB1C8D3B3BDADDD321773800692929 "点击放大")