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对象上指定的许多按钮都不见了。我也尝试过这种方法，但是得到了相同的结果：

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中，添加插件变得更加困难。

带有Angular8的CKEditor4：工具栏中的缺少按钮

1 个答案: