深度解析 HarmonyOS 中的 RichEditor：实现图文混排与交互式编辑的利器

本文链接：https://blog.youkuaiyun.com/A1551143530/article/details/144615390

创建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是一个功能强大的组件，支持从简单的文本展示到复杂的富文本编辑。通过灵活的属性设置和事件回调，可以满足多样化的图文编辑需求，提升用户体验。