鸿蒙富文本 RichEditor使用getspan获取富文本内容转换html的方法

原创已于 2025-05-27 16:40:31 修改 · 630 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙 #harmonyos #前端

于 2025-05-27 16:39:37 首次发布

目前在官方文档还没有对应api，下面是自己做的一个示例

// 将 富文本的 spans 转换为 HTML
SpansToHtml(spans: RichEditorImageSpanResult[]): string {
  let html = ''
  spans.forEach(span => {
    let spanToHtml = ''
    // 如果是文字
    if (typeof (span as RichEditorImageSpanResult)['value'] != 'undefined') {
      let item = span as RichEditorImageSpanResult
      let text: string = (span as RichEditorImageSpanResult)['value']
      let Size = '<p  class="article-detail-c-text" style="display:inline;"><font style="font-size:16px";>' //设置字体
      let Weight = '<b style="font-weight: bold">'
      let Italic = '<i <b style="font-style: italic">'
      // 处理各种样式
      if (item['textStyle']) {
        if (item['textStyle']['fontSize']) {
          Size =
            `<p  class="article-detail-c-text" style="display:inline;"><font style = "font-size:${item['textStyle']['fontSize']}px";>`
          spanToHtml = Size + text + '</font></p>'
        } else if (item['textStyle']['fontStyle']) {
          spanToHtml = Italic + spanToHtml + '</i>'
        } else if (item['textStyle']['fontWeight']) {
          spanToHtml = Weight + spanToHtml + '</b>'
        }
      } else {
        spanToHtml =
          `<p  class="article-detail-c-text" style="display:inline;"><font style="font-size:16px";>${text}</font></p>`
      }
    }
    // 图片类型
    else {
      let imgurl = (span as RichEditorImageSpanResult)['valueResourceStr']
      spanToHtml =
        `<img src='${imgurl}?x-oss-process=image/resize,w_750'><font style="font-size:14px";></font><p  class="article-detail-c-text" style="display:inline;"><font style="font-size:14px";>\n\n</font></p>`
    }
    html += spanToHtml
  })
  LogUtil.info(`富文本转换HTML` + html)
  return html
}

根据业务需求自行更改拼接字段