如何在 Swift 的 UITextView 中保持 HTML 内容的缩进？

Question

我在 UITextView 中显示了列表和子列表，但它没有显示子列表的缩进。这是我的代码，从此处获取 HTML 格式的数据。

extension NSAttributedString {
convenience public init?(styled: String, textAlignment: NSTextAlignment = .center, color: UIColor = .black) {
    guard let data = styled.data(using: String.Encoding.unicode) else {
        return nil
    }
    do {
        let string = try NSMutableAttributedString(data: data,
                                                   options: [NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html], documentAttributes: nil)
        let paragraphStyle = NSMutableParagraphStyle()

        paragraphStyle.tabStops = [NSTextTab(textAlignment: .natural, location: 0, options: Dictionary<NSTextTab.OptionKey, Any>())]
        paragraphStyle.defaultTabInterval = 5

        string.addAttributes(
            [NSAttributedStringKey.foregroundColor: color,NSAttributedStringKey.paragraphStyle:paragraphStyle],
            range: NSMakeRange(0, string.length)
        )

        self.init(attributedString: string.removingTrailingNewLine)
    } catch {
        return nil
    }
}

HTML 要显示的数据，虽然它包含 ul、ol 标签，但为这些标签添加 CSS 不适用于 UITextView.

    <html>

    <head>
    <style type="text/css">
    body {
      font-size: 14px;
      font-family: -apple-system, Arial, sans-serif;
      color: black;
      margin-bottom: 0px;
      padding-bottom: 0px;
      line-height: 20px;
    }

    ul,
    ol {
      padding-left: 10px;
    }
    </style>
    </head>

    <body>
    <p>Professionals are often vastly more comfortable solving analytical, convergent problems than those requiring more divergent thinking. In this article, Olivier Leclerc and Mihnea Moldoveanu share some strategies for stimulating truly novel thinking.
    They introduce five "flexons," which can be thought of as "languages" for shaping problems that help you bring diverse perspectives to problem solving:</p>

  <ul type="disc">
    <li>Networks</li>
    <li>Evolutionary</li>
  </ul>


  <ol>
    <li>Decision-agent</li>
    <li>System dynamics</li>
    <li>Information-processing :
      <ol>
        <li>Decision-agent</li>
        <li>System dynamics</li>
        <li>Information-processing</li>
      </ol>
    </li>
  </ol>


  <ul type="disc">
    <li>Networks :
      <ul>
        <li type="circle">Decision-agent</li>
        <li type="circle">System dynamics</li>
      </ul>
    </li>
  </ul>

</body>

</html>

这是它在设备上的显示方式。我还想指出的另一件事是，如果我从 Swift 侧添加段落样式，则列表显示如下所示，如果我不添加段落样式，则添加列表，然后填充超过我的要求。

Answer 1

只要收到Html数据就用attributedText

显示

将 html 转换为 AttributedString :

    // Read Html of Your example From Bundle

    guard let  htmlFile =  Bundle.main.path(forResource: "dataHtml", ofType: "html") else { return}

    // Safe convert html to string
    guard let  html =  try? String(contentsOfFile: htmlFile, encoding: String.Encoding.utf8)else { return}

    let options = [NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html]

    // Safe string  to Data

    guard let  htmlData =  NSString(string: html).data(using: String.Encoding.unicode.rawValue) else { return}

    // Safe attributedString from data
    guard let  attributedString =  try? NSAttributedString(data: htmlData, options: options, documentAttributes: nil) else { return}

    textView.attributedText = attributedString
    textView.textColor = .red // you can comment  or change font and color

您的示例结果：

如何在 Swift 的 UITextView 中保持 HTML 内容的缩进？

How to maintain indentations of HTML content in UITextView in Swift?

ios

swift

uitextview

padding

nsattributedstring