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