CKEditor 4 with/ Angular: 8 使用工具栏中的按钮

Question

我试图在工具栏配置上放置一些指定的按钮，但其中一些似乎丢失了。甚至看起来它们还没有安装，但是：

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>

结果：

如您所见，我在配置对象上指定的许多按钮都丢失了。我也尝试过这种方法，但得到了相同的结果：

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';

缺少的按钮是 'JustifyLeft'、'JustifyCenter'、'JustifyRight'、'JustifyBlock'、'Font'、'FontSize'、'TextColor' , 和 'BGColor'.

知道为什么会这样吗？

Answer 1

不幸的是，您不能简单地将按钮添加到配置中，您还需要它们的插件。看起来您使用的是 CKEdtior 4，因此您实际上可以按照此向导创建您的自定义构建：

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

我知道开箱即用的字体颜色、大小、文本对齐方式等似乎很基本，但事实并非如此。

在CKEditor5中，添加插件变得更加困难。

CKEditor 4 with/ Angular: 8 使用工具栏中的按钮

CKEditor4 w/ Angular8: Missing buttons in toolbar

ckeditor

angular

angular8