Question

首先，我不是CKEditor的专家，但我认为我已经做到了这一点并且应该可行，但肯定会出现我做错的事情。两天试图解决这个问题，我想我已经不止一次地调整了一切，但却无法全部工作。

我正在加载https://cdn.ckeditor.com/4.6.2/full-all/ckeditor.js并加载我写的外部插件。我的插件加载很棒，我的图标在适当的时候显示在工具栏和上下文菜单中，点击它们就会发生正确的事情。我定义了一个自定义工具栏，我就是按照我想要的方式得到的;在CKEDITOR.replace（）设置调用中由customConfig：...指向的本地配置文件中定义。一切都与世界是对的！

然后我尝试同时执行它们 - 但我的工具栏图标/按钮没有添加到我的自定义工具栏设置中。我的插件仍在加载和工作，我可以通过上下文菜单获取我的插件，它可以做它应该做的事情，所以我认为它在那里并且仍在工作;但是我无法在工具栏中显示按钮/图标。我还尝试将配置文件中的工具栏设置为数组数组，并将组件名称设置为对象数组 - 我的按钮不会显示。我已经尝试将CKEDITOR.replace（）对象中的工具栏定义为数组数组和对象数组，并且自定义工具栏显示但我的工具栏按钮不显示。我尝试在我创建的自定义工具栏中定义我的按钮，并使用editor.ui.addButton方法。我的自定义工具栏中没有按钮！

如果我注释掉customConfig：行，那么我的按钮会显示在默认工具栏的文档组中，所以我认为我正确地在适当的时候使用正确的API并指向正确的png文件添加它。但是，如果我取消注释customConfig并且不进行任何其他更改并按Ctrl + F5多次刷新缓存，那么无论我在哪里尝试放置按钮都不会显示该按钮（我通过API添加的文档，插入，按钮组，等等）。

我相当确定我的自定义配置正在处理和使用，因为它确实将工具栏从标准内置更改为我定义的。

使用默认工具栏设置我可以添加一个toolbarButtonGroup并将我的按钮放入其中但是当我尝试使用自定义工具栏设置时这不起作用（我认为除了内置工具栏之外我不允许这样做在文档中。）

所以我的问题是

是否可以使用自定义工具栏定义和外部插件并且在使用CKEditor的CDN版本时都拥有自定义工具栏按钮？
我是否必须构建并托管我自己的CKEditor版本，以便我的插件不是外部插件？
还有别的我做错了吗？

这是我创建的自定义工具栏设置（这不是最终游戏，而是我为了向自己证明我可以创建自定义工具栏而创建的游戏）：

config.toolbar = [
{ name: 'document',     items: [ 'Save', 'Preview', 'Print' ] },
{ name: 'basicstyles',  items: [ 'Bold', 'Italic', 'Underline', '-', 'CopyFormatting', 'RemoveFormat' ] },
{ name: 'clipboard',    items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'colors',   items: [ 'TextColor', 'BGColor' ] },
{ name: 'editing',  items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
'/',
{ name: 'forms',    items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ name: 'paragraph',    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', 'Strike', 'Subscript', 'Superscript' ] },
{ name: 'tools',        items: [ 'Maximize', 'ShowBlocks', 'Source' ] },
{ name: 'about',    items: [ 'About' ] }
];

这是我用我的图标/按钮创建的自定义工具栏设置（它是文档组中的xrr第一项：

config.toolbar = [
{ name: 'document',     items: [ ‘xrr’, 'Save', 'Preview', 'Print' ] },
{ name: 'basicstyles',  items: [ 'Bold', 'Italic', 'Underline', '-', 'CopyFormatting', 'RemoveFormat' ] },
{ name: 'clipboard',    items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'colors',   items: [ 'TextColor', 'BGColor' ] },
{ name: 'editing',  items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
'/',
{ name: 'forms',    items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ name: 'paragraph',    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', 'Strike', 'Subscript', 'Superscript' ] },
{ name: 'tools',        items: [ 'Maximize', 'ShowBlocks', 'Source' ] },
{ name: 'about',    items: [ 'About' ] }
];

以下是我将按钮添加到工具栏的方法 - 这适用于内置工具栏，但不适用于上面的自定义定义：

editor.ui.addButton( 'xrr', {   label: 'Create RR Placeholder', // lang.toolbar,
                command: 'xrr',
                toolbar: 'document',
                icon: 'xrr'
                }
            );

非常感谢任何人提供的任何帮助！

我可以使用CKEditor的CDN版本同时拥有自定义工具栏和自定义外部插件吗？

0 个答案: