鸿蒙开发中富文本编辑框怎么实现？

Question

鸿蒙开发中富文本编辑框怎么实现？

-- 来自郝老师直播间

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

你可以使用RichEditor实现，参考示例代码：

@Entry 
@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%') 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。