Giter VIP home page Giter VIP logo

zssrichtexteditor's Introduction

ZSSRichTextEditor

Help Wanted

Looking for anyone willing to help with this project. I have not had enough time to give the project the love it deserves. Contact me here or @zedsaid.

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];

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];

Supported Functions

ZSSRichTextEditor has the following functions:

  • Bold
  • Italic
  • Subscript
  • Superscript
  • Strikethrough
  • Underline
  • Remove Formatting
  • 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.

zssrichtexteditor's People

Contributors

adamtootle avatar causeidm avatar chaixl avatar ebetabox avatar eikebartels avatar iannil avatar jay-zhu avatar masong2012 avatar nhnam avatar nnhubbard avatar sunsidew avatar willptswan avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.