深度解析 HarmonyOS 中的 RichEditor：实现图文混排与交互式编辑的利器
创建RichEditor组件
- 不使用属性字符串创建RichEditor组件
适用于展示简单的图文内容，或格式统一的内容，如代码编辑器。
controller: RichEditorController = new RichEditorController();
options: RichEditorOptions = { controller: this.controller };
RichEditor(this.options)
.onReady(() => {
this.controller.addTextSpan('示例文本', {
style: {
fontColor: Color.Black,
fontSize: 15
}
});
});
```
2. 使用属性字符串创建RichEditor组件
适用于需要美化和内容强调的场景，可通过丰富的样式自定义内容。
mutableStyledString: MutableStyledString = new MutableStyledString(“示例文本”, [
{
start: 0,
length: 4,
styledKey: StyledStringKey.FONT,
styledValue: this.fontStyle
}
]);
controller: RichEditorStyledStringController = new RichEditorStyledStringController();
options: RichEditorStyledStringOptions = { controller: this.controller };
RichEditor(this.options)
.onReady(() => {
this.controller.setStyledString(this.mutableStyledString);
});
```
设置属性
- 自定义选择菜单
通过 bindSelectionMenu 方法为文本添加自定义选择菜单，例如翻译或加粗选项。
RichEditor(this.options)
.bindSelectionMenu(RichEditorSpanType.TEXT, this.SystemMenu, ResponseType.LongPress, {})
.width(300)
.height(300);
@Builder
SystemMenu() {
Menu() {
MenuItem({ startIcon: this.theme.copyIcon, content: "复制" });
MenuItem({ startIcon: this.theme.pasteIcon, content: "粘贴" });
}
.backgroundColor(Color.White)
.width(200);
}
- 设置光标和手柄颜色
RichEditor(this.options)
.caretColor(Color.Orange)
.width(300)
.height(300);
- 添加提示文本
通过 placeholder 属性设置输入框的占位提示文本。
RichEditor(this.options)
.placeholder("请输入内容...", {
fontColor: Color.Gray,
font: {
size: 15,
family: "HarmonyOS Sans"
}
})
.width(300)
.height(300);
添加事件
- 组件初始化完成的回调
RichEditor(this.options)
.onReady(() => {
this.controller.addTextSpan('组件初始化完成。', {
style: {
fontColor: Color.Black,
fontSize: 15
}
});
});
- 文本选中回调
RichEditor(this.options)
.onSelect((value: RichEditorSelection) => {
console.log('选中内容: ', JSON.stringify(value));
});
- 图文内容变化的回调
变化前回调：onWillChange
变化后回调：onDidChange
RichEditor(this.options)
.onWillChange((value: RichEditorChangeValue) => {
console.log('变化前:', value);
return true;
})
.onDidChange((rangeBefore: TextRange, rangeAfter: TextRange) => {
console.log('变化后: ', rangeBefore, rangeAfter);
return true;
});
- 输入法回调
输入内容前回调：aboutToIMEInput
输入完成回调：onIMEInputComplete
RichEditor(this.options)
.aboutToIMEInput((value: RichEditorInsertValue) => {
console.log('输入法内容前:', value);
return true;
})
.onIMEInputComplete((value: RichEditorTextSpanResult) => {
console.log('输入法完成:', value);
return true;
});
- 粘贴内容的回调
RichEditor(this.options)
.onPaste(() => {
console.log('触发粘贴回调');
});
- 剪切内容的回调
RichEditor(this.options)
.onCut(() => {
console.log('触发剪切回调');
});
总结
RichEditor是一个功能强大的组件，支持从简单的文本展示到复杂的富文本编辑。通过灵活的属性设置和事件回调，可以满足多样化的图文编辑需求，提升用户体验。