CKEditor5 Toolbar is not showing in Angular when using Online Build Generator

Question

I am using a custom build generated from the online build generator.

Then I followed the documentation written in Rich text editor component for Angular but using the custom build instead of using one of the official editor builds.

Somehow my Toolbar and its items like the image toolbar and table toolbar are not showing up in my Angular project. Executing npm install provides the required files for toolbar to show with complete items (including "image" etc.) on the online build sample page.

What am I missing here to successfully show the Toolbar and its items as defined using the online build generator?

Answer 1

Also experiencing the same thing currently.

I assume you also just simply imported the ckeditor.js from the build folder. In My case I had to manually define the config for the editor:

Component

  import * as CustomEditor from "src/app/ckeditor5-custom-build/build/ckeditor";
  //...
  public Editor = CustomEditor;
  config: CKEditorConfig = {
    placeholder: "Write your answer here.",
    // BUG: Current CKEditor5's generated build does not 
    // show the default toolbar as defined in the online builder
    toolbar: [
     "bold", "italic",  "underline", "code", "|",
      "blockquote", "codeblock", "bulletedlist", "numberedlist", "|",
      "link", "image", "|",
      "Format",
    ],
  };

Template

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

DISCLAIMER

The current problem here is that the "image" toolbar item is not working as expected. The above code only shows the toolbar and successfully shows the "code" and "codeblock" toolbar items (This are separate CKEditor Plugins Just like the "image")

UPDATE (as of Nov. 9, 2020)

• The issue was confirmed by FilipTokarski in here.

I can confirm that when you add editor build from online builder straight to the Angular app, the toolbar is missing. The case here is - build from OB has builtinPlugins, but is missing defaultConfig - the config is in ckeditor5/sample/index.html. If you add this config to ckeditor5/src/ckeditor.js, for example like this:

Editor.defaultConfig = {
    toolbar: {
        items: [
            'heading', '|', 'bold', 'italic', 'link',
            'bulletedList', numberedList', '|', 'indent', 'outdent', '|',
            'imageUpload',
            'blockQuote',
            'insertTable',
            'mediaEmbed',
            'undo', 'redo'
        ]
    },
    language: 'en',
    image: {
        toolbar: [
            'imageTextAlternative',
            'imageStyle:full',
            'imageStyle:side'
        ]
    },

• The related issue I have filed, Toolbar not showing by default when using custom build generated from the online builder, has been closed and marked as duplicate of Packages created with online builder differs from official builds which is still open (ATTOW, Nov. 20, 2020).