CKEditor4 w Angular8: 工具栏中缺少按钮

问题描述 投票:0回答:1

我想把一些指定的按钮放在工具栏的配置上,但有些按钮似乎不见了。它甚至看起来像他们没有安装,但是。

app. module. js:

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

packaje.json

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

组件.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'] },
        ]
    };
}

组件.html

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

结果。

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

缺少的按钮有 "JustifyLeft"、"JustifyCenter"、"JustifyRight"、"JustifyBlock"、"Font"、"FontSize"、"TextColor "和 "BGColor"。

有什么想法,为什么会出现这种情况?

angular ckeditor angular8
1个回答
0
投票

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

https:/ckeditor.comcke4addonspluginsall。

我知道,像字体颜色、大小、文字对齐等等......这样的功能似乎很基本,但其实不然。

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

© www.soinside.com 2019 - 2024. All rights reserved.