鸿蒙5.0进阶开发：UI开发-富文本（RichEditor）

 往期鸿蒙全套实战文章必看：（文中附带鸿蒙全栈学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线
  
• 鸿蒙HarmonyOS NEXT开发技能最全学习路线指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
  

---

富文本（RichEditor）

RichEditor是支持图文混排和文本交互式编辑的组件，通常用于相应用户对图文肴杂内容的输入操纵，例如可以输入图文的评论区。
创建RichEditor组件

开发者可以创建不使用属性字符串和使用属性字符串构建的RichEditor组件。
创建不使用属性字符串构建的RichEditor组件

使用RichEditor(value: RichEditorOptions)接口创建非属性字符串构建的RichEditor组件，一样平常用于展示简朴的图文信息，例如展示联系人的信息，也可以用于内容要求格式同一的场景，例如一些代码编辑器。

1. controller: RichEditorController = new RichEditorController();
2. options: RichEditorOptions = { controller: this.controller };
4. RichEditor(this.options)
5.     .onReady(() => {
6.         this.controller.addTextSpan('创建不使用属性字符串构建的RichEditor组件。', {
7.             style: {
8.                 fontColor: Color.Black,
9.                 fontSize: 15
10.             }
11.         })
12.     })

复制代码

创建使用属性字符串构建的RichEditor组件

使用RichEditor(options: RichEditorStyledStringOptions)接口创建属性字符串构建的RichEditor组件，是基于属性字符串（StyledString/MutableStyledString）构建的，通常应用于必要界面美化和内容强调的场景，通过设置重要功能特性文本的样式来突出显示，从而吸引用户注意。
相较于不使用属性字符串构建的RichEditor组件，此种方式提供了多种文本修改方式，包罗调解字号、添加字体颜色、使文本具备可点击性，以及支持自界说文本绘制等。此外，此种方式还提供了多种类型样式对象，覆盖了各种常见的文本样式格式，如文本装饰线样式、文本行高样式、文本阴影样式等。

1. mutableStyledString: MutableStyledString = new MutableStyledString("创建使用属性字符串构建的RichEditor组件。",
2.     [{
3.         start: 0,
4.         length: 5,
5.         styledKey: StyledStringKey.FONT,
6.         styledValue: this.fontStyle
7.     }]);
9. controller: RichEditorStyledStringController = new RichEditorStyledStringController();
10. options: RichEditorStyledStringOptions = {controller: this.controller};
12. RichEditor(this.options)
13.     .onReady(() => {
14.         this.controller.setStyledString(this.mutableStyledString);
15.     })

复制代码

设置属性

设置自界说选择菜单

通过bindSelectionMenu设置自界说选择菜单。
组件本来具有默认的文本选择菜单，包含复制、剪切和全选的功能。用户可使用该属性设定自界说菜单，例如翻译英文、加粗字体等丰富的菜单功能。
当自界说菜单超长时，建议内部嵌套Scroll组件使用，制止键盘被遮挡。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('组件设置了自定义菜单，长按可触发。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 18
7.             }
8.         })
9.     })
10.     .bindSelectionMenu(RichEditorSpanType.TEXT, this.SystemMenu, ResponseType.LongPress, {
11.         onDisappear: () => {
12.             this.sliderShow = false
13.         }
14.     })
15.     .width(300)
16.     .height(300)
18. @Builder
19. SystemMenu() {
20.     Column() {
21.             Menu() {
22.                     if (this.controller) {
23.                         MenuItemGroup() {
24.                             MenuItem({
25.                                 startIcon: this.theme.cutIcon,
26.                                 content: "剪切",
27.                                 labelInfo: "Ctrl+X",
28.                             })
29.                             MenuItem({
30.                                 startIcon: this.theme.copyIcon,
31.                                 content: "复制",
32.                                 labelInfo: "Ctrl+C"
33.                             })
34.                             MenuItem({
35.                                 startIcon: this.theme.pasteIcon,
36.                                 content: "粘贴",
37.                                 labelInfo: "Ctrl+V"
38.                             })
39.                         }
40.                     }
41.                 }
42.                 .radius(this.theme.containerBorderRadius)
43.                 .clip(true)
44.                 .backgroundColor(Color.White)
45.                 .width(this.theme.defaultMenuWidth)
46.         }
47.         .width(this.theme.defaultMenuWidth)
48. }

