HarmonyOS 图文混合问题

需要图文混合进行发布稿件内容。需要输入正文和图片,图片可以插入在文本之中,如何实现?

HarmonyOS
2024-10-08 11:14:00
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

可以使用RichEditor这个组件来实现,参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-richeditor-V5,这边提供一个demo参考:

@Entry  
@Component  
struct RichEditorDemo2 {  
  @State message: string = 'Hello World';  
  controller: RichEditorController = new RichEditorController();  
  options: RichEditorOptions = { controller: this.controller };  
  build() {  
    Column() {  
      RichEditor(this.options)  
        .onReady(() => {  
          this.controller.addTextSpan("012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789\n",  
            {  
              style:  
              {  
                fontColor: Color.Orange,  
                fontSize: 30  
              }  
            })  
          this.controller.addImageSpan($r("app.media.app_icon"),  
            {  
              imageStyle:  
              {  
                size: ["200px", "200px"],  
                verticalAlign: ImageSpanAlignment.BOTTOM,  
                layoutStyle: {  
                  borderRadius: {  
                    topLeft: '10px',  
                    topRight: '20px',  
                    bottomLeft: '30px',  
                    bottomRight: '40px'  
                  },  
                  margin: {  
                    left: '10px',  
                    top: '20px',  
                    right: '30px',  
                    bottom: '40px'  
                  }  
                }  
              },  
            })  
          this.controller.addTextSpan("\n")  
          this.controller.addTextSpan("0123456789",  
            {  
              style:  
              {  
                fontColor: Color.Orange,  
                fontSize: 30  
              }  
            })  
        })  
    }  
    .height('100%')  
  }  
}
分享
微博
QQ
微信
回复
2024-10-08 15:43:59
相关问题
flutter混合遇到的问题
254浏览 • 1回复 待解决
基于原生能力实现图文混排
457浏览 • 1回复 待解决
沉浸式图文排列布局如何实现
346浏览 • 1回复 待解决
Text 组件如何渲染图文动态混排
944浏览 • 1回复 待解决
关于混合打包 HarmonyApplication?
6398浏览 • 1回复 待解决
请问混合应用如何预置?
4660浏览 • 1回复 待解决
鸿蒙和reactnative混合开发怎么实现
2321浏览 • 1回复 待解决
如何选择图文混排的实现方案
2145浏览 • 1回复 待解决
有人知道如何实现图文混排吗?
732浏览 • 1回复 待解决
支持图文混排组件及解决方案
248浏览 • 1回复 待解决
关于图文混排的实现方式有哪些
326浏览 • 1回复 待解决
关于实现图文混排的几种方式优劣点
470浏览 • 1回复 待解决
Ark UI 和Java UI 可以混合开发么?
4447浏览 • 1回复 待解决