基于RichEditor的评论编辑

最新推荐文章于 2024-08-23 18:03:27 发布
最新推荐文章于 2024-08-23 18:03:27 发布
阅读量361 收藏 4
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongxiaomeng/article/details/139448382
版权

场景描述

RichEditor是支持图文混排和文本交互式编辑的组件，在我们使用的APP中是很常见的，比如评论区编辑内容发布、对话框或者聊天室。下面列举一些遇到的场景需求：场景一：基于文字图片以及@信息的好友评论场景二：右下角的剩余字数场景三：评论中携带所@的用户的附属信息场景四：文本选择区域发生变化或编辑状态下光标位置发生变化回调场景五：自由切换系统键盘和自定义键盘。

方案描述

场景一：基于文字图片以及@信息的好友评论

效果图

方案

1、通过addTextSpan来添加文字，2、通过addImageSpan来添加图片3、通过addBuilderSpan来实现一段内容光标不可插入的效果4、addTextSpan等支持gesture等手势操作，比如onClick点击和onLongPress长按事件

核心代码

1、由于RichEditor是支持图文混排的，所以RichEditor里面的内容也就是由Text和Image组成的，分别通过addTextSpan和addImageSpan添加，而且还可以设置字体和图片样式，如下代码1：

@Entry
@Component
struct getSpans {
  editorController = new RichEditorController()
 
  build() {
    Column() {
      RichEditor({ controller: this.editorController })
        .width('100%')
        .backgroundColor(Color.Yellow)
        .onReady(() => {
          this.editorController.addImageSpan($r("app.media.icon"),
            {
              imageStyle:
              {
                size: ["100px", "100px"]
              }
            })
          this.editorController.addTextSpan('男生女生向前冲',
            {
              style:
              {
                fontColor: Color.Blue,
                fontSize: 30
              }
            })
        })
      Button('getSpans-图片').onClick((event: ClickEvent) => {
        let getSpans = this.editorController.getSpans({ start: 0 })
        console.log('getSpans0' + JSON.stringify(getSpans[0]))
        // 必须进行强转才能获取文字信息或者图片信息
        let span0 = getSpans[0] as RichEditorTextSpanResult
        console.log('图片相关的信息: ' + JSON.stringify(span0))
      })
      Button('getSpans-文字').onClick((event: ClickEvent) => {
        let getSpans = this.editorController.getSpans({ start: 0 })
        console.log('getSpans1' + JSON.stringify(getSpans[1]))
        let span1 = getSpans[1] as RichEditorImageSpanResult
        console.log('文字相关的信息: ' + JSON.stringify(span1))
      })
    }
  }
}

2、在常见的评论区艾特好友时，会将“@华为官方客服”视作一个整体，光标无法插入其中，且第一次按删除键时整体会高亮选中，第二次再按删除键才会删除。**需要注意的是，如果使用的全局@Builder，则需要配合bind(this)使用。**后续也可以通过事件阻止“即RichEditor控件ClickEvent/TouchEvent支持preventDefault”。

@Entry
@Component
struct BuilderSpan {
  editorController = new RichEditorController()
 
  @Builder
  At(str: string) {
    Stack() {
      Text('@' + str).fontColor(Color.Blue)
    }
  }
 
  build() {
    Column() {
      RichEditor({ controller: this.editorController })
        .width('100%')
        .height(50)
        .backgroundColor(Color.Yellow)
        .onReady(() => {
          this.editorController.addBuilderSpan(() => {
            this.At('华为官方客服')
          })
          this.editorController.addTextSpan('！！！')
        })
    }
  }
}

3、发微博的时候可以输入表情、超链接、文字等一起的内容

代码3：

@Component
struct Index {
  @State message: string = '#超话社区#';
  controller: RichEditorController = new RichEditorController();
  @State show: boolean = false;
 
  build() {
    Column() {
      RichEditor({controller: this.controller})
        .height(56)
        .width("90%")
        .borderStyle(BorderStyle.Solid)
        .borderColor(Color.Black)
        .borderWidth(1)
        .onReady(() => {
        })
      Button('输入表情').onClick((event: ClickEvent) => {
        this.controller.addImageSpan($r('app.media.app_icon'), {
          imageStyle: {
            size: ["80px", "80px"]
          }
        })
      })
      Button('超链接').onClick((event: ClickEvent) => {
        this.controller.addTextSpan(this.message, {
          offset: this.controller.getCaretOffset(),
          style:
          {
            fontColor: Color.Orange,
            fontSize: 16
          },
          gesture:
          {
            onClick: () => {
              console.log('要跳转链接了哦')
            },
            onLongPress: () => {
              console.log('我被长按了')
            }
          }
        })
        this.controller.setCaretOffset(this.controller.getCaretOffset() + this.message.length)
      })
    }
    .width('100%')
  }
}

场景二：右下角的剩余字数

效果图

方案

使用overlay浮层，显示“0/20”字数提示符在组件的右下角。再通过aboutToIMEInput回调（输入法输入内容前），获取插入的文本偏移位置，对输入内容进行限制。

核心代码

import promptAction from '@ohos.promptAction';
 
@Entry
@Component
struct MaxDemo {
  @State message: string = '蜡笔小新';
  controller: RichEditorController = new RichEditorController();
  @State getContentLength: number = 0;
  @State BOnSt:promptAction.ShowToastOptions = {'message': '已超出内容最大限制.'}
 
  build() {
    Column() {
      RichEditor({ controller: this.controller })
        .height(100)
        .borderWidth(1)
        .borderColor(Color.Red)
        .width("100%")
        .overlay(this.getContentLength + "/20", {
          align: Alignment.BottomEnd
        })
        .aboutToIMEInput((value: RichEditorInsertValue) => {
          console.log("insertOffset:" + JSON.stringify(value.insertValue)) //  插入的文本偏移位置。
          if (this.getContentLength < 20) {
            this.getContentLength = this.getContentLength + value.insertValue.length
            console.log('实时的内容长度：' + this.getContentLength)
            return true
          }
          promptAction.showToast(this.BOnSt)
          return false
        })
        .aboutToDelete((value: RichEditorDeleteValue) => {
          console.log('删除：' + JSON.stringify(value))
          this.getContentLength = this.getContentLength - value.length
          return true
        })
    }
    .width('100%')
  }
}

场景三：评论中携带所@的用户的附属信息

效果图

方案

使用HashMap的set向HashMap中添加或更新一组数据，使用get方法获取指定key所对应的value。

核心代码

@Entry
@Component
struct SameNameDemo {
  controller: RichEditorController = new RichEditorController();
 
  @Builder
  At(str: string) {
    Stack() {
      Text('@' + str).fontColor(Color.Blue)
    }
    .onClick(() => {
      // 添加不同的身份信息
      const hashMap: HashMap<string, number> = new HashMap();
      hashMap.set("friend1", 123);
      let result = hashMap.get("friend1");
      console.log('result: ' + result)
    })
  }
 
  build() {
    Column() {
      RichEditor({ controller: this.controller })
        .height(100)
        .borderWidth(1)
        .borderColor(Color.Red)
        .width("100%")
      Button('好友1').onClick((event: ClickEvent) => {
        this.controller.addBuilderSpan(() => {
          this.At('华为官方客服')
        })
      })
      Button('好友2').onClick((event: ClickEvent) => {
        this.controller.addBuilderSpan(() => {
          this.At('华为官方客服')
        })
      })
    }
    .width('100%')
  }
}

场景四：文本选择区域发生变化或编辑状态下光标位置发生变化回调

效果图

方案

使用RichEditor组件在API 12支持的新接口 onSelectionChange，在文本选择区域发生变化或编辑状态下光标位置发生变化时触发该回调。光标位置发生变化回调时，选择区域的起始位置等于终止位置(即start = end)。

核心代码

@Entry
@Component
struct Index {
  @State message: string = '蜡笔小新';
  controller: RichEditorController = new RichEditorController();
  @State show: boolean = false;
 
  build() {
    Column() {
      RichEditor({controller: this.controller})
        .defaultFocus(true)
        .padding(0)
        .height(56)
        .width("90%")
        .borderStyle(BorderStyle.Solid)
        .borderColor(Color.Black)
        .borderWidth(1)
        .padding({left: 10})
        .onReady(() => {
          this.controller.addTextSpan(this.message, {
            offset: this.controller.getCaretOffset(),
            style:
            {
              fontColor: Color.Orange,
              fontSize: 16
            }
          })
          this.controller.setCaretOffset(this.controller.getCaretOffset() + this.message.length)
        })
        .onSelectionChange((value:RichEditorRange) => {
          console.log('光标位置改变了')
          console.log('start: ' + value.start)
          console.log('end: ' + value.end)
        })
    }
    .width('100%')
  }
}

场景五：自由切换系统键盘和自定义键盘

效果图

方案

使用RichEditor的属性customKeyboard控制切换系统键盘还是自定义键盘，添加表情使用addImageSpan，删除内容使用deleteSpans，并通过获取光标所在位置进行删除。

