配置DOKSoft CKEditor桌面工具

Question

我想設置CKEditor桌面工具，我有一些困難，有人可以幫我嗎？

1. 有沒有辦法在一種下拉菜單上轉換表格工具按鈕？我希望我的用戶能夠使用所有的按鈕，但是在我的工具欄上沒有使用太多的空間，所以如果他們可以按下一個可以顯示所有桌子工具按鈕的按鈕，那就太棒了！

2. 如何修復按鈕位置？現在，每當我的CKEditor重新加載時，按鈕位於不同的位置，這對用戶不利。

3. 如何創建按鈕組？現在我的表格工具按鈕看起來是這樣的：

，但我想他們有有組織的團體如演示頁（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，鉻44.0.2403.157 m和CKEditor的4.5.3

Answer 1

1. CKEditor的默認不支持下拉按鈕menues。你需要額外的插件。
2. 定義不是一個組，而是作爲單個按鈕設置。參見（3）。

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