我想在CKEDITOR 5中配置工具栏。我看了一下文档。
然而，与我的问题相关的唯一脚本是：
Array.from( editor.ui.componentFactory.names );
前端程序员很难理解。我把这个脚本放在哪里？如何输出结果？有详细教程吗？
事实上，如果 CKEDITOR 简单地将可用项目放入文档中会很好。这样可以省去很多麻烦。
谢谢！
【问题讨论】：
标签： ckeditor5
您可以将此代码放在您可以找到的代码示例正文中，例如在CKEditor 5 Build's Basic API guide。例如：
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( Array.from( editor.ui.componentFactory.names() ) );
} )
.catch( error => {
console.error( error );
} );
正如@Szymon Cofalik 在他的回答中提到的那样——没有一个单一的按钮列表可以在所有版本中使用。 CKEditor 5 的构建可能不仅在视觉上有所不同——它们还可能包含不同的插件，因此也可能包含不同的按钮。因此，使用该代码 sn-p 是最安全且面向未来的解决方案。
【讨论】：
你可以使用console.log( Array.from( editor.ui.componentFactory.names() ) );，它会给你：
["undo", "redo", "bold", "italic", "blockQuote", "ckfinder", "imageTextAlternative", "imageUpload", "heading", "imageStyle:full", "imageStyle:side", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells"]
【讨论】：
可用于列出可用工具栏的示例代码
var editor = ClassicEditor
.create(document.querySelector('#editor'), {
toolbar: ['headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList'],
heading: {
options: [
{modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
{modelElement: 'heading1', viewElement: 'h1', title: 'Heading 1', class: 'ck-heading_heading1'},
{modelElement: 'heading2', viewElement: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'},
{modelElement: 'heading', viewElement: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'}
]
}
})
.then(function (editor) {
console.log(Array.from(editor.ui.componentFactory.names()));
});
【讨论】：
对于任何来到这里想知道如何在 Angular（例如 Angular 8）中使用 Array.from(editor.ui.componentFactory.names()) 解决方案（如其他答案中所述）的人，这里有一个描述。如果您尝试在ngOnInit 或ngAfterViewInit 中执行此操作，则为时过早，您会得到类似Cannot read property 'ui' of null 的信息。您需要监听来自 ckeditor 的 ready 事件并在该点查询名称，如下所示。
在你的组件模板代码中，给编辑器一个id并监听ready事件：
<ckeditor
#editor
[editor]="Editor"
[config]="config"
(ready)="onEditorReady($event)">
</ckeditor>
然后在你的组件打字稿代码中，添加一个@ViewChild注解并实现onEditorReady如下：
@ViewChild('editor', {static: false})
editorComponent: CKEditorComponent;
onEditorReady(event: any): void {
const toolbarItems = Array.from(this.editorComponent.editorInstance.ui.componentFactory.names());
console.log('Available toolbar items: ' + toolbarItems.join(', '));
}
然后您将在控制台中看到类似这样的内容：
可用的工具栏项目：撤消、重做、粗体、斜体、块引用、 ckfinder, imageTextAlternative, imageUpload, 标题, imageStyle:full, imageStyle:side, indent, outdent, link, numberedList, bulletedList, mediaEmbed、insertTable、tableColumn、tableRow、mergeTableCells
【讨论】：
很难将插件名称保存在文档中的一个位置，因为：
如果您想检查当前使用的构建中可用的工具栏项，请在您使用的浏览器中打开开发者控制台并执行引用的代码行
Array.from( editor.ui.componentFactory.names );
当然，editor 必须是编辑器实例。
我希望这能回答你的问题。
编辑：也创建编辑器is described in the documentation。但是您必须将编辑器实例分配给editor 变量。
例如：
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
window.editor = editor;
// Or alternatively you could paste that line here and look at console.
} );
【讨论】：
添加到@user2846469的响应，在vue.js中通过下面的示例即可实现；
import ClassicEditorfrom '@ckeditor/ckeditor5-build-classic';
export default {
data() {
return {
editor: ClassicEditor,
editorData: '',
editorConfig: {}
},
mounted() {
console.log(this.editor.builtinPlugins.map( plugin => plugin.pluginName ));
}
}
}
【讨论】：