Rich text inline editing

Colin Clark colin.clark at
Wed Nov 12 15:08:21 UTC 2008

Hey Lovemore,

On 7-Nov-08, at 4:50 AM, Lovemore Nalube wrote:
> Thanks to Colin, I have hope that having an accessible Fluid Rich  
> Inline Editor will be a reality sooner than later.

We're making progress on this front. There's still some design and  
development that needs to be done, but hopefully you can lend us a  
hand as we go. Antranig has picked up some of the refactoring that I  
suggested when I made my proof-of-concept. He's working in a branch  

You can keep track of things by watching the issue:

> I ran a test of the patch you provided and it's fantastic. I had a  
> little trouble with the following;
> 	•  The finish() and cancel() functions aren't called properly and  
> hence were not working the way they should. Instead, clicking either  
> of them would reload the page as though a form had been submitted.

This sounds familiar, but I can't reproduce it in my version. Maybe I  
tweaked the implementation post-patch?

The save and cancel buttons are just normal event handlers bound to  
the buttons. Double-check that they are preventing the default action  
from occurring. It should look something like this:

         $("#save").click(function (){
             return false;

> 	• Calling fluid.inlineEdits for multiple textareas will only  
> tranform the first textarea and not the rest.

I didn't add support for this in the patch. You could roll it yourself  
fairly easily...

fluid.inlineEdits() returns an array of Inline Edit instances. This  
patch overrides a couple of methods on an specific instance to make it  
work with TinyMCE. To get a whole set of textareas working, you'd have  
to turn each one into a rich text editor by calling the .tinymce()  
plugin function, then call fluid.inlineEdits(), then loop through each  
new Inline Edit instance and override the set.. and get... functions.

I think you could probably whip something up in a fairly short amount  
of time, but if you don't feel like mucking around with this, let me  
know. Obviously, this will be possible with a single function call in  
the release version.

> 	• Is there any reason to why TinyMCE was used as opposed to  
> FCKEditor? How complex would it be to plugin the latter?

I chose to experiment with TinyMCE because it's a fair bit more  
accessible than the others. I'm still not fully sold on it, but it  
works nicely and is being used by others in the Sakai community at  
this point. It's a good option until a really great rich text editor  
comes along.

I don't see why you couldn't easily plug FCKEditor in as an  
alternative. We can walk you through the process if you're interested.

> BTW, how can I contribute to the Fluid project :) ?

Your feedback on Inline Edit has already been a useful contribution.  
It'd be great to have you get involved in code for Inline Edit or  
other components. If there are features you're particularly interested  
in, let's dive in and work on them. Or, starting with bug fixes and  
patches is a good way to get your bearings.

A few suggestions off the top of my head:

* We're working on a dropdown version of Inline Edit, and I think  
we're going to need a decent jQuery Menu plugin for this. We don't  
need nested menus or flyouts, just a simple list menu that has  
configurable markup and can be made accessible. Any suggestions?

* There are a handful of prominent bugs that might be fairly easy to  
sink your teeth into:

FLUID-1310: Tooltip displayed when in edit mode
FLUID-1301: Entire container is "hot", not just the interesting part  
(the editable unit)
Right border of focus styling for unedited inline edit fields are  

* Try integrating, extending, and customizing some of our components  
in new ways. We need more information about the integration  
experience. We try to build them so that they can be really easily  
changed to suit your needs, but I'm sure there are areas we can improve.

I hope this helps,


Colin Clark
Technical Lead, Fluid Project
Adaptive Technology Resource Centre, University of Toronto

More information about the fluid-work mailing list