RichEditorView is a simple, modular, drop-in UIView subclass for Rich Text Editing.

Related tags

Text RichEditorView
Overview

RichEditorView

License: BSD 3 Cocoapods Carthage compatible

RichEditorView is a simple, modular, drop-in UIView subclass for Rich Text Editing.

Written in Swift 4

Supports iOS 8+ through Cocoapods or Carthage.

Seen in Action

Demo

Just clone the project and open RichEditorViewSample/RichEditorViewSample.xcworkspace in Xcode.

Features

Toolbar Demo

  • Bold
  • Italic
  • Subscript
  • Superscript
  • Strikethrough
  • Underline
  • Justify Left
  • Justify Center
  • Justify Right
  • Heading 1
  • Heading 2
  • Heading 3
  • Heading 4
  • Heading 5
  • Heading 6
  • Undo
  • Redo
  • Ordered List
  • Unordered List
  • Indent
  • Outdent
  • Insert Image
  • Insert Link
  • Text Color
  • Text Background Color

Installation

Cocoapods

If you have Cocoapods installed, you can use Cocoapods to include RichEditorView into your project. Add the following to your Podfile:

pod "RichEditorView"
use_frameworks!

Note: the use_frameworks! is required for pods made in Swift.

Carthage

Add the following to your Cartfile:

github 'cjwirth/RichEditorView'

Using RichEditorView

RichEditorView makes no assumptions about how you want to use it in your app. It is a plain UIView subclass, so you are free to use it wherever, however you want.

Most basic use:

editor = RichEditorView(frame: self.view.bounds)
editor.html = "<h1>My Awesome Editor</h1>Now I am editing in <em>style.</em>"
self.view.addSubview(editor)

Editing Text

To change the styles of the currently selected text, you just call methods directly on the RichEditorView:

editor.bold()
editor.italic()
editor.setTextColor(.red)

If you want to show the editing toolbar RichEditorToolbar, you will need to handle displaying it (KeyboardManager.swift in the sample project is a good start). But configuring it is as easy as telling it which options you want to enable, and telling it which RichEditorView to work on.

let toolbar = RichEditorToolbar(frame: CGRect(x: 0, y: 0, width: 320, height: 44))
toolbar.options = RichEditorDefaultOption.all
toolbar.editor = editor // Previously instantiated RichEditorView

Some actions require user feedback (such as select an image, choose a color, etc). In this cases you can conform to the RichEditorToolbarDelegate and react to these actions, and maybe display some custom UI. For example, from the sample project, we just select a random color:

private func randomColor() -> UIColor {
    let colors: [UIColor] = [
        .red, .orange, .yellow,
        .green, .blue, .purple
    ]

    let color = colors[Int(arc4random_uniform(UInt32(colors.count)))]
    return color
}

func richEditorToolbarChangeTextColor(toolbar: RichEditorToolbar) {
    let color = randomColor()
    toolbar.editor?.setTextColor(color)
}

Advanced Editing

If you need even more flexibility with your options, you can add completely custom actions, by either making an object that conforms the the RichEditorOption protocol, or configuring a RichEditorOptionItem object, and adding it to the toolbar's options:

let clearAllItem = RichEditorOptionItem(image: UIImage(named: "clear"), title: "Clear") { toolbar in
    toolbar?.editor?.html = ""
    return
}
toolbar.options = [clearAllItem]

Author

Caesar Wirth - [email protected]

@cjwirth on Twitter @cjwirth

Acknowledgements

License

RichEditorView is released under the BSD 3-Clause License. See LICENSE.md for details.

