Ckeditor链接在NgbModal引导程序中不可编辑

问题描述

HTML

 let difference = arr.filter(i=>other.find(x=>(x.n !== i.n)));

.ts

<div class="col-12 px-0">
    <h5 class="float-left">{{serviceline.SL}} Grid</h5>
    <button class="btn btn-link p-0 color-black float-right" (click)="activityGridModal(gridcontent);getActivityGriddata()">
      {{ activitityBtnName == '' ?   'Add Activity Grid' : 'Edit Activity Grid'}}
    </button>
    <ng-template #gridcontent let-modal>
        <div class="modal-header">
            <h4 class="modal-title">Activity Grid Maintenance</h4>
            <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true" (click)=" cancelActivityGrid()">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <p>Enter the Activity Grid in the text field below if applicable</p>
            <ckeditor class="tool-guidance" [editor]="Editor" [(ngModel)]="activitityGetText"></ckeditor>
        </div>
        <div class="modal-footer">
            <div class="col-12">
                <button class="col-2 btn float-right btn-warning" type="button" (click)="modal.close('save');saveActivityGrid()">Save</button>
                <button type="button" class="col-2 btn float-left btn-outline-dark" (click)="modal.close('Close click'); cancelActivityGrid()">Cancel</button>
            </div>
        </div>
    </ng-template>
</div>

解决方法

这是因为CKEditor链接添加/编辑弹出窗口被隐藏在引导程序模式弹出窗口的后面，只需在样式文件中添加以下CSS即可解决问题。

.ck.ck-balloon-panel {
  z-index: 10054 !important;
}

经过以下版本测试：

“ @ ckeditor / ckeditor5-angular”：“ ^ 2.0.1”

“ @ ckeditor / ckeditor5-build-classic”：“ ^ 23.1.0”

“ @ metamask / detect-provider”：“ 1.2.0”

“ @ ng-bootstrap / ng-bootstrap”：“ 8.0.0”