Garbage Burrito!

An internet web blog by Ben Kittrell

Table Editor for YUI's Rich Text Editor

Table Editor for YUI's Rich Text Editor
Ben Kittrell - 09/10/2010 19:42:00
Comments: 5
We've been beta testing our new implementation of YUI's Rich Text Editor in DoodleKit and almost instantly we received complaints of the missing Table Editor.  So I made one.

It's pretty basic so far and uses the "Insert then Edit" pattern that's already used in existing YUI RTE components.  You can edit table properties like width and border, and there's a context menu for inserting and removing rows and columns.

Check out an example here

I've put it up on GitHub, and installing it is super easy.

  1. Copy table-editor.js, table-editor.css and table-editor.png to your desired locations.
  2. Include the table-editor.js and table-editor.css in your HTML.
  3. Modify table-editor.css to point to table-editor.png
  4. After your Editor has been instantiated, initialize the table editor.  

    myEditor.initTableEditor();
  5. Add a button with a value of 'inserttable' to your toolbar.

You can check out the table-editor.html file for example usage.

YUI RTE Table Editor on GitHub

Comments: 5

Comments

1. Russ   |   10/11/2010 05:53:36

Nice work! I didn't notice any kind of license for this. Any thoughts or plans on that?

2. Ben Kittrell   |   10/11/2010 15:03:08

Honestly I haven't thought about it, but lets go with BSD like YUI.

http://developer.yahoo.com/yui/license.html

3. John Winningham  |  my website   |   12/20/2010 18:24:26

Excellent plugin for RTE! Saved me a day or two of banging my head against my desk.

4. Gamoniac   |   02/10/2011 07:08:30

Nice work, Ben. Thanks!

5. Slight   |   03/03/2011 19:12:57

You're a star, thanks mate.

Post a Comment


Please enter the word below.


powered by Doodlekit™ Free Website Builder by Doodlebit™ Website Company