This tutorial is part of a series:

Rich Text Editing : A Simple Start (Part 1)

Rich Text Editing : Validation (Part 2)

Rich Text Editing : Highlighting and UIMenuController (Part 3)

Rich Text Editing : Fonts (Part 4)

Rich Text Editing : Undo and Redo (Part 5)

Rich Text Editing : Inserting Images (Part 6)

Rich Text Editing : Draggable Images (Part 7)

Bonus: Rich Text Editing: Sample Project

iOS 5 Rich Text Editing

In this our sixth and penultimate tutorial I will show you how to present a UIImagePickerController in which a user can select an image of their choice and then add the users selected image into the document.

Let’s get right to it, in our ‘checkSelection’ method add the following code:


1
2
UIBarButtonItem *insertPhoto = [[UIBarButtonItem alloc] initWithTitle:@"Photo+" style:UIBarButtonItemStyleBordered target:self action:@selector(insertPhoto:)];
[items addObject:insertPhoto];

Okay now that’s done let’s head straight forward and implement the ‘insertPhoto:’ method:


1
2
3
4
5
6
7
8
9
10
11
- (void)insertPhoto:(id)sender {
    UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];
    imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    imagePicker.delegate = self;

    UIPopoverController *popover = [[UIPopoverController alloc] initWithContentViewController:imagePicker];
    [popover presentPopoverFromBarButtonItem:(UIBarButtonItem *)sender permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];
    imagePickerPopover = popover;

    [imagePicker release];
}

What we’ve done here is created a image picker, set up some of its properties but most importantly its delegate. We then create a popover with the image picker as its content view, present it, assign it to a property for later use and release what we have to.

Seeing as though we haven’t yet added that property, just switch to the header file and add the following code in the appropriate place:


1
UIPopoverController *imagePickerPopover;

Now what we must do is implement one of the UIImagePickerController’s delegate methods to be notified when an image is selected. Let’s implement said method as well as adding a static variable:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
static int i = 0;

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
    // Obtain the path to save to
    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
    NSString *documentsDirectory = [paths objectAtIndex:0];
    NSString *imagePath = [documentsDirectory stringByAppendingPathComponent:[NSString stringWithFormat:@"photo%i.png", i]];

    // Extract image from the picker and save it
    NSString *mediaType = [info objectForKey:UIImagePickerControllerMediaType];
    if ([mediaType isEqualToString:@"public.image"]){
        UIImage *image = [info objectForKey:UIImagePickerControllerOriginalImage];
        NSData *data = UIImagePNGRepresentation(image);
        [data writeToFile:imagePath atomically:YES];
    }

    [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.execCommand('insertImage', false, '%@')", imagePath]];
    [imagePickerPopover dismissPopoverAnimated:YES];
    i++;
}

Unfortunately what we want to do isn’t as easy as you might have thought, we can’t just take a UIImage and tell it to insert it, we have to save this image first before, so that we have a path to it which we can pass to the ‘execCommand’ function in the javascript.

The first block of the code is simply finding the documents directory and creating a path for where we can place the image. After this we get the image and write it to the path we created and finally we execute the command via javascript passing it our path to the image.

You may have also noticed that we use a static int ‘i’ which we use to change the photo path every time we insert a photo. We have to do this because if we don’t change the name and just overwrite the existing file then when we add the image to the web view then it just assumes it’s the same as the other image so adds the same image due to caching.

And that’s it, all done! You’ll have to test this on a device if you want to see it working as the simulator has no photos in it’s library but it should work like a charm.

Coming up next time!

iOS 5 Rich Text Editing

I hope you’re looking forward to our next and last tutorial which will include subclassing UIGestureRecognizer, dealing with and using blocks but most importantly expanding our knowledge of javascript. What are we doing I hear you ask, adding drag and drop to our images of course!

Next in the series:

Enjoyed this post?

Subscribe to our RSS Feed or Follow us on twitter to keep up to date with the latest from iOS-Blog. Remember, Sharing is caring so please click one of the following options:

Tags: , , , , ,