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.
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.
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.
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;
[self setPlaceholder:@"This is a placeholder that will show when there is no content(html)"];
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;
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
}
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];
NSString *customCSS = @"a {text-decoration:none;} a:hover {color:#FF0000;}";
[self setCSS:customCSS];
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);
}
Hashtags:
- (void)hashtagRecognizedWithWord:(NSString *)word {
NSLog(@"Hashtag has been recognized: %@", word);
}
Mentions:
- (void)mentionReco