Git Product home page Git Product logo

richeditorview's Introduction

RichEditorView

This is the Swift 5 version of cjwirth/RichEditorView using WKWebView that added several awesome functionalities.

Table of Contents:

  • Usage Instructions
  • Added Features
  • Credits and License

Usage Instructions:

You can use SPM to install this package. If you're using Pods or Carthage, since I haven't created a package for those yet, you'll need to do this manually.

  1. In order to import the RichEditorView package, you need to create a new group/folder by going to the bottom left of XCode and clicking on the + button. Create a new group called RichEditorView.
  2. Then, manually create new files and copy and paste accordingly from the RichEditorView directory in the source code. There is currently no plan to go to CocoaPods or Carthage or any other package manager.
  3. For resources, if you download this repository via ZIP and then unzip the file, you can right click on YOUR newly created Resources directory and selecting "Add Files to" then select the Resource files from the unzipped package. DO NOT USE Assets!!!

Added Features:

Most features are the same from the parent repo, but I have added some other functionalities and some directions in the sample. Other features can be found in cjwirth's repo.

The following edited features assumes you have a property let editorView = RichEditorView()

  1. You can get selected text by doing editorView.getSelectedText
  2. runJS and other functions in the RichEditorView does NOT work like cjwirth's. This is due to the JavaScript bridging for WKWebView; unlike WK, UIWebView had a string be returned. In order to run JavaScript and other functionalities return Void, you must do the following:
editorView.getSelectedText() { r in
    // r is just a variable.
}

or

editorView.runJS("document.getElementById('editor')") { r in 
    print(r)
}

NOTE That these might run asynchronously. This might be due to WKWebView's memory efficiency feature. Don't quote me on that though, since I'm not too sure if that's true. Just an observation. This is because the function is: public func getSelectedText(handler: @escaping (String) -> Void). Notice the (String) -> Void. The variable r is the string value returned by JavaScript.

  1. The insertLink functionality has also changed. Normal tags in HTML are layed out like this: <a href="https://github.com/" title="GitHub">The TEXT that user sees</a>. When you insert a link, the following arguments are required: href and text. If there is a range selection, the text in the range selection will be cleared!
  2. Dark mode is included via the CSS and HTML files.

Credits and License

License is under BSD-3 Clause

cjwirth - Original iOS-RichEditorView Creator

C. Bess - WKWebView Support

YoomamaFTW - Repository Maintainer

Andrew-Chen-Wang - Repository Maintainer

richeditorview's People

Contributors

andrew-chen-wang avatar leeonardoo avatar yoomamaftw avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

richeditorview's Issues

Checkbox does not persist state and isnt very responsive

Hi there - thanks for the package - I really want this to work for my use case but I'm having some trouble with the checkbox.

I've noticed that tapping on it isnt very responsive (specially in edit mode) and whenever I change anything about it (the text or stop/start edits) the value gets reset...

Thanks in adance.

Adding your RichEditorView group has issues building

In RichEditorOptionItem Line 162:
Value of type 'RichEditorView' has no member 'checkbox'

In RichEditorView
Line 358:
Use of unresolved identifier 'offline'
Line 360:
Use of unresolved identifier 'vidURL'
Line 400:
Expression of type 'String' is unused
Line 406:
Invalid redeclaration of 'addRowToTable()'

How to set caret at specific location

I want to support email-compose kind of view so that when you forward or reply on existing email, it shows previous content bellow, setting the cursor at the top of the RichEditorView.

However, I'm not sure how to achieve that. Is it possible to set a caret cursor at specified location in RichEditorView?

Handle Keyboard..

Thanks for awesome library..
I am using this project with IQKeyboardManager
I want to hide keyboard after finishing input text and image, etc..
But I can not see done option in keyboard toolbar..
Need your assist. Thanks.

Handle URL Click in the editor

Hi,
I was able to insert link in the editor. But couldn't implement autolink action on it, making the link clickable. It seems that there was no callback triggered while we click on the URL from js file. Any workarounds for this?. I hope you will found a suitable solution for this issue.

Videos

I'm thinking about making video functionality available as well using video.js.

Here are some potential concerns:

  1. Asynchronosity. Actually, this might just be my issue since I don't know much about JS, but while using video.js's main website's demo, I saw how they have the buffer and the async functionality. We need to somehow implement that to avoid 1GB base64 encoded videos being synchronously loaded from a server
  2. Sending the video to a server. I imagine that RichEditorView is meant for apps that also have backends, so I strongly encourage us to figure out how to implement base64 encoded media, store it in something like an array, and allow for its upload to a server by offering another functionality.
    • And then in that case, when the server receives the HTML, it will also need to receive the additional base64 encoded data (that is the media e.g. images and videos) for processing such as uploading to S3 and having a file size limit.
    • A potential method is adding a swift function and a JS array for interaction.
    • Another potential method is to store the base64 encoded data inside their respective video or img tags, and then the server has to deal with grabbing the base64 encoded data. (Btw, encoding the data on the frontend is not enough. Always base64 encode the data on the backend as well)
  3. Sending an HTML tag with the video player from video.js will mean we also have to strip the tags... but that should be relatively easy

