Search code examples
angularckeditorangular8

CKEditor4 w/ Angular8: Missing buttons in toolbar

I'm trying to put some specified buttons on the toolbar configuration, but some of them seems to go missing. It even looks like they're not installed, but:

app.module.js:

import { CKEditorModule } from 'ckeditor4-angular';
...
imports: [
    ...
    CKEditorModule,
    ...
]

packaje.json

"dependencies": {
    "ckeditor4-angular": "^1.0.1",
}

component.js

public editorType: String;
public config: any;

constructor() {
    this.editorText = '';
    this.editorType = 'classic';

    this.config = {
        height: 430,
        toolbar: [
            { name: 'insert', items: ['Image', 'Table'] },
            { name: 'links', items: ['Link'] },
            { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
            { name: 'paragraph', items: ['NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
            { name: 'styles', items: ['Font', 'FontSize'] },
            { name: 'colors', items: ['TextColor', 'BGColor'] },
        ]
    };
}

component.html

<ckeditor [type]="editorType" [config]="config" [(ngModel)]="editorText"></ckeditor>

Result:

Final result

As you can see, many of the buttons I specified on the config object are missing. I've also tried this approach, but I got the same result:

config.toolbarGroups = [
        { name: 'insert', groups: [ 'insert' ] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        '/',
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'colors', groups: [ 'colors' ] },
        { name: 'tools', groups: [ 'tools' ] },
        { name: 'others', groups: [ 'others' ] },
        { name: 'about', groups: [ 'about' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'forms', groups: [ 'forms' ] }
    ];

    config.removeButtons = 'Source,Save,Templates,NewPage,Preview,Print,PasteText,PasteFromWord,Find,SelectAll,Scayt,Replace,CopyFormatting,RemoveFormat,Blockquote,CreateDiv,BidiLtr,BidiRtl,Language,About,Maximize,ShowBlocks,Styles,Format,Flash,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,Anchor,Form,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Outdent,Indent,Checkbox,Unlink,Cut,Copy,Paste,Undo,Redo,Strike,Subscript,Superscript';

The missing buttons are 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'Font', 'FontSize', 'TextColor', and 'BGColor'.

Any ideas why is this appening?

Solution

  • Unfortunately, you can't just simply add the buttons to the config, you need the plugins for them as well. It looks like you're using CKEdtior 4, so you can actually just follow this wizard to create your custom build:

    https://ckeditor.com/cke4/addons/plugins/all

    I know it seems pretty basic for something like font color, size, text justification, etc... to be present out of the box, but it isn't.

    In CKEditor5, it gets even harder to add plugins.