核心代码

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  controller = new RichEditorController()
  @State showKeyboard:boolean = false;
  private listData: (string | number | Resource)[] = [
    $r('app.media.img'), $r('app.media.img_1'), $r('app.media.img_2'), $r('app.media.img_3'), $r('app.media.img_4'), $r('app.media.img_5'), $r('app.media.img_6'),
    $r('app.media.img'), $r('app.media.img_1'), $r('app.media.img_2'), $r('app.media.img_3'), $r('app.media.img_4'), $r('app.media.img_5'), $r('app.media.img_6'),
    $r('app.media.img'), $r('app.media.img_1'), $r('app.media.img_2'), $r('app.media.img_3'), $r('app.media.img_4'), $r('app.media.img_5'), $r('app.media.img_6'),
    $r('app.media.img'), $r('app.media.img_1'), $r('app.media.img_2'), $r('app.media.img_3'), $r('app.media.img_4'), $r('app.media.img_5'), $r('app.media.img_6'),
    $r('app.media.img'), $r('app.media.img_1'), $r('app.media.img_2'), $r('app.media.img_3'), $r('app.media.img_4'), $r('app.media.img_5'), $r('app.media.img_6'),
  ];
 
  // 自定义键盘组件
  @Builder CustomKeyboardBuilder() {
    Column() {
      Text('自定义表情键盘')
        .fontSize(25)
        .fontWeight(900)
      Grid() {
        ForEach(this.listData, (item: string | number | Resource) => {
          GridItem() {
            if (typeof item !== 'number' && typeof item !== 'string') {
              Image(item)
                .width(30).onClick(() => {
                this.controller.addImageSpan(item, { imageStyle: { size: ['110px', '110px'] } })
              })
            }
          }
        })
      }.columnsGap(10).rowsGap(10).padding(5)
      Row() {
        Image($r('app.media.img_7'))
          .width(30)
          .onClick(() => {
            this.controller.deleteSpans({start: this.controller.getCaretOffset() - 1, end: this.controller.getCaretOffset()})
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.End)
      .margin({ bottom: 40 })
    }
    .borderColor(Color.Gray)
    .borderWidth(5)
  }
 
  build() {
    Column() {
      RichEditor({ controller: this.controller })
        .width('100%')
        .borderWidth(1)
        .borderColor(Color.Black)
        .onReady(() => {
          this.controller.addTextSpan('有序排队')
        })
        .customKeyboard(this.showKeyboard ? this.CustomKeyboardBuilder() : undefined)
 
      Button('切换系统键盘与自定义键盘').onClick((event: ClickEvent) => {
        this.showKeyboard = ! this.showKeyboard
      })
    }
    .height('100%')
  }
}

 

hongxiaomeng
关注
零基础开始学习鸿蒙开发-评论区的制作
qq_36973384的博客
12-02 724
【代码】零基础开始学习鸿蒙开发-评论区的制作。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：RichEditor）
m0_64420071的博客
03-12 1413
ArkTS声明式开发（基础手势：RichEditor）
鸿蒙开发5.0【基于RichEditor的评论编辑】
最新发布
2301_76813281的博客
08-23 1072
RichEditor是支持图文混排和文本交互式编辑的组件，在我们使用的APP中是很常见的，比如评论区编辑内容发布、对话框或者聊天室。下面列举一些遇到的场景需求：
HarmonyOS应用开发：RichEditor（基础组件）
situnanQAQ的博客
06-11 1251
支持图文混排和文本交互式编辑的组件。
纯血鸿蒙APP实战开发——评论组件案例实现
m0_71524094的博客
04-28 1407
评论组件在目前市面上的短视频app中是一种很常见的场景，本案例使用全局状态保留能力弹窗来实现评论组件。点击评论按钮弹出评论组件，点击空白处隐藏该组件，再次点击评论按钮则会恢复上一次浏览的组件状态。如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
OpenHarmony：RichEditor组件样例开发
m0_64420071的博客
03-29 1023
使用 richEditor 组件实现一个富文本编辑框，包含富文本编辑区域和功能栏。
RichEditor for Android强大的富文本编辑器
11-09
`RichEditor`的源码是基于Java编写的，对于Android开发者来说，学习和理解其内部机制相对容易。在提供的`JavaApk源码说明.txt`文件中，可能包含了关于如何编译和运行源码的说明，这对于想要自定义编辑器功能或者进行...
一个基于Silverlight控件richeditor的签章功能demo
12-29
在这个特定的场景中，我们关注的是一个基于Silverlight控件`richeditor`的签章功能演示，即"一个基于richeditor的签章功能demo"。 `richeditor`通常指的是一个文本编辑器组件，它提供了丰富的文本格式化选项，如...
richEditor
08-17
富文本编辑器的工作原理通常是基于HTML（超文本标记语言）和CSS（层叠样式表）来实现文本的格式化。当用户在编辑器中进行操作时，编辑器会将用户的输入转化为相应的HTML代码，这些代码在网页后端或者服务器上被存储...
rich_code_editor:基于Flutter的代码编辑器
05-25
一个简单的程序包，支持在Flutter中创建代码编辑器。 支持的Flutter版本：Flutter 1.22.5 入门 富代码编辑器有两个主要组件： 编辑 语法荧光笔 编辑器是一个文本区域，与Flutter的TextField小部件相同。 但是，与...
richeditor.zip
11-05
富文本编辑器的工作原理通常基于内容Editable特性，这个特性可以使得HTML元素变为可编辑。用户在这些元素内输入的文字会被浏览器自动处理，呈现出与标准文本处理软件类似的样式和功能。编辑器通常还会提供API，让...
Rich Editor 使用
04-04
在myeclipse环境中实现web富文本编辑
OpenHarmony实战开发-如何实现发布图片评论功能。
m0_70749039的博客
04-16 891
本示例将通过发布图片评论场景，介绍如何使用startAbilityForResult接口拉起相机拍照，并获取相机返回的数据。
推荐开源项目：RichEditor - 优雅的富文本编辑器
gitblog_00065的博客
04-05 850
推荐开源项目：RichEditor - 优雅的富文本编辑器 RichEditor基于RecyclerView实现的富文本编辑器，支持多样式，链接，引用，图片等功能项目地址:https://gitcode.com/gh_mirrors/riched/RichEditor 项目简介 是一个由DrownCoder开发的轻量级、高性能且易于集成的富文本编辑器。它的设计目标是提供一个简洁易用、功能丰富的界...
移动端强大的富文本编辑器richeditor-android
findhappy117的博客
03-12 5162
代码地址如下：http://www.demodashi.com/demo/14883.html ####一、运行效果图 ####二、代码具体实现 1.引入richeditor-android richeditor-android需要的jar： implementation 'jp.wasabeef:richeditor-android:1.2.2' 这是一个Dialog框架，demo中不想...
Android Framework底层原理（附知识脑图+源码学习手册）30天突破技术壁垒_android framework学习手册(1)
2401_84544434的博客
04-28 922
！最后放上一个大概的Android学习方向及思路（详细的内容太多了~），提供给大家：对于程序员来说，要学习的知识内容、技术有太多太多，这里就先放上一部分，其他的内容有机会在后面的文章向大家呈现出来，不过我自己所有的学习资料都整理成了一个文档，一直在不断学习，希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！为什么某些人会一直比你优秀，是因为他本身就很优秀还一直在持续努力变得更优秀，而你是不是还在满足于现状内心在窃喜！Android架构师之路很漫长，一起共勉吧！
使用RichEditor问题做个记录
无糖咖啡有点苦
07-08 268
当打开过项目webview后，再进入编辑器，richeditor不生效 不会走onPageFinished方法，你自己重写newProgress方法，监听下如果newProgress到达80以上 就执行onPageFinished方法里面的内容 会出现偶尔richeditor不生效的问题 当newProgress不到80时 刷新webview。 RichEditorView.this.reload(); ...
RichEditor —— Android 的所见即所得编辑器
weixin_34174422的博客
06-03 337
RichEditor for Android 是 Android 平台下一个所见即所得的文本编辑器控件。 可以从 Google Play 下载演示程序。 使用示例： RichEditor editor = (RichEditor) findViewById(R.id.editor); editor. setOnTextChangeListener...
移动端强大的富文本编辑器richeditor-android，看完这篇
2201_75604341的博客
03-31 3086
笔者之前工作是在金融公司可能并不是特别追求技术，而笔者又是喜欢追求技术的人，所以格格不入，只能把目标放在互联网大厂了。也希望大家都去敢于尝试和追逐自己的梦想！BATJ大厂Android高频面试题oid开发知识点，真正体系化！**由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新如果你觉得这些内容对你有帮助，可以添加V获取：vip204888 （备注Android）
richeditor ios
04-30
RichEditor是一款适用于iOS平台的富文本编辑器。该编辑器可以方便地用于创建和编辑各种类型的文本内容，包括富文本、HTML、Markdown等格式。通过使用RichEditor，用户可以快速创建具有丰富样式和格式的文本内容，并可以轻松地进行格式化和编辑。 此外，RichEditor还具有各种高级功能，包括插入图片、插入视频、插入链接、插入表格等。此外，该编辑器还具有自动保存功能，可以支持批量导入和导出，方便用户在不同设备之间共享所创建的文本内容。 总的来说，RichEditor是一款功能齐全、易于使用的文本编辑器，凭借其出色的功能和易用性，成为iOS平台上最受欢迎和广泛使用的富文本编辑器之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值