A beautiful rich text WYSIWYG editor for iOS with a syntax highlighted source view

Last update: Jun 25, 2022

ZSSRichTextEditor

The Editor

ZSSRichTextEditor is a beautiful Rich Text WYSIWYG Editor for iOS. It includes all of the standard editor tools one would expect from a WYSIWYG editor as well as an amazing source view with syntax highlighting.

toolbar

The editor is used how any other text input area in iOS is used. A selection of text or content is made, then tapping on the toolbar item below will apply that style. A Source View is also included, you can make changes and this will be reflected in the editor preview.

editor

Colors

We wanted to have a really beautiful color picker to make changing colors really simple. So, we used the open-source HRColorPicker which was exactly what we were looking for. Choosing colors for text or background is simple and seamless.

colors

How It Works

Just subclass ZSSRichTextEditor and use the following:

// HTML Content to set in the editor
NSString *html = @"<!-- This is an HTML comment -->"
"<p>This is a test of the <strong>ZSSRichTextEditor</strong> by <a title=\"Zed Said\" href=\"http://www.zedsaid.com\">Zed Said Studio</a></p>";

// Set the base URL if you would like to use relative links, such as to images.
self.baseURL = [NSURL URLWithString:@"http://www.zedsaid.com"];

// If you want to pretty print HTML within the source view.
self.formatHTML = YES;

// set the initial HTML for the editor
[self setHTML:html];

If you want to retrieve the HTML from the editor:

// Returns an NSString
[self getHTML];

Insert HTML at the current caret position:

NSString *html = @"<strong>I love cats!</strong>";
[self insertHTML:html];

Change the tint color of the toolbar buttons:

// Set the toolbar item color
self.toolbarItemTintColor = [UIColor greenColor];

// Set the toolbar selected color
self.toolbarItemSelectedTintColor = [UIColor redColor];

Show only specified buttons in the toolbar:

self.enabledToolbarItems = @[ZSSRichTextEditorToolbarBold, ZSSRichTextEditorToolbarH1, ZSSRichTextEditorToolbarParagraph];

Always show the toolbar even when the keyboard is hidden:

self.alwaysShowToolbar = YES;

Set A Placeholder

[self setPlaceholder:@"This is a placeholder that will show when there is no content(html)"];

Insert Link and Insert Image

If you want to manually insert a link or image where the cursor is, you can use the following methods:

Insert Image

- (void)insertImage:(NSString *)url alt:(NSString *)alt;

Insert Link

- (void)insertLink:(NSString *)url title:(NSString *)title;

Custom Pickers

You can implement your own pickers for images and links if you have an alternate method that you are wanting to use. E.g., uploading an image from your camera roll then inserting the URL.

When the alternate picker icon (crosshair) is tapped it will call the corresponding method, which you need to override in your ZSSRichTextEditor subclass (see example project):

- (void)showInsertURLAlternatePicker {
    
    [self dismissAlertView];
    
    // Show your custom picker
    
}


- (void)showInsertImageAlternatePicker {
    
    [self dismissAlertView];
    
    // Show your custom picker
    
}

Custom Toolbar Buttons

UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f, buttonWidth, 28.0f)];
[myButton setTitle:@"My Button" forState:UIControlStateNormal];
[myButton addTarget:self
             action:@selector(didTapCustomToolbarButton:)
   forControlEvents:UIControlEventTouchUpInside];

[self addCustomToolbarItemWithButton:myButton];

Custom CSS

NSString *customCSS = @"a {text-decoration:none;} a:hover {color:#FF0000;}";
[self setCSS:customCSS];

Receive Editor Did Change Events

Add the following to your viewDidLoad method:

self.receiveEditorDidChangeEvents = YES;

Then you will receive events in the following method:

- (void)editorDidChangeWithText:(NSString *)text andHTML:(NSString *)html {
    
    NSLog(@"Text Has Changed: %@", text);
    
    NSLog(@"HTML Has Changed: %@", html);
    
}

Receive Hashtag & Mention Events

Hashtags:

- (void)hashtagRecognizedWithWord:(NSString *)word {
    
    NSLog(@"Hashtag has been recognized: %@", word);
    
}

Mentions:

- (void)mentionRecognizedWithWord:(NSString *)word {
    
    NSLog(@"Mention has been recognized: %@", word);
    
}

Supported Functions

ZSSRichTextEditor has the following functions:

  • Bold
  • Italic
  • Subscript
  • Superscript
  • Strikethrough
  • Underline
  • Remove Formatting
  • Font
  • Justify Left
  • Justify Center
  • Justify Right
  • Justify Full
  • Paragraph
  • Heading 1
  • Heading 2
  • Heading 3
  • Heading 4
  • Heading 5
  • Heading 6
  • Undo
  • Redo
  • Unordered List
  • Ordered List
  • Indent
  • Outdent
  • Insert Image
  • Insert Link
  • Quick Link
  • Unlink
  • Horizontal Rule
  • View Source
  • Text Color
  • Background Color

