HarmonyOS应用开辟：RichEditor（基础组件）

 支持图文混排和文本交互式编辑的组件。
   说明：
  该组件从API Version 10开始支持。
  子组件

可以包含Span和ImageSpan子组件。
接口

RichEditor(value: RichEditorOptions)
参数：
参数名参数类型必填参数描述valueRichEditorOptions是富文本组件初始化选项。 属性

支持通用属性。
   说明：
  其中clip属性默认值为true。 align属性只支持上方丶中间和下方位置的对齐方式。
  名称参数类型描述customKeyboardCustomBuilder设置自定义键盘。
说明：
当设置自定义键盘时，输入框激活后不会打开体系输入法，而是加载指定的自定义组件。
自定义键盘的高度可以通过自定义组件根节点的height属性设置，宽度不可设置，使用体系默认值。
自定义键盘采用覆盖原始界面的方式出现，不会对应用原始界面产生压缩或者上提。
自定义键盘无法获取焦点，但是会拦截手势事件。
默认在输入控件失去焦点时，关闭自定义键盘。copyOptionsCopyOptions组件支持设置文本内容是否可复制粘贴。
默认值：CopyOptions.LocalDevice
说明：
设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice，长按组件内容，会弹出文本默认选择菜单，可选中内容并进行复制、全选操作。
设置copyOptions为CopyOptions.None，复制、剪切功能不生效。 事件

除支持通用事件外，还支持以下事件：
名称功能描述onReady(callback: () => void)富文本组件初始化完成后，触发回调。onSelect(callback: (value: RichEditorSelection) => void)鼠标左键按下选择，松开左键后触发回调。
- value：选中的所有span信息。aboutToIMEInput(callback: (value: RichEditorInsertValue) => boolean)输入法输入内容前，触发回调。
- value：输入法将要输入内容信息。onIMEInputComplete(callback: (value: RichEditorTextSpanResult) => void)输入法完成输入后，触发回调。
- value：输入法完成输入后的文本Span信息。aboutToDelete(callback: (value: RichEditorDeleteValue) => boolean)输入法删除内容前，触发回调。
- value：准备删除的内容所在的文本Span信息。onDeleteComplete(callback: () => void)输入法完成删除后，触发回调。 RichEditorInsertValue

插入文本信息。
名称类型必填说明insertOffsetnumber是插入的文本偏移位置。insertValuestring是插入的文本内容。 RichEditorDeleteValue

名称类型必填说明offsetnumber是删除内容的偏移位置。directionRichEditorDeleteDirection是删除操作的方向。lengthnumber是删除内容长度。richEditorDeleteSpansArray<RichEditorTextSpanResult | RichEditorImageSpanResult>是删除的文本或者图片Span的具体信息。 RichEditorDeleteDirection

删除操作的方向。
名称描述BACKWARD向后删除。FORWARD向前删除。 RichEditorTextSpanResult

文本Span信息。
名称类型必填说明spanPositionRichEditorSpanPosition是Span位置。valuestring是文本Span内容。textStyleRichEditorTextStyleResult是文本Span样式信息。offsetInSpan[number, number]是文本Span内容里有用内容的起始和竣事位置。 RichEditorSpanPosition

Span位置信息。
名称类型必填说明spanIndexnumber是Span索引值。spanRange[number, number]是Span内容在RichEditor内的起始和竣事位置。 RichEditorTextStyleResult

后端返回的文本样式信息。
名称类型必填描述fontColorResourceColor是文本颜色。fontSizenumber是字体大小。fontStyleFontStyle是字体样式。fontWeightnumber是字体粗细。fontFamilystring是字体列表。decoration{
type: TextDecorationType,
color?: ResourceColor
}是文本装饰线样式及其颜色。 RichEditorImageSpanResult

后端返回的图片样式信息。
名称类型必填描述size[number, number]是图片的宽度和高度。verticalAlignImageSpanAlignment是图片垂直对齐方式。objectFitImageFit是图片缩放类型。 RichEditorOptions

