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

Question

我想配置CKEDITOR 5中的工具栏。我查看了文档。

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

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

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

对于前端程序员来说，理解这个太难了。我应该把这个脚本放在哪里？如何输出结果？有详细的教程吗？

事实上，如果CKEDITOR在文档中提供可用项目，那将会非常好。那样可以省去很多麻烦。

谢谢！

- stonyau

---

“事实上，如果CKEDITOR能够在文档中列出可用选项，那将会非常好。这将会省去许多麻烦。” => “当然，我也正是这么想的。使用一些代码来获取可用选项太荒谬了。” - schankam

我也是这么想的！ - IgorAlves

能否在这里分享这个列表？我无法看到它，即使使用了建议的代码。 - IgorAlves

https://stackoverflow.com/questions/57229403/ckeditor-5-and-reactjs-i-cant-edit-the-toolbar - Dulaj Madusanka

这对我有用，https://stackoverflow.com/questions/57229403/ckeditor-5-and-reactjs-i-cant-edit-the-toolbar - Leonardo Mora

关于ckeditor5的文档很多都令人困惑和模糊不清。 - McAuley

Answer 1

您可以将此代码直接放置在代码示例的正文中，例如在CKEditor 5 Build的基本API指南中找到。例如：

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log( Array.from( editor.ui.componentFactory.names() ) );
    } )
    .catch( error => {
        console.error( error );
    } );

正如@Szymon Cofalik在他的答案中提到的那样 - 没有一个包含所有构建中可用按钮的单一列表。CKEditor 5构建不仅在视觉上可能不同 - 它们还可能包含不同的插件和因此不同的按钮。因此，使用该代码片段是最安全和未来证明的解决方案。

- Reinmar

---

非常感谢！现在我有另一个问题：我找不到在文本区域中显示源HTML代码的按钮/功能。CKEDITOR5中是否有类似的功能？ - stonyau

请查看 https://github.com/ckeditor/ckeditor5/issues/592。该主题解释了为什么源代码视图功能（以您从其他编辑器中了解的形式）没有意义。 - Reinmar

那一行有两个分号，应该去掉一个分号。 - Magmatic

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

我了解不同的构建版本和文档。但是每个“构建”都有自己的按钮，对吧？那么为什么我们必须在文档中翻找这个“片段”，并弄清楚如何实现它（他们提供命令，但没有关于放置位置或方式的信息）？他们本可以将所有按钮默认放在该构建版本的工具栏中。这样对用户/开发人员来说更容易，而不是在文档中四处搜索。 - McAuley

Answer 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"]

这些是与编辑器相关的功能名称。

- Dirk J. Faber

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

- Izhari Ishak Aksa

---

这个以前可以运行，但最近似乎停止工作了。当我向标题对象添加选项数组时，出现了错误。 - shanzilla

Answer 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>

然后在组件的TypeScript代码中，添加一个@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、图像文本替代、上传图像、标题、图像风格：全、图像风格：侧、缩进、减少缩进、链接、有序列表、无序列表、媒体嵌入、插入表格、表列、表行、合并单元格

- user2846469

Answer 5

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

• 有多个不同的版本构建，
• 会开发并添加新的插件。

如果您想检查当前使用的构建中有哪些工具栏项目，请在您正在使用的浏览器中打开开发人员控制台，并执行引用代码行。

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

当然，editor 必须是编辑器实例。

我希望这回答了你的问题。

编辑：文档中也有创建编辑器的说明。但是你必须将编辑器实例指定给 editor 变量。

例如：

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        window.editor = editor;
        // Or alternatively you could paste that line here and look at console.
    } );

- Szymon Cofalik

Answer 6

在@DestinyB的答案中提出了一个Vue更简单的解决方案 - 只需监听ckeditor组件上的@ready="onReady"事件，在onReady方法中：

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

- Anoiny

Answer 7

在回答@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 ));
        }
 }
}
 

- Destiny Brotobor

---

正是我所需要的。非常感谢。 - Trevor

@Trevor！欢迎您。抱歉回复晚了。 - Destiny Brotobor

Answer 8

在 React 中

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';




export default class AddArticle extends Component {




    
    render() {

        return <CKEditor config={EditorConfig} editor={ClassicEditor} onReady={(event) => {
   console.log(Array.from(event.ui.componentFactory.names()))}} /> 
    }
}

- Nima

Answer 9

这是我从ClassicEditor得到的内容： [ "selectAll", "undo", "redo", "bold", "italic", "blockQuote", "uploadImage", "imageUpload", "heading", "imageTextAlternative", "toggleImageCaption", "imageStyle:inline", "imageStyle:alignLeft", "imageStyle:alignRight", "imageStyle:alignCenter", "imageStyle:alignBlockLeft", "imageStyle:alignBlockRight", "imageStyle:block", "imageStyle:side", "imageStyle:wrapText", "imageStyle:breakText", "indent", "outdent", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells" ]

- kheya