ckeditor 5 bootstrap modal과 같이 쓸 시 pannel 안보이는 현상

ckeditor5 는 강력한 js 편집 library이다. 간혹 bootstrap modal과 같이 사용해야 하는 경우가 발생하는데 이 때 modal에 가려져 balloon block editor의 편집 pannel이 안보이는 현상이 있다. 이 때 2시간동안 z-index 조절을 했지만 문제는 z-index가 아닌 focus 문제였다.

 

<modal html>

<div class="modal fade" id="document-edit-window" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog modal-lg px-4" style="max-width: 1300px;">
        <div class="modal-content px-5">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">편집하기</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <div id="editor">

                </div>

            </div>
        </div>
    </div>
</div>

 

 

<modal focus 해제>

$('#document-edit-window').modal( {
    focus: false,
    // Do not show modal when innitialized.
    show: false
} );

 

<ckeditor z-index 조절>

body {
    /* We need to assaign this CSS Custom property to the body instead of :root, because of CSS Specificity and codepen stylesheet placement before loaded CKE5 content. */
    --ck-z-default: 2000;
    --ck-z-modal: calc( var(--ck-z-default) + 999 );
}

 

혹시 몰라 ckeditor의 css z-inex 부분도 수정하였다.