Ckeditor5-angular: Toolbar not showing by default when using custom build generated from the online builder

[apappas1129]

Currently, the default toolbar, as defined in the online tool, is not displayed. There is no toolbar at all by default.
So I had to manually make the config object which is already redundant.

So I have something like this:

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", // Worked?!
      "|",
      "blockquote", 
      "codeblock", // Worked?!
      "bulletedlist",
      "numberedlist",
      "|",
      "link",
      "image", // BUG: not working
      "addFile",
      "|",
      "Format",
    ],
  };

The above code successfully shows the toolbar and the two Plugins code and codeblock were there and it worked properly. But the image toolbar item is not showing.

My setup currently is just the default Ionic tabs template (Angular, of course) and I imported my custom build like this:

import * as CustomEditor from "src/assets/ckeditor5-custom-build/build/ckeditor";

This is what the package.json in the build folder looks like:

{
  "name": "ckeditor5-custom-build",
  "author": "CKSource",
  "description": "A custom CKEditor 5 build made by the CKEditor 5 online builder.",
  "version": "0.0.1",
  "license": "SEE LICENSE IN LICENSE.md",
  "private": true,
  "devDependencies": {
    "@ckeditor/ckeditor5-basic-styles": "^23.1.0",
    "@ckeditor/ckeditor5-block-quote": "^23.1.0",
    "@ckeditor/ckeditor5-code-block": "^23.1.0",
    "@ckeditor/ckeditor5-dev-utils": "^23.6.0",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^23.6.0",
    "@ckeditor/ckeditor5-editor-classic": "^23.1.0",
    "@ckeditor/ckeditor5-essentials": "^23.1.0",
    "@ckeditor/ckeditor5-heading": "^23.1.0",
    "@ckeditor/ckeditor5-image": "^23.1.0",
    "@ckeditor/ckeditor5-link": "^23.1.0",
    "@ckeditor/ckeditor5-list": "^23.1.0",
    "@ckeditor/ckeditor5-paragraph": "^23.1.0",
    "@ckeditor/ckeditor5-paste-from-office": "^23.1.0",
    "@ckeditor/ckeditor5-table": "^23.1.0",
    "@ckeditor/ckeditor5-theme-lark": "^23.1.0",
    "@ckeditor/ckeditor5-word-count": "^23.1.0",
    "css-loader": "^5.0.0",
    "postcss": "^8.1.4",
    "postcss-loader": "^4.0.4",
    "raw-loader": "^4.0.2",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^4.2.3",
    "webpack": "^4.44.2",
    "webpack-cli": "^4.1.0"
  },
  "scripts": {
    "build": "webpack --mode production"
  }
}

[apappas1129]

Related stackoverflow question from here.

[FilipTokarski]

Hi, thanks for the report. 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'
        ]
    },
        // ...

then build the editor and add it to Angular app, the toolbar works as expected.

cc @ma2ciek

[ma2ciek]

Yes, Sorry for the confusion. This was overlooked and will be fixed.  I'll close it as a duplicate of ckeditor/ckeditor5#7617.

[Abolfazl2647]

i'm using custom build in react (CRA) with 'MathType' and 'ChemType' toolbar. if i add it in index.html everything works fine.
but as soon as i add the plugin in CKEditor component of version 5 the toolbar will gone !

import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';


export default class Ckeditor extends React.PureComponent {
    render() {
        return <CKEditor
                    editor={ window.ClassicEditor } ------> add this like custom build add it with script tag in index.html
                    data="<p>Hello from CKEditor 5!</p>"
                    onReady={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        console.log( { event, editor, data } );
                    } }
                    onBlur={ ( event, editor ) => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ ( event, editor ) => {
                        console.log( 'Focus.', editor );
                    } }
                />;
    }
}

[siconghe-gep]

Is there an ETA on fixing this issue?

it's been 6 months. and the issue is still there in the online build tool.

[bandly93]

I am also wondering if this feature is fixed.