鸿蒙跨设备协同开发02——RichEditor跨设备获取文件

如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！扫描下方名片，关注公众号，公众号更新更快，同时也有更多学习资料和技术讨论群。

1、前言

我们已经在鸿蒙UI系统组件16——富文本编辑器(RichEditor)已经讨论过HarmonyOS提供的富文本编辑器了，文章中主要介绍了基本的和文本操作相关的API，例如：内容选中、用户预设样式、背景板高亮等。

除此之外，RichEditor组件还集成了另一种重要功能 —— 跨设备互通能力，通过使用富文本控件RichEditor的右键菜单即可使用跨设备互通能力。跨设备互通提供跨设备的相机、扫描、图库访问能力，平板或2in1设备可以调用手机的相机、扫描、图库等功能。

需要注意的是，RichEditor默认集成了跨设备互通能力，因此，如果我们想使用跨设备能力时，不需要额外做配置和开发，只需要设置对应的回调监听即可。

2、实现跨设备获取文件

默认情况下RichEditor已经支持了跨设备互通的能力，我们使用时只需要设置onWillChange即可。在onWillChange中处理跨设备回传的文件。

onWillChange接口定义如下：

onWillChange(callback: Callback<RichEditorChangeValue, boolean>)

其中，RichEditorChangeValue  类相关的定义总结如下：

一个处理示例代码如下：

@Entry@Componentstruct Index {  controller: RichEditorController = new RichEditorController()  options: RichEditorOptions = { controller: this.controller }  build() {    Column() {      Column() {        RichEditor(this.options)          .onWillChange((value: RichEditorChangeValue) => {            if (value.replacedImageSpans[0].imageStyle.objectFit != 0) {              return true;            }            for(let item of value.replacedImageSpans) {              this.controller.addImageSpan(item.valuePixelMap, {                imageStyle: {                  size: ["500px", "500px"],                  layoutStyle: {                    borderRadius: '10px',                  }                }              })            }            return false;          })          .borderWidth(1)          .borderColor(Color.Green)          .width("100%")          .height("100%")      }      .borderWidth(1)      .borderColor(Color.Red)      .width("100%")      .height("70%")    }  }}

使用效果如下图：

👉🏻 如果你希望关闭跨设备互通能力

如果需要关闭富文本右键菜单跨设备互通能力，可通过editMenuOptions属性自定义菜单内容去除跨设备互通菜单项即可规避，示例如下：​​​​​​​

@Entry@Componentstruct Index {  controller: RichEditorController = new RichEditorController()  options: RichEditorOptions = { controller: this.controller }  build() {    Column() {      Column() {        RichEditor(this.options)          .editMenuOptions({            onCreateMenu: (menuItems: Array<TextMenuItem>) => {              if (menuItems.length === 0) {                return menuItems;              }              let newMenuItems: TextMenuItem[] = [];              // 去除跨设备互通菜单              menuItems.forEach((item, index) => {                if(!item.id.equals(TextMenuItemId.COLLABORATION_SERVICE)) {                  newMenuItems.push(item);                }              })              return newMenuItems;            },            onMenuItemClick: (menuItem: TextMenuItem, textRange: TextRange) => {              return false;            }          })          .borderWidth(1)          .borderColor(Color.Green)          .width("100%")          .height("100%")      }      .borderWidth(1)      .borderColor(Color.Red)      .width("100%")      .height("70%")    }  }}