Rich text inline editing

[Colin Clark]

Hey all,

Recently, I've heard a lot of interest in the prospect of using  
Fluid's Inline Edit component with a rich text editor. So far, it's a  
feature we've done some preliminary design work for, but not something  
we've looked at in depth or implemented yet.

I wanted to explore how well Inline Edit's current architecture would  
support this use case. In the end, it was really easy to get it  
working, and only involved minor changes to the code. Here are the  
things I did:

1. I wrote a simple new TinyMCE plugin for jQuery. The existing one  
was quite broken.
2. I created some HTML markup for my inline rich text editor,  
consisting of a textarea and save/cancel buttons.
3. I used my TinyMCE jQuery plugin to unobtrusively turn this textarea  
into a rich text editor.
4. I added a public cancel() method to InlineEdit.js, and bound it to  
my Cancel button
5. I refactored any code in InlineEdit that assumed we were working  
with plain text and plain old <input> tags. This code now lives in  
separate methods for getting/setting values on both the view and the  
edit elements.
6. I wrote two lines of TinyMCE-specific code to correctly get/set  
values from it.

That's it. They key is Inline Edit's flexibility with markup, and  
making sure that any assumptions can be overridden for different  
contexts. To make this code cleaner, we may eventually want to break  
Inline Edit up into separate views responsible for handling different  
types of content and editors.

While I think it's too early to release the whole thing as a fully- 
supported option for Inline Edit, I think the underlying changes to  
the component are useful. I've posted a patch with an example of this  
code, and I'd appreciate it if others in the community could take a  
look and let me know what you think. In particular, check out:

isEditing()
cancel()
setValueOnEditField()
getValueForEditField()
setValueOnViewText()
getValueOnViewText()

Apologies for the hard-coded paths in the patch. Has anyone else  
figured out how to get Eclipse to create a diff that uses relative  
paths?

Thanks,

Colin

---
Colin Clark
Technical Lead, Fluid Project
Adaptive Technology Resource Centre, University of Toronto
http://fluidproject.org