How to Implement a WYSIWYG Editor in SwiftUI

Implement a rich text editor in your iOS application by combining UIKit and SwiftUI

Photo by Steve Harvey on Unsplash

Introduction

For my last SwiftUI project, I wanted to implement a WYSIWYG editor. I’ve started searching on the web and didn’t find a proper implementation for it on SwiftUI. Not even one that is accessible online!

So I decided to implement one of the strongest Rich Text Editor Libraries on UIKit using UIViewRepresentable on SwiftUI. Fortunately, it’s not hard to create custom wrappers for a UIView in SwiftUI.

The library I chose to work in was RichEditorView by Caesar Wirth. RichEditorView is a simple, modular, drop-in UIView subclass for Rich Text Editing.

I will skip the installation part — use the instructions in this link to install the library.

Step 1

First, let’s create an initial file named RichTextEditor.swift and implement the following code: