RichEditorView is a simple, modular, drop-in UIView subclass for Rich Text Editing.
Written in Swift 1.1 (Xcode 6.2). Swift 1.2 support is on the way!
Supports iOS 8 through Cocoapods, or iOS 7 by including the source in your project.
- Looking for Android? Check out wasabeef/richeditor-android
- 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
- Indent
- Outdent
- Insert Image
- Insert Link
- Text Color
- Text Background Color
Just clone open up RichEditorViewSample/RichEditorViewSample.xcworkspace
in Xcode.
If you have Cocoapods 0.36+ 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.
Just add everything in the RichEditorView
directory to your project.
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.setHTML("<h1>My Awesome Editor</h1>Now I am editing in <em>style.</em>")
self.view.addSubview(editor)
To change the styles of the currently selected text, you just call methods directly on the RichEditorView
:
editor.bold()
editor.italic()
editor.setTextColor(UIColor.redColor())
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: CGRectMake(0, 0, 320, 44))
toolbar.options = RichEditorOptions.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.redColor(),
UIColor.orangeColor(),
UIColor.yellowColor(),
UIColor.greenColor(),
UIColor.blueColor(),
UIColor.purpleColor()
]
let color = colors[Int(arc4random_uniform(UInt32(colors.count)))]
return color
}
func richEditorToolbarChangeTextColor(toolbar: RichEditorToolbar) {
let color = randomColor()
toolbar.editor?.setTextColor(color)
}
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?.setHTML("")
return
}
toolbar.options = [clearAllItem]
Caesar Wirth - cjwirth@gmail.com
@cjwirth- wasabeef/richeditor-android - Android version of this library (Apache v2)
- nnhubbard/ZSSRichTextEditor - Inspiration and Icons (MIT)
RichEditorView is released under the BSD 3-Clause License. See LICENSE.md for details.