Question

此问题类似于What toolbar buttons are available in CKEditor 4?和reinforce of this old other one。我在这里补充一些我面临的看法和个人困难。

CKEditor文档很好，但对于 Javascript程序员（第一次使用CKEditor部署者）来说是粉碎和“不完整”，因为“停在中间”......示例：

如果我需要removeButtons，我还需要有效名称列表。
如果我需要自定义 - 通过源代码，更改数组元素 - ，我不仅需要线索和示例here，还需要有效名称，语法规则，上下文异常的完整列表，也许是“官方插件名称”列表。

问题：有一个命令（简单alert(debug)）或所有可能名称的文档列表？（或所有控制和注册的插件名称，组名等））

... CKEditor4被提升为（最好的！）“即插即用”编辑器，但是，对于程序员来说，这是错误的，没有适当的“管理控制名称”支持。

注意：所有config.js都需要对有效名称的引用，并且没有文档显示我在config.js数组中所做更改的所有有效名称的列表。这就是程序员所需要的，但是今天（2013年8月）我们需要花费大部分时间使用Google来查找有效名称，或者使用浏览器的“元素检查器”来获取有关它的线索。没有名称， config array 没有简单的编程任务。

DREAM：对于网页设计师，ckeditor.com/download提供了一个很好的“自定义ckeditor”（!!）。但是对于开发人员来说，没有工具或插图显示“按钮图标和相关的名称”，或者组名等...也就是说，“来自功能的有组织的地图”命名“（反之亦然）。当然，对于每张地图，我们还需要“上下文例外”，例如"Source" that not works with inline editor。

（更实际的例子，在@Noseratio和@davidkonrad评论之后编辑）。问题是“每个上下文的有效名称是什么？”

如果我有config之类的话，

editor.config.toolbarGroups = [
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
             ...
    { name: 'styles' },
    { name: 'colors' },
];

我需要将{ name: 'styles' }更改为自定义的，例如我需要这个功能：

  { name: 'styles', items : [ 'Styles', 'Format', 'FontSize' ] }

所以，我需要知道所有这些名称，以及何时（contexts）使用属性“name”，“items”，“groups”这些名称。如果我在toolbarGroups属性中使用“items”，或者如果我使用“Fontsize”而不是“FontSize”，我会犯一个错误。此外，对于addButtonCommand和其他人，我需要知道任何有效参数。定义错误是错误的，

  addButtonCommand( 'FontSize', lang.underline, 'underline',
                     config.coreStyles_underline );

但如果不了解每个上下文的“所有有效名称列表”，就很难工作。

（更实际的例子，在@MahanGM评论后编辑）

如果我使用this v4 guide and instructions （即equivalent to this v3），当使用CKEditor4和内联编辑器时，我有“名称问题”：

“默认CKEditor工具栏设置”是“完整工具栏”？
如果我取消'拼写检查'（旧的v3名称'SpellChecker'），为什么不工作？为什么还需要起飞'Scayt'？
我可以在内联编辑器中使用哪些名称？使用群组以及在editor.config.toolbar阵列中使用项目时
......等......（请阅读我的问题：所有问题都是上下文中有效名称的正确选择）...程序员需要一个“完整的formal specification”，而不仅仅是线索和信息碎片。

Answer 1

（这不是一个答案，而是一个建议，你可以复制/粘贴发布你的）

（你也可以在这里进行colabore编辑）

“逐项”配置

您的编辑器将完全像您的“工具箱定义”一样工作：一个简单的JavaScript数组，

config.toolbar = [ G1, G2, ..., GN ];

通过其内容控制“工具箱中的每个工具栏”并定义其精确位置。 工具栏定义，G _i可以是数组或字符串：

当G _i是一个字符串时，它是条形线分隔符，'/';
当G _i是一个数组时，它是按钮名称（别名“item”）的序列（别名“group”）。

因此，toolbox definition array的一般形式是

config.toolbar = [
     ['ITEM11', 'ITEM12', ..., 'ITEM1N'], 'BAR_SEP',
     ['ITEM21', 'ITEM22', ..., 'ITEM2N'], ...
];

其中 ITEM _i，j是有效的按钮名称 。在ABNF中，

 ITEM      =  BUTNAME / "-"
 BUTNAME   = 1*ALPHA      ; and usually a CamelCase name.

2013年8月配置的场景（定义“名称空间”），使用CKEditor v4：

git clone git://github.com/ckeditor/ckeditor-releases.git
其他插件少或代码少的其他内容。
其他拥有更多（正式注册的命名空间）插件的内容。

BUTNAME有效的软件上下文：

关联插件（见下面“有效BUTNAME完整列表”表）已安装（参见方案1,2或3）;
BUTNAME不在config.removeButtons列表中，相关插件也未在config.removePlugins删除;
... BUTNAME是针对该CKEditor版本定义的（例如，对于v4使用'spellchecker'，对于v3使用'SpellChecker'）。

所有已注册的插件名称

请参阅 scenario-1 中的config.plugins，这是插件的所有有效名称的列表（字母顺序）：

 a11yhelp,about,basicstyles,blockquote,button,clipboard,contextmenu,dialog,
 dialogui,elementspath,enterkey,entities,eqneditor,fakeobjects,filebrowser,
 find,floatingspace,floatpanel,horizontalrule,htmlwriter,image,indent,
 indentlist,link,list,magicline,maximize,menu,menubutton,panel,pastefromword,
 pastetext,popup,removeformat,resize,save,scayt,showblocks,sourcearea,
 specialchar,tab,table,tabletools,toolbar,undo,wsc,wysiwygarea
 ,... ? ... more?

他们也是“插件”或“extraplugin”？请参阅 scenario-3 ：

 texttransform, etc.

PS：使用 scenario-1 。在我们只有plugins/目录，

a11yhelp   dialog           icons.png  magicline      specialchar  wsc
about      fakeobjects      image      pastefromword  table
clipboard  icons_hidpi.png  link       scayt          tabletools

有效BUTNAME的完整列表

所有名称和相关上下文的规范。插件带有“-1”或“-3”，以记住场景的“命名空间”。

BUTNAME                  | PLUGIN            |  Invalid context
-------------------------|-------------------|------------------
Bold                     | default-1         | ?Always ok? no excetions?
Italic                   | default-1         | ...
...                      | ...               | ...
Source                   | default-1         | not works with inline editor
...                      | ...               | ...
TransformTextToUppercase | texttransform-3   | scenario-1
TransformTextCapitalize  | texttransform-3   | scenario-1
...                      | ...               | ...

（如果我们可以填写此表，这个答案将会完整！）

Answer 2

来自Toolbar Configuration的这个帮助了我很多：

// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.
config.toolbar = [
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
    '/',
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
    { name: 'others', items: [ '-' ] },
    { name: 'about', items: [ 'About' ] }
];

和

// Toolbar groups configuration.
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: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'links' },
    { name: 'insert' },
    '/',
    { name: 'styles' },
    { name: 'colors' },
    { name: 'tools' },
    { name: 'others' },
    { name: 'about' }
];

在自己的init中使用时：

CKEDITOR.replace( 'topicMessageInput', {
        toolbar: [
                { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
                { na..

希望它有所帮助。

CKEditor 4中可用的所有工具栏按钮名称和组名称的列表？

2 个答案:

“逐项”配置

所有已注册的插件名称

有效BUTNAME的完整列表