Opened 7 years ago

Last modified 6 years ago

#7969 confirmed New Feature

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

Reported by: Tri Owned by:
Priority: Normal Milestone:
Component: Core : Tables Version: 3.6
Keywords: Cc:

Description

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.

Attachments (2)

TableTools.coffee (7.5 KB) - added by Audrey Tang 6 years ago.
CoffeeScript Source for Move Row/Column context menu implementation
TableTools.js (12.1 KB) - added by Audrey Tang 6 years ago.
Compiled JavaScript for Move Row/Column context menu implementation, suitable for <script src=""> inclusion

Download all attachments as: .zip

Change History (9)

comment:1 Changed 7 years ago by Frederico Caldeira Knabben

Component: GeneralCore : Tables
Status: newconfirmed

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

Changed 6 years ago by Audrey Tang

Attachment: TableTools.coffee added

CoffeeScript Source for Move Row/Column context menu implementation

Changed 6 years ago by Audrey Tang

Attachment: TableTools.js added

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

comment:2 Changed 6 years ago by 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.

comment:3 Changed 6 years ago by 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?

Last edited 6 years ago by Jakub Ś (previous) (diff)

comment:4 Changed 6 years ago by 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>

comment:5 Changed 6 years ago by 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.
  1. In Firefox after carrying out the move operation - the menu reappears in upper left corner.
  1. 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

comment:6 Changed 6 years ago by 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!

comment:7 Changed 6 years ago by 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

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy