IMPORTANT Notes for Updating to Swift 5

[YoomamaFTW]

Edit: I've created a new RichEditorView here: https://github.com/YoomamaFTW/RichEditorView that includes several new functionalities like checkbox and video (plus it's more friendly for offline vs. online server-based usage). It is NOT pod installable at the moment but the setup is pretty easy -- just copy and paste.

Important: There could still be some bugs within here. If you have anymore, @YoomamaFTW and I'll look into it. Please post it within THIS thread. This thread is dedicated to Swift 5 and 5.1 for updating RichEditorView.

Hi guys. I'm not sure if cjwirth is going to be updating this ever again. For Swift 5 support, use cbess's (link: https://github.com/cbess/RichEditorView/). I copied all of cbess's code rather than 'pod install' because you will need to change and add a few bits of code. To download, just download the zip and unzip it to find the package's code in RichEditorView. This is as of 11/28/2019 so happy thanksgiving to all the Americans. Anyways...

I recommend you create two groups/folders: Resources and RichEditorView. Afterwards, copy the classes into the RichEditorView folder and copy the "editor" files (i.e. the JS and HTML files) into the Resources folder. For the icons, I IMPORTed those into my Assets.xcassets (keyword is import (by right-clicking in Xcode).

Next, we need to change the following lines of code. Start with RichEditorView.swift.

1. The variable DefaultInnerLineHeight should be 28, not 21. This code should fix the VERTICAL scrolling issue. The horizontal scrolling issue is coming up.
2. We should add tap gestures. As a property, put this in the objcMember class:

private let tapRecognizer = UITapGestureRecognizer()
@objc private func viewWasTapped() {
    if !webView.isFirstResponder {
        let point = tapRecognizer.location(in: webView)
        focus(at: point)
    }
}

In the function setup, add this to the bottom:

tapRecognizer.addTarget(self, action: #selector(viewWasTapped))
tapRecognizer.delegate = self
addGestureRecognizer(tapRecognizer)

Great! Now let's go to your Resources folder.

1. In style.css, replace the code with the following:

@charset "UTF-8";

:root {
    color-scheme: light dark;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    overflow: auto;
    font: -apple-system-body;
}

body, h1, p, ul, ol {
    margin: 0;
}

div {
    display: block;
    position: static;
}

#editor {
    -webkit-user-select: auto !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#editor:focus {
    outline: 0px solid transparent;
}

@media (prefers-color-scheme: dark) {
    body, #editor {
    }
}

.placeholder[placeholder]:after {
    content: attr(placeholder);
    position: absolute;
    top: 0px;
    color: #cccccc;
}

#editor {
    min-height: 100%;
    height: 100%;
    overflow: auto;
    display: block;
    font-size: 12pt;
}

Props to @hansemannn for this code. Additionally, this code fixes the bug with word wrapping or the horizontal scrolling. 2. In rich_editor.js, you'll need to change the most crucial thing: RE Instead of RE being a const, it should be a var, like this: var RE = {}; This is the reason why none of the JS works properly; the WKWebBridge thing can't find a variable RE because there was no variable RE; it was a constant.

Don't worry about LICENSING. The nature of it is so that you don't redistribute it under your own name. However, if it's just for commercial use, you can just list it under a file giving credits to CJWirth.

Good luck! Again, here's the link to cbess's repo: https://github.com/cbess/RichEditorView/

[MHX792]

Can you maybe share an example project? Would be nice, thanks!

[MHX792]

I tried your suggestions and the text is really small in RichEditorView. Any clue why?

[YoomamaFTW]

@MHX792 Yeah, I'll make a new repository with a sample and the entire package by itself (expect it sometime this or next weekend). Not sure if I'll make a separate Pod and Carthage thing, though, since I'm not well-acquainted with front-end development. In addition, there are actually bugs (plenty to be frank) that come with CBess's (Note 1).

For now, can you post which simulator you used and the CSS files? It could have something to do with the font.

---

Important Notes

Note 1: CBess's repo has a weird bug in the runJS function. It has a lot to do with what's mentioned in Note 2, but in the end, the runJS function includes resultBool, resultInt, and resultStr. The problem is that the result seems to be fixed on a single output, that is the first thing that's there.

So although most of the functionality is OK, running your own JS such as document.getSelection().getRangeAt(0).toString() (which gets the selected value) WILL NOT WORK.

Note 2: I'm still modifying the final version for Swift 5.1. I recently saw that WKWebView finally has evaluateJavaScript but it doesn't return the same as UIWebView.stringEvaluateByJavaScript (the latter returns a string while the first return Void).

Note 3: I'm editing the RE.insertLink functionality, as well, to something more like Google Doc or Reddit's using UIAlertController.

[MHX792]

@YoomamaFTW thanks, I tested the image insert functionality with CBess's version with a picked image from the library (UIImagePickerController). While the image is inserted in the simulator, only a white box is visible on a real device where the alt text is visible.

Do you also face this issue?

[YoomamaFTW]

@MHX792 Ah, I took all of CBess's code thinking Pod install would work. It didn't for me, or at least a certain functionality was causing the entire thing to mess up. So I eventually refactored the code to be more compatible. Again, I rewrote a little bit of the code and will publish a repo on the weekend... hopefully.

[MHX792]

@YoomamaFTW also CBess's version only works with iOS 13. At least in the simulator. Can you confirm this? I don't have a <iOS 13 iPhone.

[YoomamaFTW]

@MHX792 I can confirm that the toolbar went through a bunch of errors (at least in my code) for an iPhone 6 on iOS 12.4. Otherwise, the editor works fine if you use cmd+B for bold and etc. I will try to debug it for you, but I'm not sure if I will add it to my repo, which you can now find here: YoomamaFTW/RichEditorView