如何在 CKEDITOR 5 中获取工具栏可用项目？

Posted 2023-02-16

【中文标题】如何在 CKEDITOR 5 中获取工具栏可用项目？

【英文标题】：How do I get toolbar available items in CKEDITOR 5?

【发布时间】：2018-05-03 14:21:54

【问题描述】：

我想在CKEDITOR 5中配置工具栏。我看了一下文档。

https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/configuration.html

然而，与我的问题相关的唯一脚本是：

Array.from( editor.ui.componentFactory.names );

前端程序员很难理解。我把这个脚本放在哪里？如何输出结果？有详细教程吗？

事实上，如果 CKEDITOR 简单地将可用项目放入文档中会很好。这样可以省去很多麻烦。

谢谢！

【问题讨论】：

"事实上，如果 CKEDITOR 简单地将可用的项目放入文档中会很好。这样可以省去很多麻烦。" => 是的，我也是这么想的。使用一些代码来获取可用选项是荒谬的。

我也是这么想的！

可以在这里分享这个列表吗？我就是看不到？，即使使用建议的代码。

***.com/questions/57229403/…

这对我有用，***.com/questions/57229403/…

【参考方案1】：

您可以将此代码放在您可以找到的代码示例正文中，例如在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 是最安全且面向未来的解决方案。

【讨论】：

非常感谢！现在我有另一个问题：我找不到在 textarea 中显示源 html 代码的按钮/功能。 CKEDITOR5中有这样的功能吗？

查看github.com/ckeditor/ckeditor5/issues/592。本主题解释了为什么源代码视图功能没有意义（以您从其他编辑器那里知道的形式）。

有一个分号应该从该行中删除，其中包含两个分号。

我将 CK5 与 VueJS 一起使用。我将“ClassicEditor”分配给数据属性“editor”。然而，当我尝试从中记录可用名称时，'ui' 是未定义的。在 Vue 中使用我的编辑器时如何访问可用名称？

我了解不同的构建以及文档。但是每个“构建”都有自己的按钮，对吧？那么为什么我们要偶然发现隐藏在文档中的这个“sn-p”并弄清楚如何实现它（他们提供了命令，但没有关于将它放在哪里或如何放置的信息）？默认情况下，他们可以将所有按钮都放在工具栏中。对于用户/开发人员来说，比在他们的文档中寻找更容易。

【参考方案2】：

你可以使用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"]

【参考方案3】：

可用于列出可用工具栏的示例代码

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()));
    );

【讨论】：

这曾经可以工作，但最近似乎停止工作了。向标题对象添加选项数组时出现错误。

【参考方案4】：

对于任何来到这里想知道如何在 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

【参考方案5】：

很难将插件名称保存在文档中的一个位置，因为：

有多个不同的构建， 开发并添加了新插件。

如果您想检查当前使用的构建中可用的工具栏项，请在您使用的浏览器中打开开发者控制台并执行引用的代码行

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.
     );

【参考方案6】：

添加到@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 ));
        
 

 

【讨论】：

正是我想要的。非常感谢

@特雷弗！不客气。抱歉回复晚了

【参考方案7】：

添加到@DestinyB answer - 可能是 Vue 更简单的解决方案 - 只需在 ckeditor 组件和 onReady 方法中监听 @ready="onReady"：

onReady(event) 
   console.log(Array.from(event.ui.componentFactory.names()));
,