Thursday, July 25, 2013

CKEditor basic table operations plugin

Download full plugin.

Make a entry in config.js file like this:
config.extraPlugins = "tableoperations";

You must have 'table' plugin included with your CKEDITOR.

Add name 'tableoperations' when you initialize your ckeditor.
CKEDITOR.replace('text_area_id', {
 toolbar: [
  {
   name: 'tableoperations',
   items : [ '-', 'Table', 'TableInsertRowBefore',  'TableInsertRowAfter', 'TableRowDelete', '-',
                            'TableInsertColumnBefore', 'TableInsertColumnAfter', 'TableColumnDelete', '-', 'TableCellMerge',
                            'TableCellSplitVertical', 'TableCellSplitHorizontal', 'TableDeleteTable' ]

  }
 ]
});

plugin.js file:
CKEDITOR.plugins.add('tableoperations', {
    requires : [ 'table' ],
    init : function( editor ){
        editor.addCommand('tblOpInsertRowBefore', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('rowInsertBefore',editor);
            }
        });
      
        editor.addCommand('tblOpInsertRowAfter', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('rowInsertAfter',editor);
            }
        });
      
        editor.addCommand('tblOpRowDelete', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('rowDelete',editor);
            }
        });
      
        editor.addCommand('tblOpInsertColumnBefore', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('columnInsertBefore',editor);
            }
        });
      
        editor.addCommand('tblOpInsertColumnAfter', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('columnInsertAfter',editor);
            }
        });
      
        editor.addCommand('tblOpColumnDelete', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('columnDelete',editor);
            }
        });
      
        editor.addCommand('tblOpCellMerge', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                try{
                    editor.execCommand('cellMerge',editor);
                }
                catch(err){
                    console.log(err.message);
                }
            }
        });
      
        editor.addCommand('tblOpCellSplitVertical', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('cellVerticalSplit',editor);
            }
        });
      
        editor.addCommand('tblOpCellSplitHorizontal', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('cellHorizontalSplit',editor);
            }
        });
      
        editor.addCommand('tblOpDeleteTable', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('tableDelete',editor);
            }
        });
      
        editor.ui.addButton('TableInsertRowBefore', {
            label : 'Insert Row Before',
            command : 'tblOpInsertRowBefore',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 69
        });
      
        editor.ui.addButton('TableInsertRowAfter', {
            label : 'Insert Row After',
            command : 'tblOpInsertRowAfter',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 61
        });
      
        editor.ui.addButton('TableRowDelete', {
            label : 'Delete Row',
            command : 'tblOpRowDelete',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 62
        });
      
        editor.ui.addButton('TableInsertColumnBefore', {
            label : 'Insert Column Before',
            command : 'tblOpInsertColumnBefore',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 70
        });
      
        editor.ui.addButton('TableInsertColumnAfter', {
            label : 'Insert Column After',
            command : 'tblOpInsertColumnAfter',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 63
        });
      
        editor.ui.addButton('TableColumnDelete', {
            label : 'Delete Column',
            command : 'tblOpColumnDelete',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 64
        });
      
        editor.ui.addButton('TableCellMerge', {
            label : 'Merge Cells',
            command : 'tblOpCellMerge',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 59
        });
      
        editor.ui.addButton('TableCellSplitVertical', {
            label : 'Split Cell Vertically',
            command : 'tblOpCellSplitVertical',
            icon : this.path + '/split_cell_vertically.png'
        });
      
        editor.ui.addButton('TableCellSplitHorizontal', {
            label : 'Split Cell Horizontally',
            command : 'tblOpCellSplitHorizontal',
            icon : this.path + '/split_cell_horizontally.png'
        });
      
        editor.ui.addButton('TableDeleteTable', {
            label : 'Delete Table',
            command : 'tblOpDeleteTable',
            icon : this.path + '/delete_table.gif'
        });
    }
});

No comments:

Post a Comment