发布于 2015-09-03 00:18:11 | 550 次阅读 | 评论: 0 | 来源: PHPERZ
虽然 CKEditor 是一个功能齐全的“所见即所得”编辑器，但是并不是其所有选项在所有情况下都需要。因此，工具栏定制是最常用需求之一。
有两种方法配置工具栏来匹配需求：
工具栏组配置
CKEditor 4 为组织工具栏引入了新概念，它基于“分组” ，而不是传统的“逐项定位”方式。
配置分组是由 toolbarGroups 设置定义的。下面是 CKEditor 标准发布所使用的配置：
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
它是一个对象的列表（数组） ，每一项有一个“name” （如"clipboard"或"links"）和一个可选的“子组”列表。
可以通过改变上述配置，可以容易地定制组的顺序和位置。
通过加入'/'，正如在上面看到的，可以在工具栏中强制断行（row-break） 。
注意：在上面的配置中，有没有使用的组。这是因为“设计”的原因（参见“组配置的好处” ） 。
与“逐项”配置相比，配置工具栏分组的最重要好处是：自动化。
现在可以让插件开发人员决定其插件应该将按钮加到工具栏的哪个组中。 例如， “图像”插件，可将其按钮包括到“插入”组中，而撤销和重做按钮加到“撤销”子组中。
虽然不是强制性的，但推荐要配置所有的组和子组（包括没有使用的） ，因为在将来的任何时候，当安装了新的插件时，其按钮将会自动出现在工具栏中，而不用再配置。
分组配置的最明显问题是不可能精确控制每项在工具栏中的放置位置。 它是由插件自身来决定的。
除了分组配置， 还可以通过确定精确的位置来控制工具栏中的每一个单独的元素。 这是通过配置“工具栏定义”来完成的。
工具栏定义是一个 JavaScript 数组，它含有在编辑器中可以使用的在所有工具栏行中显示的元素。下面是一个例子：
config.toolbar = [
{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-',
'Undo', 'Redo' ] },
'/',
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
];
这里每个工具栏组都给定了一个名字，并定义了其中项目的精确清单。
也可以用简单的语法实现上面的（参见后面的“访问问题” ） ：
config.toolbar = [ [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ], [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], '/', [ 'Bold', 'Italic' ] ];
通过将'-'(短线)加到项目列表中，将项目分隔符包括其中，如上面看到的。
将'/'加到组之间，可以在工具栏中强制断行。它们可以用于在其放置的位置强制断行，使得下一个工具栏组处于新的一行。
这种配置最明显的好处是每个单独的项目在工具栏中的位置都可以控制。
最大的问题是当安装新的插件时没有了自动化。 这意味着， 如果有任何新的插件加入到你的编辑器中，你将不得不手动改变你的配置，将插件按钮包含于希望的位置。
用于每个工具栏组的名字将被帮助技术所使用，如屏幕阅读器（screen readers） 。该名字将被 CKEditor 用于在编辑器语言文件（工具栏组条目）中查找每个工具栏组的“可读”名字。
屏幕阅读器将通过使用其可读名字 （如果可用） 或其已定义的名字属性显示每个工具栏组。