CKeditor 5（在线生成器）缺少按钮

Question

已使用 CKeditor v5 在线构建器下载默认设置。

使用它时一切正常。但是当使用加载本地（和下载的在线生成器版本）时所有按钮都消失了，为什么？

感谢帮助。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

    <script src="/ckeditor5/build/ckeditor.js"></script>
    <!-- <script src="https://cdn.ckeditor.com/ckeditor5/20.0.0/classic/ckeditor.js"></script> -->

<body>

        <div id="editor">Test Text (buttons missing)</div>
                
        <script>
            ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
            console.error( error );
            } );
        </script>

</body>
</html>

Answer 1

检查附加到 CKEditor 5 版本 (samples/index.html) 的示例的源代码。你会注意到有一个toolbar configuration provides你需要在初始化CKEditor实例时传递。

Answer 2

Angular 用户：

即使默认的 ckeditor build (@ckeditor/ckeditor5-build-classic/build/ckeditor) 带有它自己的工具栏按钮，您必须自己为自定义构建添加它（例如https://ckeditor.com/ckeditor-5/online-builder/）

将 theCustomBuild/sample/index.html 生成的工具栏数组复制到您的配置：

html:

<ckeditor [editor]="Editor" [config]="config"></ckeditor>

在您的组件中：

public config = {
    toolbar: [
        'exportPdf',
        'heading',
        '|',
        'bold',
        ...
    ]
};

CKeditor 5（在线生成器）缺少按钮

CKeditor 5 (online builder) missing buttons

ckeditor5