How to Implement Rich Document Editor for iPhone

Question

I'm just getting started on a new iPhone/iPad development project, and I need to display a document with rich styled text (potentially with embedded images). The user will touch the document, dragging to highlight individual words or multiline text spans. When the text is highlighted, a context menu will appear, letting them change the color of highlighting or add margin notes (or other various bits of structured metadata).

If you're familiar with adding comments to a Word document (or annotating a PDF), then this is the same sort of thing. But in my case, the typical user will spend many many hours within the app, adding thousands (in some cases, tens of thousands) of small annotations to the central document. All of those bits of metadata will be stored locally awaiting synchronization with a remote web service.

I've read other pieces of advice, where developers suggest creating a UIWebView control and passing it an HTML string. But that seems kind of clunky, especially with all the context-sensitivity that I want to include.

Anyhow, I'm brand new to iPhone development and Objective-C, though I have ten years of software development experience, using a variety of languages on many different platforms, so I'm not worried about getting my hands dirty writing new functionality from scratch.

But if anyone has experience building a similar kind of component, I'm interested in hearing strategies for enabling that kind of rich document markup and annotation.

Answer 1

With the iPad, you can take advantage of Core Text.

Don't know what to suggest for iPhone. I haven't noticed any great text processing in any iPhone reader apps, beyond rendering HTML or PDF. I suspect you'll have to write something from scratch.

Answer 2

If you're willing to work with iPhone OS 3.2 or higher, you might want to take a look at the Omni Group's latest release of their open source framework. It includes a sample rich text editor based on Core Text.

Answer 3

I am working on a simplified version of what you describe. For ease of implementation, I have limited it to paragraph granularity, so a long press selects a paragraph and then a list of choices pops up to apply to the paragraph.

I am doing this all in javascript inside a UIWebView. This was my last choice of how to do a text editor. I had to be backwards compatible (no CoreText) and release through iTunes (no private WebKit) so I was left with javascript.

You could probably achieve what you want using this very clunky method. Javascript works best at the element level, so you would probably want to wrap every word in the document in a span with a unique id.

Javascript has full access to touch events, gestures, and the DOM model. It has better control of the UIWebView than you get from the Cocoa side. You can, with some tricks, get a bidirectional communication channel with the host application. PhoneGap has a nice implementation of this.

If you have the choice to do it another way, I would take that option. If you are stuck like I was, than this is a viable, though unpleasant option.