RichEditor初始化参数。
名称类型必填说明controllerRichEditorController是富文本控制器。 RichEditorController

RichEditor组件的控制器。
导入对象

1. controller: RichEditorController = new RichEditorController()Copy to clipboardErrorCopied

复制代码

getCaretOffset

getCaretOffset(): number
返回当前光标所在位置。
返回值：
类型说明number当前光标所在位置。 setCaretOffset

setCaretOffset(offset: number): boolean
设置光标位置。
参数：
参数名参数类型必填参数描述offsetnumber是光标偏移位置。超出文本范围时，设置失败。 返回值：
类型说明boolean光标是否设置成功。 addTextSpan

addTextSpan(value: string, options?: RichEditorTextSpanOptions): number
添加文本内容。
参数：
参数名参数类型必填参数描述valuestring是文本内容。optionsRichEditorTextSpanOptions否文本选项。 返回值：
类型说明number添加完成的Text Span所在的位置。 addImageSpan

addImageSpan(value: PixelMap | ResourceStr, options?: RichEditorImageSpanOptions): number
添加图片内容。
参数：
参数名参数类型必填参数描述valuePixelMap|ResourceStr是图片内容。optionsRichEditorImageSpanOptions否图片选项。 返回值：
类型说明number添加完成的imageSpan所在的位置。 updateSpanStyle

updateSpanStyle(value: RichEditorUpdateTextSpanStyleOptions | RichEditorUpdateImageSpanStyleOptions): void
更新文本或者图片样式。
若只更新了一个Span的部门内容，则会根据更新部门、未更新部门将该Span拆分为多个Span。
参数：
名称类型必填描述valueRichEditorUpdateTextSpanStyleOptions | RichEditorUpdateImageSpanStyleOptions是文本或者图片的样式选项信息。 getSpans

getSpans(value?: RichEditorRange): Array<RichEditorTextSpanResult| RichEditorImageSpanResult>
获取span信息。
参数：
参数名参数类型必填参数描述valueRichEditorRange否需要获取span范围。 返回值：
类型说明Array<RichEditorTextSpanResult | RichEditorImageSpanResult>文本和图片Span信息。 deleteSpans

deleteSpans(value?: RichEditorRange): void
删除指定范围内的文本和图片。
参数：
参数名参数类型必填参数描述valueRichEditorRange否删除范围。省略时，删除所有文本和图片。 RichEditorSelection

选中内容信息。
名称类型必填说明selection[number, number]是选中范围。spansArray<RichEditorTextSpanResult| RichEditorImageSpanResult>是span信息。 RichEditorUpdateTextSpanStyleOptions

文本样式选项。
名称类型必填描述startnumber否需要更新样式的文本起始位置，省略或者设置负值时表现从0开始。endnumber否需要更新样式的文本竣事位置，省略或者超出文本范围时表现到末端。textStyleRichEditorTextStyle是文本样式。 RichEditorUpdateImageSpanStyleOptions

图片样式选项。
名称类型必填描述startnumber否需要更新样式的图片起始位置，省略或者设置负值时表现从0开始。endnumber否需要更新样式的图片竣事位置，省略或者超出文本范围时表现到末端。imageStyleRichEditorImageSpanStyle是图片样式。 RichEditorTextSpanOptions

添加文本的偏移位置和文本样式信息。
名称类型必填描述offsetnumber否添加文本的位置。省略时，添加到所有文本字符串的最后。styleRichEditorTextStyle否文本样式信息。省略时，使用体系默认文本信息。 RichEditorTextStyle