复制代码

设置输入框光标、手柄颜色

通过caretColor设置输入框光标、手柄颜色。
设置不同颜色的光标和手柄可以进步视觉辨识度，特别是在包含多个输入区域或不同类型内容输入区域的复杂界面中，独特的光标颜色能帮助用户敏捷定位当前操纵的输入区域。这一特性同样实用于必要标示特别功能或状态的输入框，比如密码输入框。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('组件设置了光标手柄颜色。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.             }
8.         })
9.     })
10.     .caretColor(Color.Orange)
11.     .width(300)
12.     .height(300)

复制代码

设置无输入时的提示文本

通过placeholder设置无输入时的提示文本。
例如，在用户登录界面接纳提示文本，有助于用户区分用户名与密码的输入框。又如，在文本编辑框中，运用提示文本明确输入要求，如“限输入100字以内”，以此引导用户正确操纵。

1. RichEditor(this.options)
2.     .placeholder("此处为提示文本...", {
3.         fontColor: Color.Gray,
4.         font: {
5.             size: 15,
6.             weight: FontWeight.Normal,
7.             family: "HarmonyOS Sans",
8.             style: FontStyle.Normal
9.         }
10.     })
11.     .width(300)
12.     .height(300)

复制代码

添加事件

添加组件初始化完成后可触发的回调

通过onReady来添加组件初始化完成后可触发的回调。
该回调可在组件初始化后，有效地展示包罗图文和表情在内的丰富内容。例如，利用富文本组件展示消息时，此回调可触发从服务器获取图文数据的操纵。随后，将获取到的数据添补至组件中，确保组件在初始化完成后可以或许敏捷在页面上呈现完备的消息内容。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('onReady回调内容是组件内预置文本。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.             }
8.         })
9.     })

复制代码

添加组件内容被选中时可触发的回调

通过onSelect来添加组件内容被选中时可触发的回调。
该回调可在文本选择后增强操纵体验。例如，在选中文本后，可在回调中触发弹出菜单，以便用户进行文本样式的修改。大概对选中的文本进行内容分析和处理，为用户提供输入建议，从而提拔文本编辑的效率和便捷性。
触发回调有两种方式：一是通过鼠标左键选择，即按下左键进行选择，然后在松开左键时触发回调。二是通过手指触摸选择，即用手指进行选择，然后在松开手指时触发回调。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('选中此处文本，触发onselect回调。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.             }
8.         })
9.     })
10.     .onSelect((value: RichEditorSelection) => {
11.         this.controller1.addTextSpan(JSON.stringify(value), {
12.             style: {
13.                 fontColor: Color.Gray,
14.                 fontSize: 10
15.             }
16.         })
17.     })
18.     .width(300)
19.     .height(50)
20. Text('查看回调内容：').fontSize(10).fontColor(Color.Gray).width(300)
21. RichEditor(this.options1)
22.     .width(300)
23.     .height(70)

复制代码

添加图文变化前和图文变化后可触发的回调

