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

最新推荐文章于 2024-08-07 20:21:18 发布
最新推荐文章于 2024-08-07 20:21:18 发布
阅读量910 收藏 9
点赞数 19
分类专栏： 鸿蒙 文章标签： harmonyos 华为 鸿蒙系统 鸿蒙 android 驱动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/situnanQAQ/article/details/139608357
版权

 支持图文混排和文本交互式编辑的组件。

说明：

该组件从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组件的控制器。

导入对象

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.BASELINE
objectFitImageFit否图片缩放类型。
默认值:ImageFit.Cover。

RichEditorRange

范围信息。

名称类型必填描述
startnumber否起始位置，省略或者设置负值时表示从0开始。
endnumber否结束位置，省略或者超出文本范围时表示到结尾。

示例

示例1

// xxx.ets
@Entry
@Component
struct Index {
  controller: RichEditorController = new RichEditorController();
  options: RichEditorOptions = { controller: this.controller };
  private start: number = -1;
  private end: number = -1;
  @State message: string = "[-1, -1]"
  @State content: string = ""

  build() {
    Column() {
      Column() {
        Text("selection range:").width("100%")
        Text() {
          Span(this.message)
        }.width("100%")
        Text("selection content:").width("100%")
        Text() {
          Span(this.content)
        }.width("100%")
      }
      .borderWidth(1)
      .borderColor(Color.Red)
      .width("100%")
      .height("20%")

      Row() {
        Button("更新样式:加粗").onClick(() => {
          this.controller.updateSpanStyle({
            start: this.start,
            end: this.end,
            textStyle:
            {
              fontWeight: FontWeight.Bolder
            }
          })
        })
        Button("获取选择内容").onClick(() => {
          this.content = "";
          this.controller.getSpans({
            start: this.start,
            end: this.end
          }).forEach(item => {
            if(typeof(item as RichEditorImageSpanResult)['imageStyle'] != 'undefined'){
              this.content += (item as RichEditorImageSpanResult).valueResourceStr;
              this.content += "\n"
            } else {
              this.content += (item as RichEditorTextSpanResult).value;
              this.content += "\n"
            }
          })
        })
        Button("删除选择内容").onClick(() => {
          this.controller.deleteSpans({
            start: this.start,
            end: this.end
          })
          this.start = -1;
          this.end = -1;
          this.message = "[" + this.start + ", " + this.end + "]"
        })
      }
      .borderWidth(1)
      .borderColor(Color.Red)
      .width("100%")
      .height("10%")

      Column() {
        RichEditor(this.options)
          .onReady(() => {
            this.controller.addTextSpan("0123456789",
              {
                style:
                {
                  fontColor: Color.Orange,
                  fontSize: 30
                }
              })
            this.controller.addImageSpan($r("app.media.icon"),
              {
                imageStyle:
                {
                  size: ["57px", "57px"]
                }
              })
            this.controller.addTextSpan("0123456789",
              {
                style:
                {
                  fontColor: Color.Black,
                  fontSize: 30
                }
              })
          })
          .onSelect((value: RichEditorSelection) => {
            this.start = value.selection[0];
            this.end = value.selection[1];
            this.message = "[" + this.start + ", " + this.end + "]"
          })
          .aboutToIMEInput((value: RichEditorInsertValue) => {
            console.log("---------------------- aboutToIMEInput ----------------------")
            console.log("insertOffset:" + value.insertOffset)
            console.log("insertValue:" + value.insertValue)
            return true;
          })
          .onIMEInputComplete((value: RichEditorTextSpanResult) => {
            console.log("---------------------- onIMEInputComplete ---------------------")
            console.log("spanIndex:" + value.spanPosition.spanIndex)
            console.log("spanRange:[" + value.spanPosition.spanRange[0] + "," + value.spanPosition.spanRange[1] + "]")
            console.log("offsetInSpan:[" + value.offsetInSpan[0] + "," + value.offsetInSpan[1] + "]")
            console.log("value:" + value.value)
          })
          .aboutToDelete((value: RichEditorDeleteValue) => {
            console.log("---------------------- aboutToDelete --------------------------")
            console.log("offset:" + value.offset)
            console.log("direction:" + value.direction)
            console.log("length:" + value.length)
            value.richEditorDeleteSpans.forEach(item => {
              console.log("---------------------- item --------------------------")
              console.log("spanIndex:" + item.spanPosition.spanIndex)
              console.log("spanRange:[" + item.spanPosition.spanRange[0] + "," + item.spanPosition.spanRange[1] + "]")
              console.log("offsetInSpan:[" + item.offsetInSpan[0] + "," + item.offsetInSpan[1] + "]")
              if (typeof(item as RichEditorImageSpanResult)['imageStyle'] != 'undefined') {
                console.log("image:" + (item as RichEditorImageSpanResult).valueResourceStr)
              } else {
                console.log("text:" + (item as RichEditorTextSpanResult).value)
              }
            })
            return true;
          })
          .onDeleteComplete(() => {
            console.log("---------------------- onDeleteComplete ------------------------")
          })
          .borderWidth(1)
          .borderColor(Color.Green)
          .width("100%")
          .height("30%")
      }
      .borderWidth(1)
      .borderColor(Color.Red)
      .width("100%")
      .height("70%")
    }
  }
}

richeditor

示例2

// xxx.ets
@Entry
@Component
struct RichEditorExample {
  controller: RichEditorController = new RichEditorController()

