Rich text inline editing

[Colin Clark]

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
here:

https://source.fluidproject.org/svn/fluid/components/branches/FLUID-1694/

You can keep track of things by watching the issue:

http://issues.fluidproject.org/browse/FLUID-1694

> 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 (){
             richEditor.finish();
             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
http://issues.fluidproject.org/browse/FLUID-1310
FLUID-1301: Entire container is "hot", not just the interesting part
(the editable unit)
http://issues.fluidproject.org/browse/FLUID-1301
FLUID-1630:
Right border of focus styling for unedited inline edit fields are
missing
http://issues.fluidproject.org/browse/FLUID-1630

* 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

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