Search code examples
javascriptpluginsckeditortoolbartabletools

Configuration of DOKSoft CKEditor Table Tools

I am trying to setup CKEditor Table Tools and I had some difficulties, could someone please help me?

  1. Is there a way to transform the table tools buttons on a kind of a Dropdown Menu? I want my user to be able to use all the buttons, but without using so much space on my toolbar, so if they could press a button that would reveal all the table tools buttons would be great!

  2. How do I fix positions for the buttons? Now, everytime my CKEditor reloads, buttons are on a different position, and that's bad for the user.

  3. How do I create buttons groups? Now my table tools buttons look like this:

current

but I'd like them to have organized groups as in the Demo page (http://doksoft.com/soft/ckeditor-table-tools/demo.html), like this:

example

Here is my current config file (some stuff are commented because I was learning):

CKEDITOR.editorConfig = function( config ) {

// %REMOVE_START%
// The configuration options below are needed when running CKEditor from source files.
config.plugins = 'basicstyles,dialogui,dialog,clipboard,button,toolbar,entities,floatingspace,wysiwygarea,indent,indentlist,list,undo,autogrow,base64image,panelbutton,panel,floatpanel,colorbutton,colordialog,menu,contextmenu,resize,imageresize,eqneditor,find,listblock,richcombo,font,htmlwriter,indentblock,symbol,justify,liststyle,menubutton,pastetext,pastefromword,wordcount,pastebase64,removeformat,showborders,scayt,tabletools,lineutils,widget';
config.skin = 'moonocolor';
// %REMOVE_END%

// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config

// The toolbar groups arrangement, optimized for a single toolbar row.
config.toolbarGroups = [
    { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'forms' },
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'styles' },
    { name: 'colors' },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'links' },
    { name: 'insert' },
    { name: 'tools' },
    { name: 'others' },
    { name: 'about' }
    //{ name: 'doksoft', groups: ['doksoft_table'] }
];

//  config.toolbar = [
//     ['doksoft_table_conf','doksoft_table_new'] ,
//     ['undo', 'scayt'] 
// ];

//config.toolbar_name = [ [ 'doksoft_table_conf,doksoft_table_new,doksoft_table_row_conf,doksoft_table_col_conf,doksoft_table_cell_conf,doksoft_table_add_row_up,doksoft_table_add_row_down,doksoft_table_add_col_left,doksoft_table_add_col_right,doksoft_table_add_cell_left,doksoft_table_add_cell_right,doksoft_table_row_move_up,doksoft_table_row_move_down,doksoft_table_col_move_left,doksoft_table_col_move_right,doksoft_table_delete_col,doksoft_table_delete_row,doksoft_table_delete_cell,doksoft_table_merge_cells,doksoft_table_merge_cell_right,doksoft_table_merge_cell_down,doksoft_table_split_cell_hor,doksoft_table_split_cell_vert' ] ];

// The default plugins included in the basic setup define some buttons that
// are not needed in a basic editor. They are removed here.
config.removeButtons = 'Cut,Copy,Paste,Anchor,Strike,Font,Replace,Table';

// Dialog windows are also simplified.
config.removeDialogTabs = 'link:advanced';

config.language = 'pt-br';
config.width = 575;

//Opções do contador de palavras
config.wordcount = {
    // Whether or not you want to show the Word Count
    showWordCount: true,
    // Whether or not you want to show the Char Count
    showCharCount: false,
    // Whether or not to include Html chars in the Char Count
    countHTML: false
}

// Opções do corretor automático em PT-BR
config.scayt_autoStartup = true;
config.scayt_sLang = 'pt_BR';
config.scayt_uiTabs = '1,1,0';

//Tamanhos padrão de fonte
config.fontSize_defaultLabel = '12';

config.extraPlugins = 'dragresize,doksoft_table_new,doksoft_table_conf,doksoft_table_row_conf,doksoft_table_col_conf,doksoft_table_cell_conf,doksoft_table_row_move_up,doksoft_table_row_move_down,doksoft_table_col_move_left,doksoft_table_col_move_right,doksoft_table_add_row_up,doksoft_table_add_row_down,doksoft_table_add_col_left,doksoft_table_add_col_right,doksoft_table_add_cell_left,doksoft_table_add_cell_right,doksoft_table_delete_col,doksoft_table_delete_row,doksoft_table_delete_cell,doksoft_table_merge_cells,doksoft_table_merge_cell_right,doksoft_table_merge_cell_down,doksoft_table_split_cell_hor,doksoft_table_split_cell_vert';

config.fontSize_sizes = '6/8px;8/11px;9/12px;10/14px;11/15px;12/16px;14/19px;16/22px;18/24px;20/27px;22/30px;24/32px;26/35px;28/38px;36/48px;54/72px;72/96px;';
};

I'm using windows 10, chrome 44.0.2403.157 m and CKEditor 4.5.3

Solution
    1. CKEditor does not support dropdown button menues by default. You need additional plugin for that.
    2. Define not as a group but as single buttons set. See (3).

    3. Here is toolbar configuration for you:

      config.toolbar = [
            ['doksoft_table_new'],
            ['doksoft_table_conf','doksoft_table_row_conf','doksoft_table_col_conf','doksoft_table_cell_conf'],
            ['doksoft_table_add_row_up','doksoft_table_add_row_down','doksoft_table_add_col_left','doksoft_table_add_col_right'],
            ['doksoft_table_add_cell_left','doksoft_table_add_cell_right'],
            ['doksoft_table_row_move_up','doksoft_table_row_move_down','doksoft_table_col_move_left','doksoft_table_col_move_right'],
            ['doksoft_table_delete_col','doksoft_table_delete_row','doksoft_table_delete_cell'],
            ['doksoft_table_merge_cells','doksoft_table_merge_cell_right','doksoft_table_merge_cell_down'], 
            ['doksoft_table_split_cell_hor','doksoft_table_split_cell_vert']
           ];