通过onWillChange添加图文变化前可触发的回调。此回调实用于用户实时数据校验与提示，例如在用户输入文本时，可在回调内实现对输入内容的检测，若检测到敏感词汇，应立即弹出提示框。此外，它还实用于实时字数统计与限制，对于有字数限制的输入场景，可在回调中实时统计用户输入的字数，并在靠近字数上限时提供相应的提示。
通过onDidChange添加图文变化后可触发的回调。此回调实用于内容保存与同步，例如在用户完成内容编辑后，可使用该回调自动将最新内容保存至本地或同步至服务器。此外，它还实用于内容状态更新与渲染，例如在待办事项列表应用中，用户编辑富文本格式的待办事项描述后，可使用该回调更新待办事项在列表中的显示样式。
使用RichEditorStyledStringOptions构建的RichEditor组件不支持上述两种回调。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('组件内图文变化前，触发回调。\n图文变化后，触发回调。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.             }
8.         })
9.     })
10.     .onWillChange((value: RichEditorChangeValue) => {
11.         this.controller1.addTextSpan('组件内图文变化前，触发回调：\n' + JSON.stringify(value), {
12.             style: {
13.                 fontColor: Color.Gray,
14.                 fontSize: 10
15.             }
16.         })
17.         return true;
18.     })
19.     .onDidChange((rangeBefore: TextRange, rangeAfter: TextRange) => {
20.         this.controller1.addTextSpan('\n图文变化后，触发回调：\nrangeBefore:' + JSON.stringify(rangeBefore) + '\nrangeAfter：' + JSON.stringify(rangeBefore), {
21.             style: {
22.                 fontColor: Color.Gray,
23.                 fontSize: 10
24.             }
25.         })
26.         return true;
27.     })
28.     .width(300)
29.     .height(50)
30. Text('查看回调内容：').fontSize(10).fontColor(Color.Gray).width(300)
31. RichEditor(this.options1)
32.     .width(300)
33.     .height(70)

复制代码

添加输入法输入内容前和完成输入后可触发的回调

在添加输入法输入内容前，可以通过aboutToIMEInput触发回调。在输入法完成输入后，可以通过onIMEInputComplete触发回调。
这两种回调机制实用于智能输入辅助。例如：在用户开始输入文本前，利用回调进行词汇联想的提供，在用户完成输入后，利用回调执行自动化纠错或格式转换。
使用RichEditorStyledStringOptions构建的组件并不支持上述两种回调功能。

1. RichEditor(this.options)
2.           .onReady(() => {
3.             this.controller.addTextSpan('输入法输入内容前，触发回调。\n输入法完成输入后，触发回调。' , {
4.               style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.               }
8.             })
9.           })
10.           .aboutToIMEInput((value: RichEditorInsertValue) => {
11.             this.controller1.addTextSpan('输入法输入内容前，触发回调：\n'+JSON.stringify(value), {
12.               style: {
13.                 fontColor: Color.Gray,
14.                 fontSize: 10
15.               }
16.             })
17.             return true;
18.           })
19.           .onIMEInputComplete((value: RichEditorTextSpanResult) => {
20.             this.controller1.addTextSpan('输入法完成输入后，触发回调：\n'+ JSON.stringify(value), {
21.               style: {
22.                 fontColor: Color.Gray,
23.                 fontSize: 10
24.               }
25.             })
26.             return true;
27.           })
28.           .width(300)
29.           .height(50)
30. Text('查看回调内容：').fontSize(10).fontColor(Color.Gray).width(300)
31. RichEditor(this.options1)
32.     .width(300)
33.     .height(70)

复制代码

添加完成粘贴前可触发的回调

通过onPaste添加完成粘贴前可触发的回调。
此回调实用于内容格式的处理。例如，当用户复制包含HTML标签的文本时，可在回调中编写代码，将其转换为富文本组件所支持的格式，同时剔除不必要的标签或仅保留纯文本内容。
由于组件默认的粘贴活动仅限于纯文本，无法处理图片粘贴，开发者可利用此方法实现图文并茂的粘贴功能，从而替代组件原有的粘贴活动。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('对此处文本进行复制粘贴操作可触发对应回调。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.             }
8.         })
9.     })
10.     .onPaste(() => {
11.         this.controller1.addTextSpan('触发onPaste回调\n', {
12.             style: {
13.                 fontColor: Color.Gray,
14.                 fontSize: 10
15.             }
16.         })
17.     })
18.     .width(300)
19.     .height(70)

复制代码

添加完成剪切前可触发的回调