Installation

You can use CocoaPods or manually using the following instructions:

ZSSRichTextEditor requires iOS7 as well as CoreGraphics.framework and CoreText.framework.

  • Copy the Source folder to your project.
  • Subclass ZSSRichTextEditor and implement the methods as mentioned above.

When using ZSSRichTextEditor in your own project, XCode will automatically add ZSSRichTextEditor.js to compile sources under build phases, this will cause ZSSRichTextEditor to not work correctly as the javascript file won't be included in your app. Instead, remove it from compile sources and add it to copy bundle resources.

Attribution

ZSSRichTextEditor uses portions of code from the following sources:

Component Description License
CYRTextView CYRTextView is a UITextView subclass that implements a variety of features that are relevant to a syntax or code text view. MIT
HRColorPicker Simple color picker for iPhone BSD
jQuery jQuery is a fast, small, and feature-rich JavaScript library. MIT
JS Beautifier Makes ugly Javascript pretty MIT

Contact

Visit us online at http://www.zedsaid.com or @zedsaid.

GitHub

https://github.com/nnhubbard/ZSSRichTextEditor
Comments
  • 1. iOS 8 support

    Thanks for this fantastic editor! I have been playing with it and found that on iOS 8 beta 5, the keyboard behavior(show / hide) and the toolbar behavior (sliding) are buggy. The keyboard hides but never comes back up, and the toolbar does not slide at all.

    Reviewed by navisingh at 2014-08-13 18:12
  • 2. 0.5.2.1: The Keyboard Appears, Disappears and Appears Again

    Reproduction Steps:

    • Start the example project on iOS 8 iPhone 6 and open the "Large" example
    • Dismiss the keyboard
    • Tap into the text area
    • => The keyboard appears, and disappears again immediately. Sometimes it appears again afterwards

    This behavior is new since 0.5.2.1

    Reviewed by fabb at 2014-11-26 10:25
  • 3. Not able to insert link

    I am entering the "url" and the ''title'', but it does not show up. I checked it is going inside the functions as told, but nothing comes up on screen. Help required asap. Thanks

    Reviewed by ankitgupta1309 at 2014-09-16 06:55
  • 4. How to get html text with font?

    I'm using [self getHTML] of ZSSRichTextEditor to get html string. Its works great. But now at point, I need to set font for the same text and to get html text belonging to that particular font. Is it possible? Any luck?

    Reviewed by hagile at 2015-11-17 11:54
  • 5. App rejected when using ZSSRichTextEditor

    Hi Apple rejects the app at the submission stage when ZSSRichTextEditor is included. HRColorPicker is not included.

    "The app contains or inherits from non-public classes in.... UIWebbrowserView"

    Is anyone else face the same issue?

    Patrick

    Reviewed by iksiphone at 2014-07-03 18:32
  • 6. ZSSToolbarInsertImageFromDevice Custom Order Crash

    When using a custom order with a select few bar button items, if I include ZSSToolbarInsertImageFromDevice I get a crash on:

    self.toolbar.items = items; (line 715 in buildToolBar method)

    Error:

    *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSCFConstantString view]: unrecognized selector sent to instance 0x100228460'

    Reviewed by willptswan at 2016-07-14 12:18
  • 7. Toolbar button status (black or blue colour) does not change on selected text

    Write any text you want. Then, select a part of it and press any style button, for example bold one.The selected text turns into bold style but the button remains blue. If you deselect the text and then select it again, works fine, by showing the bold button black. Same behaviour is replicated while selecting a bolded text and try to unbold its style. Please provide any advice or fix.

    Reviewed by kostastsi at 2016-02-10 14:12
  • 8. Keyboard not showing under iOS 9

    It shows fine under iOS 7 to 8, by using:

    self.editorView.keyboardDisplayRequiresUserAction = NO;

    But it's not working on iOS 9.

    Is there a fix for this?

    Thanks!

    Reviewed by neowinston at 2015-10-01 19:18
  • 9. Insert links

    When user trying insert links without selecting text, the links don't appear... I thing library should insert URL or title into <a> tag (e.g. <a href="URL">URL or title</a>)and inserts it into editor.

    Reviewed by michalciolek at 2015-02-14 15:38
  • 10. Only show Toolbar if ZSSRichTextEditor is First Responder

    (!) not yet ready to merge

    This fixes a part of #65.

    Use Case: A view with several UITextFields + ZSSRichTextEditor in a container view.

    Fix Idea: In keyboardWillShowOrHide: check if ZSSRichTextEditor really is the first responder. If not, do not show the toolbar.

    What Works: If the keyboard is not shown and a UITextField becomes active, the toolbar is not shown. When ZSSRichTextEditor becomes active the toolbar shows up.

    Open Problems: When ZSSRichTextEditor is active and the keyboard is visible, and the UITextField becomes active, the toolbar stays visible. This is due to the keyboard notifications not getting triggered when the UITextField becomes active, as the keyboard is already showing, and the UITextField does not have an inputAccessoryView.

    Any ideas how to fix this completely?

    Reviewed by fabb at 2014-11-25 10:58
  • 11. AlertView Issue with iOS 8

    @nnhubbard This is the view after I manually tap on the textfield.( Notice the frame)

    after tapping

    This is the view once it is presented(before any tap is made manually, it does not become the first responder by itself)

    before tapping

    Reviewed by ankitgupta1309 at 2014-09-19 05:39
  • 12. Links created with Insert Link tool are not active!

    The "href=" links created with the Insert Link tool are not clickable. Even the "Zed Said Studio" link in the ZSSRichTextEditor Demo App is not active. Tapping on a link elicits no response.

    The html "href" created by the Insert Link tool seems to be properly formed and does display as a link.

    Here is the html from the Demo App's Standard editor after I have added the "Apple Headquarters" link with Insert Link. Note also the "Zed Said Studio" link.

    I have experimented with multiple iOS versions from 11.4 to 14.4 as well as Catalyst macOS 10.15.7(Xcode 12.4) and macOS 12.2.1 (Xcode 13.2.1). In no case are links clickable or active.

    <div class="‘test’"></div>
    <!--— This is an HTML comment —-->
    <p>This is a test of the <strong>ZSSRichTextEditor</strong> by <a title="&quot;Zed" said&quot;="" href="&quot;http://www.zedsaid.com&quot;”>Zed Said Studio</a>
    </p>
    <p><a href=“https://www.apple.com”>Apple Headquarters</a>
        <br />
    </p>
    
    
    
    Reviewed by 101airborne at 2022-03-04 22:06
  • 13. Heading Issue when combined with list tag

    Hello there, I am a huge admire of this component, however I have found an issue when using this editor. Here is the issue that I observed. When List is applied and in list item heading are used UI is getting disturbed. Also the remaining heading are not applied as per the tag.

    Reviewed by sagarindurkar at 2021-09-02 06:43
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

