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

user_13622463 0
Viewed 2690

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?

ckeditor5
2 Answers

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)

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'
        ]
    },
user_26782180

From my investigation of this issue, it seems the online builder only sets up the toolbar configuration in the sample/index.html file.

On opening this file, you can see the editor toolbar configuration that you setup using the online builder.

Simply copy this object to your toolbar items and you'll be good to go.

user_108856210
Related