Question

我在Angular 7应用中使用了新的ckeditor 5组件。我已经成功安装了它，并且能够将数据绑定到ckeditor。我面临的问题是我无法设置编辑器的配置。无论我在配置中设置的内容如何，都不会反映在编辑器中。有人可以指出出什么问题了。如果您在下面看到我正在尝试设置工具栏，但这并不能反映用户界面中显示的内容

UI

<div class="form-group row " >
        <div class="col-md-12" style="padding-top:10px; padding-left: 0px; padding-right: 30px;">
            <div class="desc-header">Notes </div>
            <div id = "divNotes" class="divEditor">
                <ckeditor  [editor]="Editor" [config]="getCKConfig" [id]="'ckNotes'" *ngIf="EditMode" style="font-size: 11px;" debounce="500"
                 [(ngModel)]="ManagerDetails.Person.NOTES"> </ckeditor> 
                <div style="padding-left: 20px; padding-top: 10px; padding-bottom: 10px" *ngIf="!EditMode" [innerHTML]="ManagerDetails.Person.NOTES">
                </div>
            </div>
        </div>
    </div>

组件

getCKConfig() {
    return {

        contentsCss: ["body {font-size: 11px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;}"],
        pasteFromWordRemoveFontStyles: false,
        height: '100px', width: '100%', readOnly: false, toolbar: [
            { name: 'clipboard', groups: ['clipboard', 'undo'], items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
            { name: 'editing', groups: ['find', 'selection', 'spellchecker'], items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'] },
            { name: 'source', items: ['Sourcedialog'] },
            { name: 'basicstyles', groups: ['basicstyles', 'cleanup'], items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
            { name: 'paragraph', groups: ['list'], items: ['NumberedList', 'BulletedList'] }
        ]
    };
}

Answer 1

您的组件中有两个问题：

首先：[config]必须绑定到属性，而不是方法。例如。组件中的<editor [config]="editorConfig">和@Component() class SomeClass{ editorConfig={} }

第二个：CKEditor 5与CKEditor 4不同。它具有不同的体系结构，不同的工具栏选项，配置等。请参见CKEditor 5 configuration guide和CKEditor 5 migration guide。

Answer 2

将其存储在变量中并直接绑定

ckConfig =   {contentsCss: ["body {font-size: 11px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;}"],
        pasteFromWordRemoveFontStyles: false,
        height: '100px', width: '100%', readOnly: false, toolbar: [
            { name: 'clipboard', groups: ['clipboard', 'undo'], items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
            { name: 'editing', groups: ['find', 'selection', 'spellchecker'], items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'] },
            { name: 'source', items: ['Sourcedialog'] },
            { name: 'basicstyles', groups: ['basicstyles', 'cleanup'], items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
            { name: 'paragraph', groups: ['list'], items: ['NumberedList', 'BulletedList'] }
        ]};

工具栏或Ckeditor 5的任何其他部分的配置未反映在UI中

2 个答案: