富文本控件RichEditor已集成跨设备互通能力。在Tablet或PC/2in1设备上,用户可通过其右键菜单调用Phone的相机、扫描及图库(访问图片)功能。
需同时满足以下条件,才能使用该功能:
设备限制
使用限制
添加RichEditor富文本组件,即可在富文本组件中右键中选择其他设备进行导入,通过onWillChange属性对回传的照片进行处理。
@Entry
@Component
struct 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%')
}
}
} 富文本组件使用流程如下:
1.在富文本区域右键。

2.选择想要使用的能力。

3.等待对端设备拍照回传。

4.图片回传后,在光标后面已嵌入一张图片。

如果需要关闭富文本右键菜单跨设备互通能力,可通过editMenuOptions属性自定义菜单内容去除跨设备互通菜单项,示例如下:
@Entry
@Component
struct 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%')
}
}
}