DOKSoft CKEditor Table 工具的配置

Question

我正在尝试设置 CKEditor Table 工具，但我遇到了一些困难，有人可以帮助我吗？

有没有办法将 table 工具按钮转换为一种下拉菜单？我希望我的用户能够使用所有按钮，但又不会在我的工具栏上使用太多 space，所以如果他们可以按下一个按钮来显示所有 table 工具按钮，那就太好了！
如何固定按钮的位置？现在，每次我的 CKEditor 重新加载时，按钮都在不同的位置，这对用户来说很糟糕。
如何创建按钮组？现在我的 table 工具按钮看起来像这样：

但我希望他们像演示页面 (http://doksoft.com/soft/ckeditor-table-tools/demo.html) 那样组织群组，如下所示：

这是我当前的配置文件（有些东西因为我正在学习而被评论）：

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;';
};

我正在使用 windows 10、chrome 44.0.2403.157 m 和 CKEditor 4.5.3

Answer 1

CKEditor 默认不支持下拉按钮菜单。为此你需要额外的插件。
不定义为一组，而是定义为单个按钮集。参见 (3)。

这里是工具栏配置：

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']
           ];

DOKSoft CKEditor Table 工具的配置

Configuration of DOKSoft CKEditor Table Tools

javascript

plugins

toolbar

ckeditor

tabletools