通过onCut添加完成剪切前可触发的回调。
此回调功能实用于数据处理与存储，例如，当用户从富文本组件中剪切内容时，可在回调中执行将被剪切的内容进行暂时存储的操纵，确保后续的粘贴操纵可以或许准确无误地还原内容。
由于组件默认的剪切活动仅限于纯文本，无法处理图片剪切，开发者可利用此方法实现图文并茂的剪切功能，从而替代组件原有的剪切活动。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('对此处文本进行复制粘贴操作可触发对应回调。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.             }
8.         })
9.     })
10.     .onCut(() => {
11.         this.controller1.addTextSpan('触发onCut回调\n', {
12.             style: {
13.                 fontColor: Color.Gray,
14.                 fontSize: 10
15.             }
16.         })
17.     })
18.     .width(300)
19.     .height(70)

复制代码

添加完成复制前可触发的回调

通过onCopy添加完成复制前可触发的回调。
此回调实用于内容的备份与共享，例如在用户复制内容时，可在回调中执行以下操纵：将复制的内容及其格式信息保存至本地备份文件夹，或自动天生一段包含复制内容及产品购买链接的分享文案，以方便用户进行粘贴和分享。
由于组件默认的复制活动仅限于纯文本，无法处理图片复制，开发者可利用此方法实现图文并茂的复制功能，从而替代组件原有的复制活动。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('对此处文本进行复制粘贴操作可触发对应回调。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.             }
8.         })
9.     })
10.     .onCopy(() => {
11.         this.controller1.addTextSpan('触发onCopy回调\n', {
12.             style: {
13.                 fontColor: Color.Gray,
14.                 fontSize: 10
15.             }
16.         })
17.     })
18.     .width(300)
19.     .height(70)

复制代码

设置用户预设的样式

通过setTypingStyle设置用户预设的样式。
此接口可用于个性化的写作体验，例如可以使用此接口让输入的不同层级标题自动应用相应格式（如一级、二级标题）。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('点击按钮,改变组件预设样式。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.             }
8.         })
9.     })
10.     .width(300)
11.     .height(60)
12. Button('setTypingStyle', {
13.         buttonStyle: ButtonStyleMode.NORMAL
14.     })
15.     .height(30)
16.     .fontSize(13)
17.     .onClick(() => {
18.         this.controller.setTypingStyle({
19.             fontWeight: 'medium',
20.             fontColor: Color.Pink,
21.             fontSize: 15,
22.             fontStyle: FontStyle.Italic,
23.             decoration: {
24.                 type: TextDecorationType.Underline,
25.                 color: Color.Gray
26.             }
27.         })
28.     })

复制代码

设置组件内的内容选中时部分背板高亮

通过setSelection设置组件内的内容选中时部分背板高亮。
此接口可用与文本聚焦效果，例如当用户点击某个文本段落的标题或摘要时，可通过该接口自动选中并高亮出对应正文内容。
当组件内未获焦出现光标时，调用该接口不产生选中效果。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('点击按钮在此处选中0-2位置的文本。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.             }
8.         })
9.     })
10.     .width(300)
11.     .height(60)
12. Button('setSelection(0,2)', {
13.         buttonStyle: ButtonStyleMode.NORMAL
14.     })
15.     .height(30)
16.     .fontSize(13)
17.     .onClick(() => {
18.         this.controller.setSelection(0, 2)
19.     })

复制代码

添加文本内容

除了直接在组件内输入内容，也可以通过addTextSpan添加文本内容。
此接口可以实现文本样式多样化，例如必要创建肴杂样式文本。
假如组件是获焦状态，有光标在闪耀，那么通过addTextSpan添加文本内容后，光标位置会更新，在新添加文本内容的右侧闪耀。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('点击按钮在此处添加text。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.             }
8.         })
9.     })
10.     .width(300)
11.     .height(100)
12. Button('addTextSpan', {
13.         buttonStyle: ButtonStyleMode.NORMAL
14.     })
15.     .height(30)
16.     .fontSize(13)
17.     .onClick(() => {
18.         this.controller.addTextSpan('新添加一段文字。')
19.     })

复制代码

添加图片内容

