ZSSRichTextEditor

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.

Using the Editor

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.

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.

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 Link and Insert Image 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
    
}

Supported Functions

ZSSRichTextEditor has the following functions:

Bold
Italic
Subscript
Superscript
Strikethrough
Underline
Remove Formatting
Justify Left
Justify Center
Justify Right
Justify Full
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

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

steamx / ZSSRichTextEditor