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

【问题标题】：Ckeditor link is not editable in NgbModal bootstrapCkeditor 链接在 NgbModal 引导程序中不可编辑
【发布时间】：2020-12-10 18:27:06
【问题描述】：

HTML

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

.ts

public Editor = ClassicEditor;
public EditorReference: any;

【问题讨论】：

标签： angular ckeditor bootstrap-modal angular-ui-bootstrap

【解决方案1】：

这是因为 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"

【讨论】：