文本样式信息。
名称类型必填描述fontColorResourceColor否文本颜色。
默认值：Color.Black。fontSizeLength否设置字体大小，Length为number类型时，使用fp单元。字体默认大小16。不支持设置百分比字符串。
从API version 9开始，该接口支持在ArkTS卡片中使用。fontStyleFontStyle否字体样式。
默认值：FontStyle.Normal。fontWeightFontWeight | number | string否字体粗细。
number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。
string类型仅支持number类型取值的字符串形式，比方“400”，以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。
默认值：FontWeight.Normal。fontFamilyResourceStr | number | string否设置字体列表。默认字体'HarmonyOS Sans'，当前支持'HarmonyOS Sans'字体和注册自定义字体。
默认字体:'HarmonyOS Sans'。decoration{
type: TextDecorationType,
color?: ResourceColor
}否设置文本装饰线样式及其颜色。
默认值：{
type: TextDecorationType.None,
color：Color.Black
}。 RichEditorImageSpanOptions

添加图片的偏移位置和图片样式信息。
名称类型必填描述offsetnumber否添加图片的位置。省略时，添加到所有文本字符串的最后。imageStyleRichEditorImageSpanStyle否图片样式信息。省略时，使用体系默认图片信息。 RichEditorImageSpanStyle

图片样式。
名称类型必填描述size[Dimension, Dimension]否图片宽度和高度。verticalAlignImageSpanAlignment否图片垂直对齐方式。
默认值:ImageSpanAlignment.BASELINEobjectFitImageFit否图片缩放类型。
默认值:ImageFit.Cover。 RichEditorRange

范围信息。
名称类型必填描述startnumber否起始位置，省略或者设置负值时表现从0开始。endnumber否竣事位置，省略或者超出文本范围时表现到末端。 示例

示例1

1. // xxx.ets
2. @Entry
3. @Component
4. struct Index {
5.   controller: RichEditorController = new RichEditorController();
6.   options: RichEditorOptions = { controller: this.controller };
7.   private start: number = -1;
8.   private end: number = -1;
9.   @State message: string = "[-1, -1]"
10.   @State content: string = ""
12.   build() {
13.     Column() {
14.       Column() {
15.         Text("selection range:").width("100%")
16.         Text() {
17.           Span(this.message)
18.         }.width("100%")
19.         Text("selection content:").width("100%")
20.         Text() {
21.           Span(this.content)
22.         }.width("100%")
23.       }
24.       .borderWidth(1)
25.       .borderColor(Color.Red)
26.       .width("100%")
27.       .height("20%")
29.       Row() {
30.         Button("更新样式:加粗").onClick(() => {
31.           this.controller.updateSpanStyle({
32.             start: this.start,
33.             end: this.end,
34.             textStyle:
35.             {
36.               fontWeight: FontWeight.Bolder
37.             }
38.           })
39.         })
40.         Button("获取选择内容").onClick(() => {
41.           this.content = "";
42.           this.controller.getSpans({
43.             start: this.start,
44.             end: this.end
45.           }).forEach(item => {
46.             if(typeof(item as RichEditorImageSpanResult)['imageStyle'] != 'undefined'){
47.               this.content += (item as RichEditorImageSpanResult).valueResourceStr;
48.               this.content += "\n"
49.             } else {
50.               this.content += (item as RichEditorTextSpanResult).value;
51.               this.content += "\n"
52.             }
53.           })
54.         })
55.         Button("删除选择内容").onClick(() => {
56.           this.controller.deleteSpans({
57.             start: this.start,
58.             end: this.end
59.           })
60.           this.start = -1;
61.           this.end = -1;
62.           this.message = "[" + this.start + ", " + this.end + "]"
63.         })
64.       }
65.       .borderWidth(1)
66.       .borderColor(Color.Red)
67.       .width("100%")
68.       .height("10%")
70.       Column() {
71.         RichEditor(this.options)
72.           .onReady(() => {
73.             this.controller.addTextSpan("0123456789",
74.               {
75.                 style:
76.                 {
77.                   fontColor: Color.Orange,
78.                   fontSize: 30
79.                 }
80.               })
81.             this.controller.addImageSpan($r("app.media.icon"),
82.               {
83.                 imageStyle:
84.                 {
85.                   size: ["57px", "57px"]
86.                 }
87.               })
88.             this.controller.addTextSpan("0123456789",
89.               {
90.                 style:
91.                 {
92.                   fontColor: Color.Black,
93.                   fontSize: 30
94.                 }
95.               })
96.           })
97.           .onSelect((value: RichEditorSelection) => {
98.             this.start = value.selection[0];
99.             this.end = value.selection[1];
100.             this.message = "[" + this.start + ", " + this.end + "]"
101.           })
102.           .aboutToIMEInput((value: RichEditorInsertValue) => {
103.             console.log("---------------------- aboutToIMEInput ----------------------")
104.             console.log("insertOffset:" + value.insertOffset)
105.             console.log("insertValue:" + value.insertValue)
106.             return true;
107.           })
108.           .onIMEInputComplete((value: RichEditorTextSpanResult) => {
109.             console.log("---------------------- onIMEInputComplete ---------------------")
110.             console.log("spanIndex:" + value.spanPosition.spanIndex)
111.             console.log("spanRange:[" + value.spanPosition.spanRange[0] + "," + value.spanPosition.spanRange[1] + "]")
112.             console.log("offsetInSpan:[" + value.offsetInSpan[0] + "," + value.offsetInSpan[1] + "]")
113.             console.log("value:" + value.value)
114.           })
115.           .aboutToDelete((value: RichEditorDeleteValue) => {
116.             console.log("---------------------- aboutToDelete --------------------------")
117.             console.log("offset:" + value.offset)
118.             console.log("direction:" + value.direction)
119.             console.log("length:" + value.length)
120.             value.richEditorDeleteSpans.forEach(item => {
121.               console.log("---------------------- item --------------------------")
122.               console.log("spanIndex:" + item.spanPosition.spanIndex)
123.               console.log("spanRange:[" + item.spanPosition.spanRange[0] + "," + item.spanPosition.spanRange[1] + "]")
124.               console.log("offsetInSpan:[" + item.offsetInSpan[0] + "," + item.offsetInSpan[1] + "]")
125.               if (typeof(item as RichEditorImageSpanResult)['imageStyle'] != 'undefined') {
126.                 console.log("image:" + (item as RichEditorImageSpanResult).valueResourceStr)
127.               } else {
128.                 console.log("text:" + (item as RichEditorTextSpanResult).value)
129.               }
130.             })
131.             return true;
132.           })
133.           .onDeleteComplete(() => {
134.             console.log("---------------------- onDeleteComplete ------------------------")
135.           })
136.           .borderWidth(1)
137.           .borderColor(Color.Green)
138.           .width("100%")
139.           .height("30%")
140.       }
141.       .borderWidth(1)
142.       .borderColor(Color.Red)
143.       .width("100%")
144.       .height("70%")
145.     }
146.   }
147. }