通过addImageSpan添加图片内容。
此接口可用于内容丰富与可视化展示，例如在消息中加入图片，在文档中加入数据可视化图形等。
假如组件是获焦状态，有光标在闪耀，那么通过addImageSpan添加图片内容后，光标位置会更新，在新添加图片内容的右侧闪耀。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('点击按钮在此处添加image。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.             }
8.         })
9.     })
10.     .width(300)
11.     .height(100)
12. Button('addImageSpan', {
13.         buttonStyle: ButtonStyleMode.NORMAL
14.     })
15.     .height(30)
16.     .fontSize(13)
17.     .onClick(() => {
18.         this.controller.addImageSpan($r("app.media.startIcon"), {
19.             imageStyle: {
20.                 size: ["57px", "57px"]
21.             }
22.         })
23.     })

复制代码

添加@Builder装饰器修饰的内容

通过addBuilderSpan添加@Builder装饰器修饰的内容。
此接口可用于自界说复杂组件的嵌入，例如在组件内加入自界说图表。
该接口内可通过RichEditorBuilderSpanOptions设置在组件中添加builder的位置，省略大概为异常值时，则添加builder到所有内容的末了位置。

1. @Builder
2. TextBuilder() {
3.     Row() {
4.             Image($r('app.media.startIcon')).width(50).height(50).margin(16)
5.             Column() {
6.                 Text("文本文档.txt").fontWeight(FontWeight.Bold).fontSize(16)
7.                 Text("123.45KB").fontColor('#8a8a8a').fontSize(12)
8.             }.alignItems(HorizontalAlign.Start)
9.         }.backgroundColor('#f4f4f4')
10.         .borderRadius("20")
11.         .width(220)
12. }
14. Button('addBuilderSpan', {
15.         buttonStyle: ButtonStyleMode.NORMAL
16.     })
17.     .height(30)
18.     .fontSize(13)
19.     .onClick(() => {
20.         this.my_builder = () => {
21.             this.TextBuilder()
22.         }
23.         this.controller.addBuilderSpan(this.my_builder)
24.     })

复制代码

添加SymbolSpan内容

可通过addSymbolSpan添加Symbol内容。此接口可用于特别符号添加与展示，例如在编辑学术论文时，此接口可用于添加各种数学符号。
添加Symbol内容时，假如组件内有光标闪耀，则插入Symbol后光标位置更新为新插入Symbol的右侧。
Symbol内容暂不支持手势、复制、拖拽处理。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('点击按钮在此处添加symbol。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.             }
8.         })
9.     })
10.     .width(300)
11.     .height(100)
12. Button('addSymbolSpan', {
13.         buttonStyle: ButtonStyleMode.NORMAL
14.     })
15.     .height(30)
16.     .fontSize(13)
17.     .onClick(() => {
18.         this.controller.addSymbolSpan($r("sys.symbol.basketball_fill"), {
19.             style: {
20.                 fontSize: 30
21.             }
22.         })
23.     })

复制代码

获取组件内图文信息

可通过getSpans获取组件内所有图文内容的信息，包罗图文的内容、id、样式、位置等信息。获取内容位置信息后，可对指定范围内容进行样式的更新。
此接口实用于已有的内容样式获取与查抄，例如在模板应用场景下，可利用此接口获取文本样式。此外，它还实用于内容解析与处理，例如在文本分析应用中，此接口可以或许获取特定范围内的文本信息。

1. RichEditor(this.options)
2.     .onReady(() => {
3.         this.controller.addTextSpan('点击按钮获取此处span信息。', {
4.             style: {
5.                 fontColor: Color.Black,
6.                 fontSize: 15
7.             }
8.         })
9.     })
10.     .width(300)
11.     .height(50)
12. Text('查看getSpans返回值：').fontSize(10).fontColor(Color.Gray).width(300)
13. RichEditor(this.options1)
14.     .width(300)
15.     .height(50)
16. Button('getSpans', {
17.         buttonStyle: ButtonStyleMode.NORMAL
18.     })
19.     .height(30)
20.     .fontSize(13)
21.     .onClick(() => {
22.         this.controller1.addTextSpan(JSON.stringify(this.controller.getSpans()), {
23.             style: {
24.                 fontColor: Color.Gray,
25.                 fontSize: 10
26.             }
27.         })
29.     })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。