Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Infomaniak/swift-rich-html-editor
A WYSIWYG text editor written in Swift for iOS/macOS/visionOS. Available for SwiftUI, UIKit and AppKit. Based on HTML contenteditable. Used in the Infomaniak Mail application.
https://github.com/Infomaniak/swift-rich-html-editor
appkit ios ipados macos rich-text-editor swiftui uikit visionos
Last synced: about 2 months ago
JSON representation
A WYSIWYG text editor written in Swift for iOS/macOS/visionOS. Available for SwiftUI, UIKit and AppKit. Based on HTML contenteditable. Used in the Infomaniak Mail application.
- Host: GitHub
- URL: https://github.com/Infomaniak/swift-rich-html-editor
- Owner: Infomaniak
- License: apache-2.0
- Created: 2024-04-03T14:44:20.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-18T08:52:54.000Z (2 months ago)
- Last Synced: 2024-07-18T10:20:50.687Z (2 months ago)
- Topics: appkit, ios, ipados, macos, rich-text-editor, swiftui, uikit, visionos
- Language: Swift
- Homepage:
- Size: 1.74 MB
- Stars: 15
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Infomaniak Rich HTML Editor
[](https://swiftpackageindex.com/Infomaniak/swift-rich-html-editor)
[](https://swiftpackageindex.com/Infomaniak/swift-rich-html-editor)
The **Infomaniak Rich HTML Editor** is a powerful Swift package designed to provide a seamless WYSIWYG (What You See Is What You Get) text editing experience across iOS, macOS, and visionOS platforms. Leveraging the power of the `contenteditable` HTML attribute, this editor allows you to effortlessly edit HTML content.
Built with **UIKit** and **AppKit** thanks to WebKit, it also includes a **SwiftUI** port, making it easy to integrate into modern Swift apps.
## ✍️ About
### Features
- **HTML Content Editing**: Full support for viewing and editing HTML content directly.
- **Wide range of commands**: Many commands are available to format text, from simple commands like bold to more advanced ones like link creation.
- **Cross-Platform Support:** Compatible with iOS, macOS, and visionOS.
- **SwiftUI API**: A dedicated port for SwiftUI, ensuring modern and declarative UI design compatibility.
### Installation
You can install the package via Swift Package Manager. Add the following line to your Package.swift file:
```swift
.package(url: "https://github.com/Infomaniak/swift-rich-html-editor.git", from: "1.0.0")
```
### Usage
#### UIKit and AppKit
You can create the editor view and then add it to the view hierarchy.
```swift
import InfomaniakRichHTMLEditor
import UIKit
let editor = RichHTMLEditorView()
view.addSubview(editor)
```
To respond to editor's events, you can conform to `RichHTMLEditorViewDelegate`.
#### SwiftUI
The SwiftUI view is called `RichHTMLEditor` and takes two arguments:
- `html: Binding` the HTML content of the editor
- `textAttributes: TextAttributes` the objects that contains the current state selected text (or the text at the insertion point) and is responsible to update the style
```swift
import InfomaniakRichHTMLEditor
import SwiftUI
struct ContentView: View {
@State private var html = ""
@StateObject private var textAttributes = TextAttributes()
var body: some View {
RichHTMLEditor(html: $html, textAttributes: textAttributes)
}
}
```
The object `TextAttributes` contains various attributes about the current style of the selected text. Theses properties are read-only and are automatically updated by the editor.
To update the style, you should call the corresponding functions such as `bold()`.
Many modifiers are available to customize the editor and respond to editor's events.
Here is a non-exhaustive list of modifiers:
```swift
RichHTMLEditor(html: $html, textAttributes: textAttributes)
.editorScrollable(true)
.editorInputAccessoryView(myToolbarView)
.editorCSS("h1 { foreground-color: red; }")
.onEditorLoaded {
// Perform action when editor is loaded
}
.onCaretPositionChange { newPosition in
// Perform action when caret moves
}
.onJavaScriptFunctionFail { error, function in
// Perform action when an editor JavaScript function has failed
}
.introspectEditor { richEditorView in
// Perform action on the editor (UI|NS)View
}
```
### Customize the editor
You can customize the editor with CSS.
To target the editor, you should use the `#swift-rich-html-editor` selector.
For example:
```css
#swift-rich-html-editor {
padding: 16px;
}
```
## 📖 Documentation
Public types are documented, and three sample projects are available to help you implement the editor.
## 🔍 Sample Projects
You can find 3 sample projects in the [Examples](Examples) folder:
- A [project built with UIKit](Examples/Example%20iOS/) for iOS
- A [project built with AppKi](Examples/Example%20macOS/) for macOS
- A [project built with SwiftUI](Examples/Example%20SwiftUI/) for iOS/macOS/visionOS
## 📱 Apps using InfomaniakRichHTMLEditor
[Infomaniak Mail](https://github.com/Infomaniak/ios-kMail) allows you to manage your Infomaniak addresses in a completely secure environment.