复制代码

示例2

1. // xxx.ets
2. @Entry
3. @Component
4. struct RichEditorExample {
5.   controller: RichEditorController = new RichEditorController()
7.   // 自定义键盘组件
8.   @Builder CustomKeyboardBuilder() {
9.     Column() {
10.       Grid() {
11.         ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
12.           GridItem() {
13.             Button(item + "")
14.               .width(110).onClick(() => {
15.               this.controller.addTextSpan(item + '', {
16.                 offset: this.controller.getCaretOffset(),
17.                 style:
18.                 {
19.                   fontColor: Color.Orange,
20.                   fontSize: 30
21.                 }
22.               })
23.               this.controller.setCaretOffset(this.controller.getCaretOffset() + item.toString().length)
24.             })
25.           }
26.         })
27.       }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
28.     }.backgroundColor(Color.Gray)
29.   }
31.   build() {
32.     Column() {
33.       RichEditor({ controller: this.controller })
34.         // 绑定自定义键盘
35.         .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 })
36.         .height(200)
37.         .borderWidth(1)
38.         .borderColor(Color.Red)
39.         .width("100%")
40.     }
41.   }
42. }

复制代码

写在最后

• 如果你觉得这篇内容对你还蛮有资助，我想约请你帮我三个小忙：
  
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  
• 关注小编，同时可以期待后续文章ing ，不定期分享原创知识。
  
• 更多鸿蒙最新技能知识点，请关注作者 
  

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