Comments
  • Scroll cursor back into view when it goes out of bounds

    Scroll cursor back into view when it goes out of bounds

    Fix #3

    • Add JS method to calculate the caret position within the RichEditorView
    • Set scrollView contentSize.height based on html content height
    • Change scrollView's contentOffset if caret is outside of RichEditorView's bounds
    opened by jesiegel1 35
  • Implement the getSelectedHref method

    Implement the getSelectedHref method

    To add a bit of context, you want a method like this if you select an existing link in your richtext editor and want to edit it. This method allows us to pre-fill out the textfield in the "edit link" view controller.

    opened by mfrawley 17
  • run the RichEditorViewSample ,but not working to the simulator

    run the RichEditorViewSample ,but not working to the simulator

    1.run the RichEditorViewSample ,but not working to the simulator 2.I writed the same codes as your RichEditorViewSample in swift ,but i got a error where focus on "editorView.delegate = self " can you tell me the reasons? thanks

    opened by Gavinhhy 13
  • Find new way to hide default keyboard toolbar

    Find new way to hide default keyboard toolbar

    The relatively common technique of hiding UIWebView's input accessory view that we are using in CJWWebView+HackishAccessoryHiding.m is most definitely a horrible piece of code. Not only that but recently it has been getting apps rejected from the app store which is an outcome nobody wants.

    Look into seeing if there is a better way to hide and/or cover up the input accessory view. Maybe this means upgrading to WKWebView, I don't really know.

    This is a bad, brittle, dangerous piece of code, and I would really like to get it out of the codebase.

    enhancement 
    opened by cjwirth 12
  • editor view's web view doesn't retrieve image file from Documents folder

    editor view's web view doesn't retrieve image file from Documents folder

    Hi, this might not be directly related to this framework, but maybe someone can give me a hint to the right direction to take for solving this problem.

    When I try to insert an image like so: toolbar.editor!.insertImage(fileURL.absoluteString, alt: "new image")

    all works fine.

    The image data is written to a file in the documents folder and then the refreshed html contains the image tag with the image path.

    However, after I stop the simulator and restart it, the image can't be loaded into the html of the editor's web view properly.

    See the screenshots below. The image tag in the html looks like this image

    I have checked in the finder that the file is there... it has been saved indeed. doesn't matter if I convert the ui image to jpg or to png. The weird thing is that when creating the the file, the web view has to update as well and retrieve the file from the documents folder. Otherwise it wouldn't show.... the html string is properly retrieved from core data, otherwise there would not be any text with html text attributes.

    screen shot 2016-05-13 at 17 10 06

    screen shot 2016-05-13 at 17 08 37

    opened by DominikButz 11
  • Toolbar isn't a proper accessory

    Toolbar isn't a proper accessory

    Since the RichEditorToolbar isn't an accessory view to UIWebView (a really annoying problem; "Hacking Accessory Hiding" reference), the toolbar will overlap onto the editing view.

    enhancement 
    opened by AWDerh 9
  • Editor does not scroll when cursor is placed offscreen

    Editor does not scroll when cursor is placed offscreen

    When the cursor goes offscreen, and/or when text is typed offscreen, the editor does not move. This doesn't seem like an easy one to solve because of the difficulty of interfacing between the view and the HTML, but wanted to open this to think about potential solutions.

    scroll

    opened by markbao 8
  • Strange `underline`

    Strange `underline`

    https://www.dropbox.com/s/x743tqtm3yfobec/UnderLine.mov?dl=0

    When I set/unset underline editor strange.

    I input Underline(1st line) after click underline. And tried unset underline and input new line (2nd line). At that time editor insert line breaks without return key.

    bug 
    opened by Ying1986 7
  • When i  run the sample,it got errors from the keyboardManager ,i am not good at swift ,how should i tackle with it ?

    When i run the sample,it got errors from the keyboardManager ,i am not good at swift ,how should i tackle with it ?

    NSNotificationCenter.defaultCenter().addObserver(self, selector: #selector(KeyboardManager.keyboardWillShowOrHide(_:)), name: UIKeyboardWillShowNotification, object: nil)

    error: missing argument for parameter 'selector' in call

    opened by KKKiller 7
  • Focus RichEditorView when view is tapped

    Focus RichEditorView when view is tapped

    How can I take a focus when I click on the REV window? For now, I can write to REV input view only if I click on the first row. I want to take a focus (start writing) after I click anywhere on the input view of REV.

    Thanks for help.

    enhancement 
    opened by Jirka1111 7
  • Subscript/superscript buttons do not remove formatting when calling it again

    Subscript/superscript buttons do not remove formatting when calling it again

    Problem can be solved by removing in normalize.css these lines:

    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    
    opened by romanilchyshyn 6
  • Do we have Mentions Support?

    Do we have Mentions Support?

    As i checked, i didn't found the mentions support in the editor. It is an essential feature when we deal with any editor. It would be great if some one could include this feature too. Or guide how to integrate this one with RichTextEditor

    opened by vchaubey-ontic 0
  • Not having IQKeyboard Manager Support

    Not having IQKeyboard Manager Support

    I have already installed IQKeyboard manager into my podfile, and when I'm using this pod in my app. The screen is not moving up for the text field to be visible when the textfield is moved to focus state. When I'm trying to do manually using UIResponder.keyboardwillshownotification, I'm getting layout issues. Can anyone suggest me a method to resolve the either of the issues. As you can see the textfield is not visible in the second picture

    Simulator Screen Shot - iPad Pro (9 7-inch) - 2022-09-16 at 13 06 26 Simulator Screen Shot - iPad Pro (9 7-inch) - 2022-09-16 at 13 06 31

    opened by Rithik3690 0
  • editorview Y is offset  when content more large

    editorview Y is offset when content more large

    62621625404593_  #pic_hd

    The height of the textview on the surface layer is lengthened with the increase of the content. However, editorview is the actual height of the red part. Then the entire textview on the surface layer can be moved, and its Y axis will also change to block the view on it. Is there any good solution

    opened by ljssafe 2
Releases(4.0.0)
  • 4.0.0(Jun 17, 2017)

    This is the official Swift 3 release, right in time for Swift 4! While the swift-3 branch, and the master branch have been on Swift 3 for a while, it seemed like a good time to release this.

    There are a number of API changes that were made to make the API more Swifty (hopefully).

    Source code(tar.gz)
    Source code(zip)
  • 2.0.1(Oct 5, 2015)

    Very small update, with some very nice changes.

    Getters are now publicly available for the following properties on RichEditorView:

    • webView
    • placeholder
    • editorHeight
    • contentHTML
    Source code(tar.gz)
    Source code(zip)
  • 2.0.0(Sep 17, 2015)

    Since Swift 2.0 is a breaking update to Swift 1.2, this is a breaking update from 1.2.0. Interesting how the versions matched up :smirk:

    Most of the breaking changes are due to the language itself, but here are some changes that actually happened to the API:

    • Input Accessory View - Now you can set your own UIView to be the inputAccessoryView -- easier toolbar management.
    • Better Obj-C Support - While not complete (need more work with RichToolbarOption), Objetive-C support has been improved
    • Better Delegate Methods - OK just one :bowtie: richEditorShouldInteractWithURL: has been renamed richEditor:shouldInteractWithURL so you get a reference to the editor, to make it consistent with the other methods.
    Source code(tar.gz)
    Source code(zip)
Owner
Caesar Wirth
Caesar Wirth
Powerful text framework for iOS to display and edit rich text.

YYText Powerful text framework for iOS to display and edit rich text. (It's a component of YYKit) Features UILabel and UITextView API compatible High

null 8.8k Jan 4, 2023
A standalone, flexible API that provides a full-featured rich text editor for iOS applications.

Twitter Text Editor A standalone, flexible API that provides a full featured rich text editor for iOS applications. This provides a robust text attrib

Twitter 2.8k Dec 29, 2022
A rich-text editor for iOS

DTRichTextEditor This project aims to provide a replacement for Apple's severely limited UITextView and to allow for editing attributed strings. It co

Cocoanetics 346 Oct 8, 2022
A beautiful rich text WYSIWYG editor for iOS with a syntax highlighted source view

ZSSRichTextEditor The Editor ZSSRichTextEditor is a beautiful Rich Text WYSIWYG Editor for iOS. It includes all of the standard editor tools one would

Nic Hubbard 3.7k Dec 31, 2022
Convert text with HTML tags, links, hashtags, mentions into NSAttributedString. Make them clickable with UILabel drop-in replacement.

Atributika is an easy and painless way to build NSAttributedString. It is able to detect HTML-like tags, links, phone numbers, hashtags, any regex or

Pavel Sharanda 1.1k Jan 8, 2023
An iOS app to turn typed text into images of handwritten text in your own handwriting style.

Text-to-Handwritting © 2021 by Daniel Christopher Long An iOS app to turn typed text into images of handwritten text in your own handwriting style. ht

Daniel Long 11 Dec 29, 2022
Twitter Text Libraries. This code is used at Twitter to tokenize and parse text to meet the expectations for what can be used on the platform.

twitter-text This repository is a collection of libraries and conformance tests to standardize parsing of Tweet text. It synchronizes development, tes

Twitter 2.9k Dec 27, 2022
Swift String Validator. Simple lib for ios to validate string and UITextFields text for some criterias

Swift String validator About Library for easy and fastest string validation based on сciterias. Instalation KKStringValidator is available through Coc

Kostya 17 Dec 21, 2019
Fully open source text editor for iOS written in Swift.

Edhita Fully open source text editor for iOS written in Swift. http://edhita.bornneet.com/ What Edhita means? Edhita (Romaji) == エディタ (Katakana) == Ed

Tatsuya Tobioka 1.2k Jan 1, 2023
Like a SwiftUI ViewBuilder, but for Text

TextBuilder Introduction Text composition in SwiftUI can often be cumbersome, especially when there's logic affecting its format and content. TextBuil

David Roman 180 Dec 26, 2022
Get any text on your screen into your clipboard.

macOCR macOCR is a command line app that enables you to turn any text on your screen into text on your clipboard. When you envoke the ocr command, a "

Marcus S 1.9k Dec 29, 2022
A lightning fast, native SwiftUI scratchpad/text editor.

Sedit A lightning fast, native SwiftUI scratchpad/text editor. Sedit (Swift Edit, as in the language and as in fast) is a lightning fast basic text ed

null 5 Jan 28, 2022
Automatic summarizer text in Swift

Overview Reductio is a tool used to extract keywords and phrases using an implementation of the algorithm TextRank. Installation Swift Package Manager

Sergio Fernández 438 Dec 9, 2022
Magnifying glass for text fields

Loupe Magnifying glass for text fields. Apple removed the maginifying glass when selecting texts since iOS 13, this tweak will brings it back. Compati

null 9 Dec 24, 2022
More powerful label, attributed string builder and text parser.

DDText More powerful label, attributed string builder and text parser. DDLabel More powerful label than UILabel, using TextKit. It supports features b

Daniel 16 Nov 8, 2022
Acčento is an easy-to-use tool for adding Czech diacritics to copied text.

Acčento is an easy-to-use tool for adding Czech diacritics to copied text. The app lives in the menu bar and is activated using a global hot key.

Matty Cross 3 Sep 16, 2021
A small utility to paste text to the clipboard on a jailbroken iPhone

pbpaste allows you to paste text from your iPhone's terminal app to the clipboard. How to use pbpaste Download the file in the binary folder. Copy the

Jay 2 Sep 22, 2021
Paranoid text spacing in Objective-C

Pangu.objective-c Paranoid text spacing for good readability, to automatically insert whitespace between CJK (Chinese, Japanese, Korean), half-width E

Tianyu Wang 110 Mar 10, 2021
Lightweight library to set an Image as text background. Written in swift.

![](https://img.shields.io/badge/Swift 2-compatible-4BC51D.svg?style=flat-square) Simple and light weight UIView that animate text with an image. Demo

Lucas Ortis 552 Sep 9, 2022