  // 自定义键盘组件
  @Builder CustomKeyboardBuilder() {
    Column() {
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
          GridItem() {
            Button(item + "")
              .width(110).onClick(() => {
              this.controller.addTextSpan(item + '', {
                offset: this.controller.getCaretOffset(),
                style:
                {
                  fontColor: Color.Orange,
                  fontSize: 30
                }
              })
              this.controller.setCaretOffset(this.controller.getCaretOffset() + item.toString().length)
            })
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      RichEditor({ controller: this.controller })
        // 绑定自定义键盘
        .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 })
        .height(200)
        .borderWidth(1)
        .borderColor(Color.Red)
        .width("100%")
    }
  }
}

customKeyboard

写在最后

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

「已注销」
关注
  • 19
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS应用开发：集成语音识别功能全攻略
07-07
通过实际的代码示例和开发指南，开发者可以快速在自己的HarmonyOS应用中集成语音识别功能，为用户提供更加丰富和便捷的交互体验。 本文提供了在HarmonyOS应用中集成语音识别功能的全面指南，从服务集成到实际代码...
精通HarmonyOS应用开发：从入门到高级实战"
07-06
- 安装HarmonyOS应用开发所需的SDK和开发工具。 - 熟悉DevEco Studio IDE的使用。 ### 3. 学习应用开发框架 - 理解HarmonyOS的应用开发框架，包括Ability、Window、Scene等。 - 学习如何使用HarmonyOS的UI框架和...
OpenHarmony：RichEditor组件样例开发
m0_64420071的博客
03-29 892
使用 richEditor 组件实现一个富文本编辑框，包含富文本编辑区域和功能栏。
Vi编辑器的基本使用
踏雨歌青春，诗酒趁年华
01-16 1799
本篇是Linux系统里Vi编辑器的使用教程。Vi编辑器是最常用的Linux系统文本编辑工具，可以帮助我们通过一系列命令对文本文件进行编辑操作，具有命令行模式、插入模式、底行模式这三种工作模式。
基于RichEditor的评论编辑
hongxiaomeng的博客
06-04 317
富文本编辑器禁用
m0_64707449的博客
11-16 1862
富文本编辑器禁用
【HarmonyOS NEXT】RichEditor如何支持placeholder
Mayism123的博客
03-08 374
鸿蒙的RichEditor是否支持placeholder？类似TextInput({placeholder:'文本提示'})这种。RichEditor目前不支持placeholder，可以利用Stack组件+Text组件，自行开发placeholder效果。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：RichEditor）
m0_64420071的博客
03-12 1269
ArkTS声明式开发（基础手势：RichEditor）
HarmonyOS应用开发：Span（基础组件）
situnanQAQ的博客
06-12 328
作为Text组件和RichEditor组件的子组件，用于显示行内文本的组件。
HarmonyOS应用开发基础知识.pdf
12-28
HarmonyOS 应用开发基础知识是指 HarmonyOS 操作系统上应用程序的开发基础知识，本文档主要介绍了 HarmonyOS 应用开发的基本概念和组件。 一、APP 和 HAP 在 HarmonyOS 中，应用程序由一个或多个 HAP（HarmonyOS ...
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
10-13
在“HCIA-HarmonyOS应用开发工程师 V2.0 ...这些知识点涵盖了HarmonyOS应用开发的基础概念、组件使用、通信机制、应用生命周期、UI设计以及开发工具的使用技巧，是成为一名合格的HarmonyOS应用开发工程师必备的知识。
HarmonyOS云开发基础认证自刷题库
09-13
【 HarmonyOS 云开发基础认证自刷题库详解】 在当今的互联网技术发展潮流中，华为推出的HarmonyOS操作系统以其跨平台、分布式的特点受到了广泛关注。为了帮助开发者更好地掌握HarmonyOS的云开发技能，官方提供了...
鸿蒙AI功能开发【hiai引擎框架-通用文字识别】 基础视觉服务
最新发布
2301_76813281的博客
08-07 202
本示例展示了使用hiai引擎框架提供的通用文字识别能力。 本示例模拟了在应用里，选择一张图片，识别其文字信息并展示出来（可复制）。 需要使用hiai引擎框架通用文字识别接口@kit.CoreVisionKit.d.ts。
鸿蒙笔记--Socket
ljt2724960661的博客
08-04 284
这一节主要了解鸿蒙Socket通信，在鸿蒙系统中，Socket TCP通讯是一种常用的...
鸿蒙图形开发【3D引擎接口示例】
2301_76813281的博客
08-05 1168
本实例主要介绍3D引擎提供的接口功能。提供了@ohos.graphics.scene中接口的功能演示。 3D引擎渲染的画面会被显示在Component3D这一控件中。点击按钮触发不同的功能，用户可以观察渲染画面的改变。
鸿蒙系统开发【加解密算法库框架】安全
2301_76813281的博客
08-02 942
本示例使用@ohos.security.cryptoFramework相关接口实现了对文本文件的加解密、签名验签操作。
【HarmonyOS NEXT星河版开发学习】小型测试案例01-今日头条置顶练习
2302_80329073的博客
08-05 602
本系列可能是博客首发，鸿蒙开发星河版是一个全新的版本，由于参考视频较少鸿蒙开发不被重视导致csdn上面并没有全套的学习路线，所以我决定分享个人的学习。本人也是正在参照黑马程序员的视频进行逐步学习，并不是这方面的专家。希望大家能够对鸿蒙开发感兴趣。鸿蒙（HarmonyOS）是华为推出的一款全场景分布式操作系统，旨在支持各种设备上的统一操作体验。如果你对鸿蒙开发感兴趣，这里简要介绍一下相关内容：开发语言。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值