Question

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

有没有办法在一种下拉菜单上转换表格工具按钮？我希望我的用户能够使用所有按钮，但不会在我的工具栏上占用太多空间，所以如果他们可以按下一个按钮来显示所有桌面工具按钮就会很棒！
如何修复按钮的位置？现在，每次我的CKEditor重新加载时，按钮都处于不同的位置，这对用户来说是不好的。
如何创建按钮组？现在我的表工具按钮看起来像这样：

但是我希望他们在演示页面（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表工具

1 个答案: