如何使用 SwiftUI 实现类似于 iOS 版 Apple Notes 应用程序中使用的富文本编辑器

Question

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

这与我在苹果笔记应用程序中看到的非常相似，我想要类似的外观和感觉。不幸的是，苹果没有向我们提供这一点，所以我需要自己实现它。我不是在寻找第三方库来执行此操作。

我开始使用

UIViewRepresentable

与

UITextView

和

NSAttributedString

。

我的方法是使用获取段落的

NSRange

并根据用户的选择调整格式。这是相当乏味的，尤其是对于子弹，我遇到了很多麻烦。

所以我想我应该停下来问一下我是否正在以正确的方式处理这个问题，或者是否有更简单的方法将此功能添加到我的应用程序中。我见过一些人使用

WKWebView

，但网上关于这方面的信息很少。

我注意到在笔记应用程序中，字体大小的选项是标题/标题/副标题/正文/单色。我没有看到这些与 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 字体的变体。所以这可以解释为什么字体与系统字体不完全匹配。

Answer 1

你有没有更接近这个？