Editor Background Color

Hi How to change whole editor view background color or set clear color? Initial placeholder I have 2 lines but its change color on first line only using this editorView.setEditorBackgroundColor(UIColor.red)
Just Attached ex screenshot.
Simulator Screen Shot - iPhone 8 Plus - 2024-08-03 at 11 45 02

Cocoapods and Sample Project

The current sample project is a copy pasta like the rest of this repo. In the future, I'd like to get started with cocoa pods and stuff, but a main concern of mine is the sample project. I'd like for it to... well work out of the box with an Xcode project. Since I'm not linking my name anywhere, would someone mind creating all the necessary xcodeproj and the package dependencies?

Bold text copy-paste

Hi!
Experiencing an issue with bold text copying and pasting. After pasting of copied text 'b' tag in RE.editor.innerHTML is missing and text is not bold anymore. But tag is being copied: you can paste text in Apple Notes and it will render as bold.
Will appreciate any suggestions how to fix this.

Error: Type 'Bundle' has no member 'module'

Error in line
if let filePath = Bundle.module.url(forResource: "rich_editor", withExtension: "html") { webView.loadFileURL(filePath, allowingReadAccessTo: filePath.deletingLastPathComponent()) }

in RichEditorView Line 157.

Migration to Input Events Level 2

Due to the deprecation of execCommand, we need a plan to migrate to Input Events Level 2.

This affects all repositories using the current Wasabeef original JS files. Several WSYIWYG editors use execCommand, and many are hesitant to actually migrate yet due to input events not being finalized yet. Because I'm kinda busy, I'm looking for any helpers to get started in case execCommand is suddenly dropped from Safari breaking anyone who upgrades their iOS.


I mentioned this in the Android sister repo awhile ago, but no response. We're on our own :P Edit: I see why now too, ish:

from the main GitHub repo from W3 https://github.com/w3c/input-events/

Level 1 has two implementations (Chrome and Safari) and level 2 has one (Safari). Level 2 corresponds to the consensus reached within the Editing Taskforce at the end of 2016. Level 1 is a subset that was split off in early 2017, when the Chromium team announced that it would not implement the entire specifition. At this time Safari had already implemented the full specification. We also did not want to give up level 2 of the spec, because it actually resolves a lot of issues and there has been no counter-proposal to effectively solve these issues from the Android team or others. Given that Chromium team told the Editing Taskforce that it either had to release a spec with their proposed changes or they would drop the spec entirely, it was decided to split the specification in two levels.

In other words, our implementations will also be somewhat different.

Toggling Header Styles

How can we make the headers to toggle like the bold,italics meaning how to remove heading when clicked for second time.
The header/size buttons should also be a toggle; doesn’t allow to toggle back to default size.

How to get current applied formats?

When a user taps "Return" without entering a value, the unordered list format should automatically deselect. However, there isn't a decisive variable or method to determine the current selected format, posing a challenge in altering the UI accordingly.

PFA Video.

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-08-28.at.14.49.47.mp4
 public func unorderedList() {
      runJS("RE.setUnorderedList();")
 }

Hyperlink is not being created

Hyperlink is not being created when we are adding the hyperlink in the last word but when we are adding a space or some words then it is being created.

becomeFirstResponder or focus not working

Hi :) On simulator here on 14.5, i can't get working becomeFirstResponder or focus method. It's working fine with finger tap, showing the keyboard, but programmatically never.

I'm using it inside tableview cell, and try to add a new cell, then show the focus directly, and it's never fired. Look like the method in js is called (with breakpoints) but never get the focus in the simulator.

Any idea or same reaction ? thx !

Checkbox - Making REView a replacement for Notes app

I'm going to aim to make RichEditorView to be as similar as the iOS notes app as possible. The first step in this process is the checkbox. In the future, I will add some more like tables and create a sister project that will show how I do encryption (currently using third party, but I'd like to just make one myself).

Server Implementation

There needs to be a better way for having server implementation that can cooperate with img and video uploads. Most servers will not be sending base64 encoded img and videos inside their tags, so, instead, the JS should strip the base64 encoded data from the img tags, give them an id (e.g. 0, 1, 2) which will coincide with an array in the JS that a Swift function can access when a required function is called.

We must also be able to offer users the option of saving the base64 inside the HTML instead of stripping it away, in case a user of this package is using this for offline use, as well.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.