如何使用 SwiftUI 实现类似于适用于 iOS 的 Apple Notes App 中使用的富文本编辑器

How can I implement a Rich Text Editor similar to that used in the Apple Notes App for iOS using SwiftUI

提问人:alionthego 提问时间:11/14/2023 最后编辑:alionthego 更新时间:11/16/2023 访问量:45

问:

我正在尝试创建一个富文本编辑器,该编辑器将允许用户动态创建带有粗体/斜体/下划线/删除线以及项目符号和缩进的文本。

这与我在Apple Notes应用程序上看到的非常相似,我想要类似的外观和感觉。不幸的是,这不是 Apple 提供给我们的,所以我需要自己实现它。我不是在寻找第三方库来执行此操作。

我首先使用 a 和 .UIViewRepresentableUITextViewNSAttributedString

我的方法是使用获取段落并根据用户的选择调整格式。这很乏味,尤其是子弹,我遇到了很多麻烦。NSRange

所以我想我会停下来问问我是否以正确的方式解决这个问题,或者是否有更简单的方法可以将此功能添加到我的应用程序中。我见过一些人使用,但网上关于这方面的信息很少。WKWebView

我注意到在 Notes 应用程序中,字体大小的选项是标题/标题/副标题/正文/单样式。我没有看到这些与 iOS 中的任何系统字体样式匹配,所以想知道这个应用程序是否是用 HTML 构建的,而这些是 HTML 字体样式?

到目前为止,这就是我所拥有的,它只处理粗体/斜体等......只有从那时起。不像笔记应用程序那样适用于整个段落。它还没有考虑突出显示然后添加粗体。

我越是努力解决这个问题,我就越觉得自己走错了路,必须有另一种方法来实现这一目标。

struct AttributedTextEditor: UIViewRepresentable {
    
    @Binding var text: NSAttributedString
    
    @Binding var bold: Bool
    @Binding var italic: Bool
    @Binding var underline: Bool
    @Binding var strike: Bool

    func makeUIView(context: Context) -> UITextView {
        let textView = UITextView()
        textView.delegate = context.coordinator
        return textView
    }

    func updateUIView(_ uiView: UITextView, context: Context) {
        uiView.attributedText = text
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UITextViewDelegate {
        var parent: AttributedTextEditor

        init(_ parent: AttributedTextEditor) {
            self.parent = parent
        }
        
        func textViewDidChange(_ textView: UITextView) {
            parent.text = NSAttributedString(attributedString: textView.attributedText)
        }
        
        func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
            
            var traits = UIFontDescriptor().symbolicTraits

            if parent.bold {
                traits.insert([.traitBold])
            }
            if parent.italic {
                traits.insert([.traitItalic])
            }
            if parent.underline {
                textView.typingAttributes[NSAttributedString.Key.underlineStyle] = 1
            } else {
                textView.typingAttributes[NSAttributedString.Key.underlineStyle] = 0
            }
            if parent.strike {
                textView.typingAttributes[NSAttributedString.Key.strikethroughStyle] = 1
            } else {
                textView.typingAttributes[NSAttributedString.Key.strikethroughStyle] = 0
            }
            
            let fontDescriptor = UIFontDescriptor().withSymbolicTraits(traits)
            textView.typingAttributes[NSAttributedString.Key.font] = UIFont(descriptor: fontDescriptor!, size: 34)
            return true
        }
    }
}

我注意到,查看笔记应用程序字体的小写字母“a”,这是不可用的 SF 字体的变体。因此,这可以解释为什么字体与系统字体不完全匹配。

iOS SwiftUI UITextView 富文本编辑器

评论


答: 暂无答案