工具问题
DevEco Studio
DevEco Testing
开发与测试问题
多设备场景
应用质量
应用框架开发
系统开发
媒体开发
图形开发
应用服务开发
AI功能开发
元服务开发
问题现象
RichEditor支持输入带有样式的图文，在复制有样式的图文后，粘贴时如何去除复制的图文样式？
背景知识
- RichEditor是支持图文混排和文本交互式编辑的组件。
- onPaste方法在完成粘贴前，触发回调。开发者可以通过该方法，覆盖系统默认行为，实现图文的粘贴。preventDefault用于阻止系统默认粘贴事件。addTextSpan用于添加文本内容。
- @ohos.pasteboard (剪贴板)模块主要提供管理系统剪贴板的能力，为系统复制、粘贴功能提供支持。pasteboard.getSystemPasteboard方法可以获取系统剪贴板对象。getPrimaryText获取第一条纯文本内容。
解决方案
实现的思路如下：
- 监听页面粘贴事件：在RichEditor组件中设置onPaste事件处理函数，当用户粘贴内容时触发。
- 阻止默认粘贴行为：在事件处理函数中调用event.preventDefault()，阻止RichEditor默认的粘贴行为，避免保留原有样式。
- 获取剪贴板数据：使用pasteboard.getSystemPasteboard()获取系统剪贴板实例，然后调用getData方法获取剪贴板中的数据。
- 提取纯文本内容：从剪贴板数据中提取纯文本内容，使用pasteData.getPrimaryText()方法获取纯文本。
- 插入指定样式的文本：使用RichEditorController的addTextSpan方法，将提取的纯文本以指定的样式（如字体大小和颜色）插入到编辑器中，从而去除原有样式。
参考代码如下：
import pasteboard from '@ohos.pasteboard';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct richEditorPage {
controller: RichEditorController = new RichEditorController();
options: RichEditorOptions = { controller: this.controller };
build() {
RelativeContainer() {
RichEditor(this.options)
.width(300)
.height(400)
.backgroundColor('#fafafa')
// 粘贴时，触发回调。
.onPaste((event?: PasteEvent) => {
if (event !== undefined && event.preventDefault) {
// 阻止默认粘贴行为
event.preventDefault();
// 获取系统剪贴板实例
let systemPasteboard: pasteboard.SystemPasteboard = pasteboard.getSystemPasteboard();
// 获取剪贴板数据
systemPasteboard.getData((err: BusinessError, pasteData: pasteboard.PasteData) => {
if (err) {
console.error(`Failed to get PasteData. Code:${err.code} ,message:${err.message}`);
return;
}
// 提取纯文本内容
let text: string = pasteData.getPrimaryText();
this.controller.addTextSpan(text, { style: { fontSize: 16, fontColor: Color.Gray } });
});
}
})
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
});
}
.height('100%')
.width('100%');
}
} 
华为开发者联盟 版权所有 ©2026