Add ability to move rows in a table (up/down, preferably with drag)

[Tri]

It would be very useful to have ability to rearrange rows in a table. Ideally with drag/drop, but if not, even a context menu "move row up" / "move row down" would be helpful.

[Frederico Caldeira Knabben]

The context menu option could be a first step for it.

[Audrey Tang]

CoffeeScript Source for Move Row/Column context menu implementation

[Audrey Tang]

Compiled JavaScript for Move Row/Column context menu implementation, suitable for <script src=""> inclusion

[Audrey Tang]

Attached please find the Move Row/Column implementation we've been coding up at Socialtext.

Simply including the TableTools.js file should make the Move Row/Column context menu appear. It also re-opens the context submenu for Move and Insert operations, making multiple Move/Insert actions as easy as repeated mouseclicks.

If some variant of this could go into tabletools/plugin.js it would be much appreciated; till its inclusion please feel free to use it as an add-on.

[Jakub Ś]

suitable for <script src=""> inclusion

@audreyt I have included and tried your script but all I have got when hovering over table menu was JS error presented below:

Message: $ is not defined
URI: /ckeditor/3.6.2/ckeditor/TableTools.js
Line: 16

Have I missed something?

[Audrey Tang]

Hi! Sorry, I should've clarified that this currently dependson jQuery to run.

Something like this should do:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="TableTools.js"></script>

[Jakub Ś]

@audreyt thanks for the tip. It Looks very interesting however there are some drawbacks I was able to find.

1. It's a shame that it only works with jQuery. CKEditor does not necessarily has to be used with jQuery. This is the main drawback of this plugin which does not allow to integrate it into CKEditor.

2. In Firefox after carrying out the move operation - the menu reappears in upper left corner.

3. You can get JS error when using the plugin.

To reproduce -> go to last row, right-click choose Insert ROW Before, right-click again on last row. OR -> right click, go to row menu, hover over new items, right-click again somewhere else in the table. JS error:

Message: this.getWindow().$.getComputedStyle(this.$, "") is null
URI: /3.6.2/ckeditor/_source/core/dom/element.js
Line: 502
I'm not sure if this is CKEditor or plugin fault as I didn't look through the code.

Besides errors this looks like an interesting extension. @audreyt if it is impossible to rewrite the plugin using pure JavaScript and CKEditor methods than maybe you could publish your plugin here: ​http://cksource.com/forums/viewforum.php?f=18

[Audrey Tang]

I've removed the jQuery dependency and posted an updated version at:

​https://gist.github.com/1583190#file_table_tools.js

I'll look into the JS errors and on turning it into a proper plugin soon. Thank-you for the encouragement!

[thoefer]

Hello,

I've implemented this row/column move feature experimentally in my project - and it works great! Thank you for your work. I've tested with FF15 and IE 90.

@audreyt: The only thing I stumpled across, that I have to include the .js file by <script src="TableTools.js"></script>. I think that this doesn't fits exactly into the common CKEditor plugin architecture. My understanding is, that normally plugins should be loaded from the plugin folders. But this doesn't works in this case... Should this also works? May you possible to rebuild it, as "standard" plugin?

@CKEditor Dev Team: I would much appreciate if this feature could go into a CKEditor core plugin. I think it's very useful improvement of table handling and a little "unique selling point". Our customers asked about it.

Also it would be very useful, to get more advanced table handling features, e.g. copy/paste row/column feature as in other popular editors.

Kindly regards, Thomas