3

My requirement is to display the text in SwiftUI which contains the HTML tags. I tried with the approach of using the WKWebKit::Loadhtml which works fine . However, I have the requirement of displaying it something like this. A collection of person card

Person card:- Name Title

Person details details which has HTML text e.gHello world

Can someone suggest a way to solve this in SwiftUI.

Refer to the post as well but no luck

How to show HTML or Markdown in a SwiftUI Text?

4
  • Literally the post you link to shows you how to use UIViewRepresentable to wrap a WKWebView in a SwiftUI.View. What did you try and what error are you getting? Commented Jan 14, 2020 at 7:02
  • I was looking for an example how to use UIViewRepresentable with an UILabel and attributedText.However, I think deriving a class using the WKWebView solves the issue. Incase if you have pointers how can i implement the UIViewRepresentable then let me know. Commented Jan 20, 2020 at 0:00
  • I am working on a blog which could help lot of people like me Commented Mar 23, 2020 at 0:12
  • Try this stackoverflow.com/a/67500889/10952522. Commented May 12, 2021 at 9:30

1 Answer 1

5

There are a range of ways to display HTML text in SwiftUI. However I found some issues to use them. Interfacing UILabel and using NSAttributedText only enable us to display small size string moreover WKWebView restrict to use desirable font. Considering all of these, I found using UITextView with NSAttributedText is more convenient to display HTML text in SwiftUI. The code is following

import UIKit
import SwiftUI

struct HTMLFormattedText: UIViewRepresentable {

   let text: String
   private  let textView = UITextView()

   init(_ content: String) {
      self.text = content
   }

   func makeUIView(context: UIViewRepresentableContext<Self>) -> UITextView {
      textView.widthAnchor.constraint(equalToConstant:UIScreen.main.bounds.width).isActive = true
      textView.isSelectable = false
      textView.isUserInteractionEnabled = false
      textView.translatesAutoresizingMaskIntoConstraints = false
      textView.isScrollEnabled = false
      return textView
  }

  func updateUIView(_ uiView: UITextView, context: UIViewRepresentableContext<Self>) {
     DispatchQueue.main.async {
         if let attributeText = self.converHTML(text: text) {
             textView.attributedText = attributeText
         } else {
             textView.text = ""
         }

     }
  }

  private func converHTML(text: String) -> NSAttributedString?{
      guard let data = text.data(using: .utf8) else {
          return nil
      }

      if let attributedString = try? NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html], documentAttributes: nil) {
          return attributedString
      } else{
          return nil
      }
  }
}

struct ContentView: View {    
    var body: some View {
       HTMLFormattedText("<p>Danish-made 1st class kebab</p><p><br></p><p>Say yes thanks to 2kg. delicious kebab, which is confused and cooked.</p><p><br></p><p>Yes thanks for 149.95</p><p><br></p><p>Now you can make the most delicious sandwiches, kebab mix and much more at home</p>")        
    }
}

Here height will increase automatically based on the size of content as well as width also. More detail is available on this GitHub link: https://github.com/tmusabe/HTMLFormattedText-SwiftUI

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you. This is the only code in all stackoverflow that works for me!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.