MarkupEditor 使用教程

MarkupEditor 使用教程

MarkupEditor WYSIWYG editing for SwiftUI and UIKit apps 项目地址: https://gitcode.com/gh_mirrors/ma/MarkupEditor

1. 项目介绍

MarkupEditor 是一个为 SwiftUI 和 UIKit 应用设计的 WYSIWYG（所见即所得）编辑器。它允许开发者在不深入 JavaScript 的情况下，为 Swift 应用提供富文本编辑功能。MarkupEditor 的核心在于其 HTML 和 JavaScript 交互机制，通过 WKWebView 渲染可编辑的 HTML 文档，并利用 JavaScript 处理 DOM 操作。这些变动通过 JavaScript 回调传回 Swift 端，由 MarkupCoordinator 进行协调，并通知实现 MarkupDelegate 协议的委托对象。

2. 项目快速启动

安装

通过 Swift Package Manager 安装

1. 打开 Xcode 项目。
2. 选择 File -> Swift Packages -> Add Package Dependency。
3. 输入 https://github.com/stevengharris/MarkupEditor.git 并点击 Next。
4. 选择合适的版本或分支，然后点击 Finish。

手动构建框架

1. 克隆项目仓库：

   git clone https://github.com/stevengharris/MarkupEditor.git
   

2. 打开项目并构建 MarkupEditor 框架。
3. 将生成的 MarkupEditor.framework 添加到你的项目中。

使用示例

SwiftUI 示例

import SwiftUI
import MarkupEditor

struct SimplestContentView: View {
    @State private var demoHtml: String = "<h1>Hello World</h1>"

    var body: some View {
        MarkupEditorView(html: $demoHtml)
    }
}

UIKit 示例

import UIKit
import MarkupEditor

class SimplestViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let markupEditorUIView = MarkupEditorUIView(html: "<h1>Hello World</h1>")
        markupEditorUIView.frame = view.frame
        markupEditorUIView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(markupEditorUIView)
    }
}

3. 应用案例和最佳实践

应用场景

• 博客/笔记应用：允许用户轻松创建、编辑和格式化他们的内容。
• 文档编辑工具：在 iOS 或 macOS 应用中，提供类似 Microsoft Word 的功能，但保持简洁的界面。
• 表单填充：让用户能够以美观的方式填写有格式要求的文本字段。

最佳实践

• 自定义扩展：根据项目需求，扩展 MarkupEditor 的功能，以满足特定的富文本需求。
• 适配多平台：支持 iOS 15+ 和 Mac Catalyst 15+，确保在不同设备上的良好体验。
• 灵活的工具栏：根据应用的界面设计，选择简洁或带有标签的工具栏布局，还可以自定义内容。

4. 典型生态项目

相关项目

• RichEditorView：一个基于 UIWebView 的富文本编辑器，已被 MarkupEditor 取代。
• WKWebView：Apple 提供的 Web 视图组件，MarkupEditor 利用其进行 HTML 文档的渲染和编辑。

社区支持

• GitHub 社区：通过 GitHub 仓库参与讨论和贡献代码，地址为 https://github.com/stevengharris/MarkupEditor。
• 优快云 博客：查看中文社区的讨论和教程，地址为 https://blog.youkuaiyun.com/gitblog_00073/article/details/139210323。

通过以上步骤，你可以快速上手并集成 MarkupEditor 到你的 SwiftUI 或 UIKit 项目中，享受 WYSIWYG 编辑的便利。

MarkupEditor WYSIWYG editing for SwiftUI and UIKit apps 项目地址: https://gitcode.com/gh_mirrors/ma/MarkupEditor