May 10, 2022
Powerful text framework for iOS to display and edit rich text.
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

Jun 16, 2022
Fully open source text editor for iOS written in Swift.
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

Jun 17, 2022
Notepad - A fully themeable iOS markdown editor with live syntax highlighting.
Notepad - A fully themeable iOS markdown editor with live syntax highlighting.

Notepad is just like any other UITextView, but you need to use the convenience initializer in order to use the themes. To create a new theme, copy one of the existing themes and edit the JSON.

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

RichEditorView RichEditorView is a simple, modular, drop-in UIView subclass for Rich Text Editing. Written in Swift 4 Supports iOS 8+ through Cocoapod

Jun 24, 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

Jan 28, 2022
Rich Markdown editing control for iOS
Rich Markdown editing control for iOS

MarkdownTextView Rich Markdown Editing for iOS MarkdownTextView is an iOS framework for adding rich Markdown editing capabilities. Support for Markdow

May 26, 2022
An iOS app to turn typed text into images of handwritten text in your own handwriting style.
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

Mar 28, 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

Jun 28, 2022
Markdown syntax highlighter for iOS
Markdown syntax highlighter for iOS

Marklight Markdown syntax highlighter for iOS and macOS. Description Marklight is a drop in component to easily add realtime Markdown syntax highlight

Jun 24, 2022
iOS & OSX Syntax Highlighter.
iOS & OSX Syntax Highlighter.

Highlightr Highlightr is an iOS & macOS syntax highlighter built with Swift. It uses highlight.js as it core, supports 185 languages and comes with 89

Jun 17, 2022
TextMate-style syntax highlighting

SyntaxKit SyntaxKit makes TextMate-style syntax highlighting easy. It works on iOS, watchOS, and OS X. SyntaxKit was abstracted from Whiskey. Building

Jun 19, 2022
VEditorKit - Lightweight and Powerful Editor Kit built on Texture(AsyncDisplayKit)
VEditorKit - Lightweight and Powerful Editor Kit built on Texture(AsyncDisplayKit)

VEditorKit provides the most core functionality needed for the editor. Unfortunately, When combined words are entered then UITextView selectedRange will changed and typingAttribute will cleared. So, In combined words case, Users can't continue typing the style they want.

Jun 18, 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

Dec 21, 2019
🌍⏩📄 Convert ISO8859 1-16 Encoded Text to String in Swift. Supports iOS, tvOS, watchOS and macOS.

ISO8859 Convert ISO8859 1-16 Encoded Text to String in Swift. Usage let encoding = ISO8859.part1 let string = String([...], iso8859Encoding: encoding)

Nov 12, 2020
Like a SwiftUI ViewBuilder, but for Text
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

May 17, 2022
Get any text on your screen into your clipboard.
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 "

Jun 23, 2022
Convert text with HTML tags, links, hashtags, mentions into NSAttributedString. Make them clickable with UILabel drop-in replacement.
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

Jun 20, 2022
Automatic summarizer text in Swift
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

Jun 20, 2022