UITextView 加载富文本（带图文）

2022-05-13 本文已影响0人孤雁_南飞

1、前言

iOS 10.0
Xcode 13.3.1
SwiftRichString  4.0.0

本来我们UI制定的图上面只是文字，但是由于后台输入框能添加图片，我们原定只加载文本，变成了富文本，样式如下

1.1、情景1，本来做题页面，题目、选项、答案中都可能会出现一个或多个图片， WeChatae15cabdf656f6a8161daa777f142e9e.png

1.2、情景2 一个AI互动页面，简单的虚拟聊天，聊天内容可能会出现多个图片 2.png

2 解决方法

2.1 计算富文本宽高

因为富文本中带有网络图片，所以要计算出图片宽度的富文本宽高
1、网上很多方法我看都计算不出来，我再 img 标签后面给网络图片添加个宽度，就可以了（可能是因为我们的富文本不规范吧，img标签都没有设置width）

计算宽高时候发现，p标签会导致高度偏高，所以我给替换掉了（如有大佬知道原因，或者能给出其他方法，请留言@我）


/// html字符串   文本域宽度  字体大小
public func getAttriSize(text: String, width: CGFloat, font: UIFont) -> CGSize {
    var html = "<head><style>img{max-width:\(width) !important;height:auto}</style></head>\(text)"
    html = html.replacingOccurrences(of: "<img", with: "<img width=\"\(width)\"")
    html = html.replacingOccurrences(of: "<p>", with: "")
    html = html.replacingOccurrences(of: "</p>", with: "")
    
    var htmlString: NSMutableAttributedString? = nil
    do {
        if let data = html.data(using: .utf8) {
            htmlString = try NSMutableAttributedString(data: data, options: [
            NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html,
            NSAttributedString.DocumentReadingOptionKey.characterEncoding: NSNumber(value: String.Encoding.utf8.rawValue)
            ], documentAttributes: nil)
        }
    } catch {
    }
    // 设置富文本字的大小
    htmlString?.addAttributes([
    NSAttributedString.Key.font: font
    ], range: NSRange(location: 0, length: htmlString?.length ?? 0))

    // 设置行间距
    let paragraphStyle = NSMutableParagraphStyle()
    paragraphStyle.lineSpacing = 6
    htmlString?.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSRange(location: 0, length: htmlString?.length ?? 0))
    
    let attri = htmlString ?? NSMutableAttributedString(string: html)
    let htmlSize = attri.boundingRect(with: CGSize(width: width, height: CGFloat(MAXFLOAT)),
                                      options: [.usesLineFragmentOrigin, .usesFontLeading],
                                      context: nil).size 
    return htmlSize
}

2.2 使用UITextView 加载富文本

private lazy var textView: UITextView = {
    let newTextView = UITextView()  
    textView.textContainer.lineFragmentPadding = 0.0
    newTextView.backgroundColor = .clear
    newTextView.isUserInteractionEnabled = false
    return newTextView
}()

2.3 使用 SwiftRichString 生成 NSMutableAttributedString 进行加载

如果只使用 NSMutableAttributedString，网络图片会导致加载不出来的情况，我看网络上博客都说能加载出来，但是我这边确实加载失败，只是展示一个

3.png

转换代码

标签中的 src 要替换成 url
br 标签替换成 \n 才能换行

import SwiftRichString 

///SwiftRichString 转换 NSMutableAttributedString 生成器
///html字符串   字体大小
func settingHtmlAttri(text: String, font: UIFont) -> NSMutableAttributedString {
    let styleGroup = StyleGroup(base: Style {
        $0.font = font
        $0.color = RGBA(51)
        $0.lineSpacing = 6
    })
    var html = text
    html = html.replacingOccurrences(of: "src", with: "url")
    html = html.replacingOccurrences(of: "<br>", with: "\n")
    html = html.replacingOccurrences(of: "<br/>", with: "\n")
    return html.set(style: styleGroup)
}

3 遇到的问题

3.1 富文本宽度计算

3.1.1 计算耗时，慎用

少量加载可以无视，大量就要慎重了，（如有大佬有解决方法，请留言@我）

3.2.2 计算宽度精度问题

宽度精度会丢失一点点，如要使用，稍微添加0.5的宽度可无视

3.2 UITextView 加载问题

3.2.1 UITextView有内边距，左右间距处理

默认左右间距有5px, 使用下面方法取消左右间距

textView.textContainer.lineFragmentPadding = 0.0

3.2.1 UITextView有内边距，上下间距处理

默认上下间距有8px, 使用下面方法取消上下间距

textView.textContainerInset = .zero

但是，有网络图片的情况下，可能会出现问题（我的部分富文本出现了问题）
UITextView 内部位置上移

4.png

大致情况如下图所示，设置可编辑状态，输入浮标明显比字体偏下，字体大致向上便宜了1px~2px

image.png
解决方法：建议设置上下边框高度时候注意！设置UITextView frame时候不要忘记添加上下边框距离

3.3 图片问题

图片被限制了宽度来计算高度，所以对图片过小、过长加载非常不友好（如果有更好的加载方法，敬请留言）