Rich text inline editing
colin.clark at utoronto.ca
Mon Oct 20 20:11:35 UTC 2008
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
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:
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
Technical Lead, Fluid Project
Adaptive Technology Resource Centre, University of Toronto
More information about the fluid-work